起的性能问题时(您会在高 TBT 和 LCP 值

Collaborate on cutting-edge hong kong data technologies and solutions.
Post Reply
ishanijerin1
Posts: 58
Joined: Tue Jan 07, 2025 4:40 am

起的性能问题时(您会在高 TBT 和 LCP 值

Post by ishanijerin1 »

了解哪些脚本影响最大并导致最严重的性能瓶颈是修复这些问题的第一步。以下工具可帮助您快速识别和可视化 CPU 密集型脚本。

Lighthouse 脚本详解
在解决由脚本引中看到这种情况),我通常从“减少 JavaScript 执行时间”和“减少第三方代码的影响”中标记的脚本开始,这些脚本会在顶部突出显示影响最大的脚本。

您可以从以下示例网站看 法国号码 到来自多个 Wistia 视频嵌入脚本、实时聊天 (Intercom) 和 VWO 分析的大量线程阻塞时间。考虑到最高分数只有在总阻塞时间为 60 毫秒或更短时才能实现,使用这些脚本中的任何一个都可能开始降低分数。

脚本阻止 TBT 时间

灯塔树状图
脚本的影响可以在 Treemap 视图中清晰地显示出来,也可以通过 PageSpeed Insights 访问。脚本按文件大小排序,最大的脚本占据最大的框,但这并不一定对应于执行时间最长的脚本。

在下面的例子中,很容易看到最大的脚本是实时聊天、Wistia 视频嵌入、几个 GTM 脚本,其次是 VWO A/B 测试工具。

灯塔树状图脚本

第三方脚本的可视化
为了更详细地可视化来自第三方域的请求(通常但不总是 JS 脚本),我经常使用此映射工具,它将请求显示为节点及其之间的连接,其中较大的节点代表较大的文件,一般而言,较大的节点和较多的节点会降低性能。

节点的互连还可以帮助确定从哪个源调用哪些脚本,并且颜色编码显示不同类型的请求。

下图显示了来自同一示例站点的请求,其中有多个更大的
Post Reply