如何为 Google AdSense 广告单元设置延迟加载
发布者经常面临的一个常见问题是 Google AdSense 影响我们的原始博客速度。 由于无法控制优化资源,我们最终会感到悲伤。
就像 YouTube 视频缩略图一样,它们应该使用 WebP 作为广告单元图像。 具有讽刺意味的是,有时他们懒得使用 GZIP 压缩服务,或保持资源最小化。 许多 DNS 查找的大量资源和额外负载,会像地狱一样扼杀我们的页面速度。
@AdSense 为什么这么慢?
– TheGulshanKumar
几个月前,当我在推特上发布广告单元速度问题时,并没有得到任何满意的回应。 我为自己提供了一个解决方案,可以防止 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-->
- 以上代码,如果可以添加自定义脚本,您可以使用 via Theme 选项
- 对于创世纪,通过使用 Genesis 简单挂钩 带选项的插件
genesis_after
- 或者 页眉和页脚插件 对于任何其他主题。
这个脚本到底做了什么?
此脚本将确保您的 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。
最棒的是,您根本不需要对广告代码进行任何更改。
- 转到插件设置,包括关键字 谷歌广告
- 然后,保存设置并清除(清除)页面缓存。 而已。
执行结果
我一直在我的一个使用 Mediavine 广告网络的客户网站上使用这个插件(比 Adsense 广告单元)移动和桌面都成功通过了核心 vital。
您还应该阅读这些文章
- 在 WordPress 中提供 WebP 格式图像以加快页面加载速度
- 现在忘记 WordPress 中的垃圾评论 😎
- 修复 – WordPress 显示评论作者的本地主机 IP (127.0.0.1) 而不是真实的