Gtag.js会增加pagespeed insights中的LCP指标

Question

我在核心网页体验（移动端）中遇到了有关LCP得分的问题。我的LCP得分是3秒，而在移动设备上所需的LCP得分是2.5秒。我已经尝试了一切方法。使用高级插件（EWWWW Image Optimizer）优化图像。通过CDN提供文件。减少网络请求并应用其他常见方法。唯一能够降低LCP得分的方法是删除gtag.js。这将把LCP降低到2秒，但我真的需要这个脚本来分析流量。还有其他方法可以减少LCP吗？我已经尝试了Lighthouse中列出的所有建议。删除未使用的CSS、JS。延迟加载图像、CSS和JS。

- samiullah ilyas

---

你能分享一下你的URL吗？这样可以看到工具为你的网站报告了哪些性能/建议。 - Rick Viscomi

暂存网站：https://www.marrakech-staging.hitechprovider.com/ 原始网站：https://www.marrakech-desert-trips.com/ - samiullah ilyas

暂存网站进行了字体修改，但没有CDN。原始网站有CDN，但没有字体修改。仅进行字体修改就可以将LCP减少200-300毫秒。 - samiullah ilyas

一个有些令人绝望的步骤是放弃Google脚本，通过测量协议实现轻量级版本，可能使用服务器端GTM（“绝望”是因为这将是很多工作，而不是因为这个想法本质上有什么问题）。 - Eike Pierstorff

我将Gtag.js设置在document.ready后约1秒运行。虽然它能完成工作，但可能会减少一些测量信息。 - samiullah ilyas

Answer 1

我认为值得注意的PageSpeed Insights 结果有：

• 避免过多的DOM元素（1,889个）
• 最小化主线程工作（3.5秒）

在移动测试中，PSI报告主线程花费了3.5秒，其中1.275秒用于样式和布局。我认为其中一部分可以归因于大型DOM。因此，请尝试找到方法来修剪页面上的多余内容或标记，以简化HTML结构。

脚本评估也占据了0.987秒，这表明有大量的JavaScript代码在页面加载时运行。我对GTM不是太熟悉，但根据结果看来它确实对主线程消耗做出了很大贡献（2.88秒）。需要检查的一些事项包括禁用或删除GTM中不必要的服务，因为这些第三方可能会添加过多的JavaScript，并优化您需要的服务，以便将任何不绝对必要的内容推迟到稍后。请参阅Loading Third-Party JavaScript指南，获取有关GTM的其他建议。

- Rick Viscomi

Answer 2

在实际网站中，滑块图像是LCP，并且通过CSS加载。直到CSS加载完成并且浏览器知道页面需要该图像之前，浏览器不会加载该图像。可以通过对该图像进行预加载来加快速度。

您还使用了很多网络字体。通过减少字体数量，您可以释放主要图像的带宽。

- Tony McCreath