0

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

删除未使用的 JavaScript

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

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

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

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

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

4

1 回答 1

1

根据屏幕大小添加脚本

根据屏幕大小添加脚本没有问题，您仍然可以向它添加async(or defer) 属性，这样它就不会阻塞。

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

主要问题是，如果您有内容安全策略，您可能必须使用不同的解决方案。

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

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

这让我们在添加诸如广告之类的繁重工作之前渲染页面并变得可交互。

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

于 2021-03-11T07:31:25.260 回答