Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

With google chrome chrome dev, I am running a lighthouse Analysis for mobile.

Lighthouse shows a 7.0 seconds delay for Largest Contentful Paint (LCP): enter image description here

I decide to dive into this and click on: "View original trace".

It redirects me to the Performance tabs: enter image description here

Here it says that the LCP is 749.7ms (= 0.7497 seconds).

Where this discrepancy between LightHouse and Performance tab comes from?

  • 0.7497 seconds for Performance
  • 7.0 seconds for LightHouse
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
275 views
Welcome To Ask or Share your Answers For Others

1 Answer

Why is Lighthouse showing much longer load times?

The answer is a combination of simulated network throttling and CPU throttling.

Simulated Network Throttling

When you run an audit it applies 150ms latency to each request and also limits download speed to 1.6 Megabits (200 kilobytes) per second and upload to 750 megabits (94 kilobytes) per second.

This is done via an algorithm rather than applied (it is simulated)

CPU throttling

Lighthouse applies a 4x slowdown to your CPU to simulate a mid-tier mobile phone performance.

If your JavaScript payload is heavy this could block the main thread and delay rendering. Or if you dynamically insert elements using JavaScript it can delay LCP for the same reason.

This is also done via an algorithm rather than applied (it is simulated)

So why doesn't it match the performance trace?

Because the trace is "as it happened" and doesn't take into account the simulated network and CPU slowdown.

Can I make the performance trace match Lighthouse?

Yes - all you need to do is uncheck "Simulated throttling" under the settings section (you may need to press the cog in the top right of the Lighthouse tab to show this checkbox).

Location of simulated throttling checkbox

Be aware that you will probably get an even lower score as simulated throttling can be a bit more forgiving.

Also note that your report will take a lot longer to run (which is good for seeing how someone on a slow phone with a slow 4G connection might experience your site!)

Now when you run Lighthouse it will use applied throttling, adding the latency and CPU slowdown in real time. If you view your trace now you will see it matches.

Where can I see what settings were used on a run?

At the bottom of your report you can see what settings were applied. You will see on the screenshot below that "(Devtools)" is listed in the Network Throttling and the CPU throttling sections to show that I use applied throttling.

Lighthouse settings


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...