可以根据视口大小加载 Google Publisher Tags 库吗？

Question

我公司的网站使用 Google 发布商标签 (GPT) 在我们的网页上展示 Google 广告。由于我们最近一直在努力提高我们的页面速度（试图提高我们的 PageSpeed Insights/Lighthouse 指标），我注意到我们正在获得这个“机会”：

删除未使用的 JavaScript

/gpt/pubads_impl_2021030801.js?XXXXXXXX (securepubads.g.doubleclick.net)

我们的情况是我们根据屏幕尺寸展示我们的广告（Google 或其他）：在给定页面上，我们可能会在页面上给定空间的移动设备尺寸屏幕上展示 Google 广告，但不展示任何广告- - 或非 Google 广告 - 在更大的屏幕上。

我想防止将 GPT 库完全加载到我们不显示 Google 广告的屏幕尺寸的页面上，因为它不会被使用。我们目前根据 Google 的recommendation：<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>，静态（和异步）加载库。

是否可以根据屏幕大小（通过 JS/媒体查询/Accept-CH??）有条件地加载此库，而无需标记“静态加载广告脚本”审核？还是打破了这个“规则”并在基于视口大小检查的情况下内联注入脚本，而不是 PageSpeed Insights“删除未使用的 JavaScript”失败？

我倾向于优先考虑页面速度（并尝试注入），但我真的不明白不“静态”加载 GPT 库的后果。

Answer 1

根据屏幕大小添加脚本

根据屏幕大小添加脚本没有问题，您仍然可以向其添加async（或defer）属性，使其不会阻塞。

没有影响（除了库可能会稍晚加载，具体取决于您在下面放置 JavaScript 的位置，我建议将它放在页面上的内联脚本标签中，这样您就不必等待网络请求之前添加脚本）关于库如何运行。

主要问题是如果您有Content Security Policy，您可能必须使用不同的解决方案。

我假设您在以下代码 sn-p 中没有使用严格的内容安全策略。

唯一需要注意的另一件事是，如果您确实将其加载到文档中的错误位置（太早或太晚）或通过外部脚本，这可能会对性能产生负面影响，因此您只需要保留注意那个。因此，我会将它放在脚本之前在内联 <script></script> 标记中的确切位置。

const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if(screenWidth < 1024){
    let script = document.createElement("script");
    script.src = "https://securepubads.g.doubleclick.net/tag/js/gpt.js"; 
    script.setAttribute('async', true);
    document.body.appendChild(script);
    console.log("Added script");
}

快速思考

从性能的角度来看，你有前后左右的事情。

较小的屏幕尺寸往往是功能较弱的设备，并且可能在 4G/3G 连接上。

在较小的屏幕上而不是在较大的屏幕上显示广告与从效果角度来看您应该做的完全相反。广告往往会占用大量资源！

如果您依靠广告获得收入，您不妨在所有屏幕尺寸上展示它们，如果您的收视率是 50% 的手机，50% 的平板电脑桌面，那么您可以考虑改变这一决定，让广告在桌面而不是在桌面上展示手机。

如果性能对您很重要，但广告必须留在移动设备上，那么我会考虑使用与上述非常相似的方法延迟 广告脚本（不是显示的分析脚本），但使用setTimeout 将添加的脚本延迟 3-5 秒，而不是检查屏幕宽度。

这让我们在添加繁重的工作（例如广告）之前呈现页面并变得可交互。

显然，如果您这样做，那么您必须确保在页面上为广告分配了足够的空间，以避免累积布局移位。