Calculation of performance score with large bundle size and lots of network requests

[eldoy]

Not sure if this is a bug report or a feature request, but the calculation of performance score and best practices seems utterly wrong in many cases. For example, apps that are built using Next.js will often have a bundle size of 1 MB with 2 MB additional content loaded on the first load. There are 30 or so network requests with over half of them being Javascript files. Every single site built with that tech stack is visibly slow and very heavy, yet they are able to score 100% on performance.

My own sites have a bundle size of 0.1MB with 0.1MB extra content, and 3 network requests on load, a single minified JS file is included. This tech stack is much faster, open instantly on first load and on navigation, yet they score the same, also 100%.

How is this possible? One site being slow and heavy yet, the other being lean and fast, why do they get the same score? Or rather, why is large bundles and a high number of network requests not being used in the calculation of performance score and best practices? Shouldn't Lighthouse warn about this or punish slow sites?

Add this to the list of issues in the Lighthouse report please:

• "Reduce bundle size - use plain HTML, CSS and Javascript to avoid large bundle sizes"
• "Reduce number of network requests - your site will load faster if you avoid a large number of network requests"

Shouldn't Lighthouse warn about excessive network requests and dissuade people from using inferior tech such as Next.js? If not, why not?

[adamraine]

How is this possible? One site being slow and heavy yet, the other being lean and fast, why do they get the same score? Or rather, why is large bundles and a high number of network requests not being used in the calculation of performance score and best practices? Shouldn't Lighthouse warn about this or punish slow sites?

The Lighthouse score is calculated using performance metrics (Largest Contentful Paint, Cumulative Layout Shift, etc):
https://developer.chrome.com/docs/lighthouse/performance/performance-scoring. Bundle size isn't factored into this calculation because the performance metrics provide a more direct assessment of the actual user experience.

Bundle size can indirectly affect performance metrics, but it's also possible to optimize performance metrics despite a large bundle size so that may be why some of the Next.js sites you mentioned have high Lighthouse scores.

Shouldn't Lighthouse warn about excessive network requests and dissuade people from using inferior tech such as Next.js? If not, why not?

Lighthouse does warn about large bundle sizes in the "Avoid enormous network payloads" audit. For the reasons mentioned above however, this audit will not affect the overall Lighthouse performance score.

[benschwarz]

@eldoy, your misunderstanding of how lighthouse works does not render it "a joke", as it stands, your feedback is unhelpful. Please reconsider before taking pot shots, because I can assure you it is not appreciated :-)

The Performance score is calculated based on performance metrics: LCP, CLS & TBT. The number of requests, or size of them don't always play as a factor that influences these metrics (though, they can, depending on the situation), so as @adamraine stated, that is why they aren't part of the performance score. A large number of requests does not always indicate a poor user experience.

Best practices audits do not evaluate performance, but instead other page characteristics that can be useful to evaluate the overall construction of the page.

I'd encourage you to spend some time understanding what Lighthouse offers before deciding it appropriate to dismiss the feedback it can provide to you.

[eldoy]

@benschwarz It seems like you're deliberately trying to avoid the issue, or that you don't really know what you're talking about. That a 1MB+ bundle size is considered performant, no matter how fast your internet connection is, or can be part of any "best practice" at all, is objectively a joke, and you know it.

Anything over 1MB, or even 500k on first load should automatically be max 50%. Why isn't it? Because every React app out there would be exposed as shitty tech and start hating you? Really weird, to me it's so obvious.

[benschwarz]

@eldoy I'm aware of how bundle sizes effect performance, thanks. I don't appreciate your communication and thus will leave the conversation here. You are welcome & encouraged to open a PR that tackles the problems you've outlined. I'd love to see that.

[eldoy]

@benschwarz I should have guessed it, you are using NextJS yourself, right? Your home page is 1MB bundle size as well, 40 requests on first page load. Yet your whole business idea is "shipping fast web sites"?

[adamraine]

You are clearly being toxic so I'm locking this conversation.

Again, the Lighthouse performance score measures how performant the user experience is, not how performant the bundle size is. At the end of the day, if as site's user experience is good then Lighthouse will reward that site with a high score.

Yes, a poor user experience can often be attributed to a large bundle size, but that does not make bundle size the end-all-be-all of a site's performance.