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

Question

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

删除未使用的 JavaScript

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

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

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

是否可以根据屏幕大小有条件地加载此库（通过 JS/media queries/Accept-CH??）而不标记“静态加载广告脚本”审核？还是打破这个“规则”并在基于视口大小的检查中内联注入脚本比 PageSpeed Insights“删除未使用的 JavaScript”失败更令人震惊？

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

Answer 1

添加基于屏幕尺寸的脚本

添加基于屏幕尺寸的脚本没有问题，您仍然可以向其添加 async（或 defer）属性，这样它就不会阻塞。

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

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

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

唯一需要注意的是，如果您将它加载到文档中的错误位置（过早或过晚）或通过外部脚本加载，这可能会对性能产生负面影响，因此您只需要留意那个。因此，我会把它放在内联 <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 秒，而不是检查屏幕宽度。

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

显然，如果您这样做，则必须确保在页面上为广告分配了足够的 space 以避免累积版式偏移。

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

Can Google Publisher Tags library be loaded based on viewport size?

javascript

pagespeed

lighthouse

gpt

添加基于屏幕尺寸的脚本

快速思考