如何优化从 DFP 和谷歌标签管理器脚本中获取广告？

Question

我是一个致力于提高我们网站的灯塔评分的团队的一员： https://www.bikewale.com/m/royalenfield-bikes/classic-350/

我们专注于优化页面上的 javascript 交付，以减少交互时间。但是，我们注意到像 gtm.js、gpt.js 这样的脚本以及在页面加载时加载广告将我们的最大改进限制在 70 左右（灯塔性能得分）。

在我们对 javascript 交付进行优化后，我们的得分最高为 70。我们尝试删除 google tag manager 和 gpt 的 js 文件，结果得分上升到 95（大约）。此外，延迟加载所有广告，因此对 dfp 的请求使我们提高到 75 左右（我们不能这样做，因为第一个广告在第一个折叠中）。

请注意，我们已遵循以下链接中提到的指南和最佳做法： gtm - https://developers.google.com/tag-manager/quickstart gpt - https://support.google.com/admanager/answer/7485975

googletag.pubads().refresh(immediateAds); // immediateAds is array of first fold ads 刷新方法正在恶化性能。

有没有办法优化广告和 gtm 脚本的投放，以提高性能？可能是脚本的更新版本或替代方案？有没有办法在不使用refresh()方法的情况下立即加载第一个折叠广告，并在页面上延迟加载其他广告

Answer 1

恭喜你获得 70 分！对于电子商务网站来说，这是一个非常可观的分数。

我对 GTM 或 GPT 不是很熟悉，但我可以推荐一种优化方法来帮助这些库更有效地完成工作：预连接到提供广告的来源。

对于每个来源，您应该在页面顶部附近添加两个提示：

<link rel="dns-prefetch" href="https://dt.adsafeprotected.com">
<link rel="preconnect" href="https://dt.adsafeprotected.com">

第一个提示要求浏览器对源进行 DNS 查找。第二个请求浏览器建立 TCP 连接。 Preconnect 完成了 dns-prefetch 所做的一切，但 not all browsers support preconnect。使用这两个提示可以让您从尽可能多的浏览器中获得最佳性能

这两个提示都为浏览器提供了在页面加载过程后期才知道的资源的先机。

请记住，根据加载的资源，you may need two preconnect hints。您可以检查瀑布图以确保在页面加载开始时设置所有连接。