CODEWITHSUNDEEP
lighthouse
william-ku
william-ku

Reputation: 73

Why LCP values are drastically different between the Lighthouse tab and Performance tab for a same test run?

Here are the steps I used to generate the report on which my question below derives:

  1. Launch this url on chrome browser: "https://www.americanexpress.com/us/credit-cards/business/" Open dev-tools and click on "Lighthouse" tab. Make sure Device checkbox is "Desktop". Then click on "Generate report" button. The report will look like this image: lighthouse view . Please note that the LCP value is 2.2 seconds (2200 milliseconds)
  2. Now click on the "View Original Trace" button at lower part of the screen. The result view will look like this image: Performance view . Please note that the LCP value is about 890 milliseconds (which is about 1/3 of 2200 ms.

So here is my question: Why the LCP on the Lighthouse view is "2200 ms" (2.2 sec) while the LCP on Performance tab (which is from the same test-run) shows as the much lower "890 ms"?

Here is the reason I am asking the question: Our development team has made great effort to paint the page as soon as possible ahead of certain other activities to improve the perceived page performance. So I would think the LCP 890ms on the Performance tab is the correct value. But unfortunately the "official" report is taken from the much higher value of "2200ms" from the Lighthouse tab. The reason I mention the word "official" is that, the "PageSpeed Insight" site uses same algorithm as the Lighthouse report. Do you think this is some mistake or temporary state for the Lighthouse report? And do you think that the actual LCP on the Performance tab will be eventually adopted in the future?

Thank you in advance for any help you can provide. William

Upvotes: 7

Views: 2835

Answers (2)

Jonas Äppelgran
Jonas Äppelgran

Reputation: 2747

I just had a case where the Performance tab and the Lighthouse report found and measured on differenct LCP elements. Performance tab said the LCP element was a paragraph while Lighthouse considered it to be an image hidden under the site's cookie banner. Needless to say the load time for these was wildly different.

You obviously can not trust the developer tools. Even when they are the same thing developed by the same company...

Upvotes: 0

GrahamTheDev
GrahamTheDev

Reputation: 24825

When you view the original trace that is "as it happened" during your audit.

Now if you have a particularly good connection with low latency you will get slight differences.

This is because lighthouse (in the browser at least) applies network throttling, even on desktop.

It sets latency to 40ms and throughput to 10,240 Kilobits per second (so about 1.25 megabytes per second).

This is why you see different numbers, the page you linked is 1.8 Megabytes so will take about 1.5 seconds to download under those simulated network conditions. I am guessing your connection is many times faster than 10 Megabits per second and your latency is probably lower than 40ms if you have a decent connection.

How to get the numbers to match?

On the Lighthouse tab in developer tools you can switch this throttling off.

Just uncheck "Simulated throttling" and rerun the test, you will find your results match exactly as no network throttling is applied.

simulated throttling checkbox located next to clear storage checkbox

If you uncheck "Simulated throttling" on mobile you will get throttling that is applied so you will actually see the page load slower. Yet again your trace will match exactly.

You can see all of the throttling information at the very bottom of your report under "Runtime Settings".

Runtime Settings example

As you can see I have 0 ms HTTP RTT, 0 Kbps down, 0 Kbps up (DevTools) for network throttling as no throttling is applied. You probably see the 40 ms TCP RTT, 10,240 Kbps throughput (Simulated) that I mentioned earlier.

Page Speed Insights

Whether they use the exact same numbers on Page Speed Insights I am unsure but they likely apply some throttling as a multi-gigabit dedicated connection like they have is not indicative of a real world home broadband connection.

They may also have slight CPU throttling as a server processor would not be indicative of a laptop / PC processor.

Upvotes: 10

Related Questions