webpack-bundle-analyzer VS lighthouse ci action

Analyze Bundle Size: Use tools like webpack-bundle-analyzer to analyze and reduce your JavaScript bundle size. This can help identify large dependencies that may be slowing down your app.

- `npm run start` - Start the app - `npm run lint` - Lint the project - `npm run test` - Run unit tests - `npm run build` - Build the project - `npm run build:prod` - Build the project in production mode - `npm run build:prod:stats` - Build the project in product mode with stats - `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) - `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation - `npm run version` - Generate changelog - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index

If you're using Webpack for bundling your app, there's the very well known webpack-bundle-analyzer which comes as a webpack plugin that you need add in your webpack config file in order to use it.

Then, with the Webpack Bundle Analyzer plugin, we discovered problematic areas in bundles. Bundle Analyzer highlighted our biggest bundles – client-location and map-with-flashing-dots

I used to use webpack-bundle-analyzer but we have switched the builder to browser-esbuild now.

First start by running a webpack bundle analysis to see what exactly is bundled. You might be surprised about things being included that you didn't expect which can help with where to look.

Firstly I recommend taking a look at the structure of the webpack output with something like webpack-bundle-analyzer for any obvious over bundling issues.

See: https://github.com/webpack-contrib/webpack-bundle-analyzer

Webpack Bundle Analyzer

Lighthouse (Chrome DevTools) — audit SEO and performance

Slow-loading pages can stem from multiple causes, which makes them one of the most challenging issues to fix in web development. Lighthouse (LH) is Google’s free and open-source website auditing tool that can help you detect and solve your web performance issues and speed up your site.

We wanted to use next/font/google to implement the Inter Google Font for its magical ways of optimising font performance. We wanted a fast site with green Lighthouse scores. (Along with images, custom fonts are a major cause of poor site performance.)

Google Lighthouse

Google Lighthouse is an open-source tool that helps developers run technical audits on web apps and websites. It generates comprehensive reports on performance, accessibility, SEO, and best practices. The insights Lighthouse provides are valuable for improving user experience and making your website perform well in Google’s search rankings.

1 - SEO Starter Guide 2 - Lighthouse Overview 3 - Vitest Guide 4 - Playwright Intro 5 - Abhinaba Ghosh/Playwright/Lighthouse

🔹 Mobile Responsiveness – More than 60% of traffic comes from mobile devices. Test your site on Google’s Mobile-Friendly Test to ensure it’s optimized.

At this point, I built our blog app using npm run build and previewed it to generate a Lighthouse report. We received a 100 in the Performance and SEO categories.

https://developer.chrome.com/docs/lighthouse/overview

I think it was always a Google product https://github.com/GoogleChrome/lighthouse/tree/9ff34c320811.... If I remember right it was an evolution of the page speed test site (can't remember exact name) of which Google was also a contributor to.

There's plenty that can be said about Google, but investing in education and testing around web performance was one of their stand out achievements imo.