LightHouse 和 Performance 之间的 LCP 时间 - Google Chrome

Question

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):

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

It redirects me to the Performance tabs:

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

Answer 1

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).

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.