从LightHouse到Performance之间的LCP时间-Google Chrome [英] LCP time between LightHouse and Performance - Google Chrome
问题描述
使用google chrome chrome开发人员，我正在运行灯塔分析手机版.
灯塔显示最大内容绘画(LCP)的7.0秒延迟:
我决定深入研究并点击:查看原始跟踪".
它将我重定向到性能"选项卡:
此处显示LCP为749.7ms(= 0.7497秒).
LightHouse和效果"标签之间的差异来自何处?
- 0.7497秒的表现
- LightHouse的时间为7.0秒
为什么Lighthouse显示更长的加载时间?
答案是
请注意，您可能会获得更低的分数，因为模拟节流可能会更宽容.
还请注意，您的报告将需要花费更长的时间运行(这对于查看4G连接速度较慢的慢速电话上的用户可能会遇到您的站点很有用！)
现在，当您运行Lighthouse时，它将使用 applied 进行限制，从而实时增加延迟和CPU速度.如果现在查看您的跟踪，您将看到它匹配.
在哪里可以查看运行中使用了哪些设置?
在报告的底部，您可以看到应用了哪些设置.您将在下面的屏幕截图中看到(Devtools)"网络节流"和"CPU节流"部分列出了这些信息，以表明我使用了应用节流.
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
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.
这篇关于从LightHouse到Performance之间的LCP时间-Google Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
