如何为 Google AdSense 广告单元设置延迟加载

发布者经常面临的一个常见问题是 Google AdSense 影响我们的原始博客速度。 由于无法控制优化资源,我们最终会感到悲伤。

就像 YouTube 视频缩略图一样,它们应该使用 WebP 作为广告单元图像。 具有讽刺意味的是,有时他们懒得使用 GZIP 压缩服务,或保持资源最小化。 许多 DNS 查找的大量资源和额外负载,会像地狱一样扼杀我们的页面速度。

几个月前,当我在推特上发布广告单元速度问题时,并没有得到任何满意的回应。 我为自己提供了一个解决方案,可以防止 AdSense 减慢原始内容的加载速度。

老实说,即使对于图像,我个人也不是延迟加载的忠实拥护者。 但是,我还是想分享一个轻量级的选择。 如果您愿意,如果您非常关心在广告单元之前首先提供主要内容,您可以尝试一次。

小费: 您可以使用 Ezoic 赚取比 AdSense 更多的收入并免费托管 WP。

AdSense 延迟加载设置说明

自然地,这就是原始广告单元代码的样子。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>

</script>

技术细节:基本上它以异步形式加载会发生什么,意味着浏览器继续下载 adsbygoogle.js 脚本而不阻止 HTML 解析。

但在这里,在延迟加载方法中,我将把 ASYNC 方法更改为真正的 DEFER。 AdSense 脚本将开始在浏览器中下载,只有一次窗口将完成主网页的加载。 这样,访问者就不必为 AdSense 等待快速查看整个页面。

为此,您无需对广告单元进行任何重大更改。 简单地说,我们将改变加载的样式 adsbygoogle.js 那会做所有的魔术。

您只需要遵循以下两个步骤

从所有现有广告单元中删除以下脚本。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

现在它会像这样

<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>

</script>

然后,在您的主题页脚中添加以下 JavaScript 代码,可能就在 body 标记之前。

方法一、onload事件

暗示: 存在 Noptimize 标签以与 Autoptimize 兼容。 它将阻止聚合 AdSense 延迟加载器内联 JS。

<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->
  1. 以上代码,如果可以添加自定义脚本,您可以使用 via Theme 选项
  2. 对于创世纪,通过使用 Genesis 简单挂钩 带选项的插件 genesis_after
  3. 或者 页眉和页脚插件 对于任何其他主题。
创世挂钩选项

这个脚本到底做了什么?

此脚本将确保您的 AdSense 广告单元将开始加载并在完成主网页的完全加载后变得可见。 这就是我将其命名为 Google AdSense 延迟加载的原因。

方法二、onscroll事件

只有当用户滚动网页时,这种方法才会加载广告单元,否则不会。

<script type="text/javascript">
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>

方法 3. 在用户交互时显示广告单元

如果您想在不影响收入和性能的情况下及时显示广告,您可以使用“飞行脚本 通过 WP Speed Matters”插件,用于根据用户交互下载和执行 JS。

最棒的是,您根本不需要对广告代码进行任何更改。

延迟加载的飞行脚本插件设置
Flying Script 整洁干净的UI
  • 转到插件设置,包括关键字 谷歌广告
  • 然后,保存设置并清除(清除)页面缓存。 而已。

执行结果

我一直在我的一个使用 Mediavine 广告网络的客户网站上使用这个插件(比 Adsense 广告单元)移动和桌面都成功通过了核心 vital。

核心生命结果

您还应该阅读这些文章

  • 在 WordPress 中提供 WebP 格式图像以加快页面加载速度
  • 现在忘记 WordPress 中的垃圾评论 😎
  • 修复 – WordPress 显示评论作者的本地主机 IP (127.0.0.1) 而不是真实的

  BunnyCDN 评论 🚀最快、负担得起的 CDN

类似文章