经验教程

解决谷歌广告拖慢网站加载速度的问题

悠悠楠杉

2020-03-05

2 评论

1,463 阅读

正在检测是否收录...

03/05

网站接入谷歌广告(Google AdSense)后，经常发现整站的加载时间长了许多。对此百度了许多方法，找到了既简单又实用的方法，效果明显！

谷歌广告加载慢？优化AdSense代码加速网站。

减少代码中的js请求

先让我们看看谷歌官方给的广告代码

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-id"
    data-ad-slot="id"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

代码是通过async异步请求加载adsbygoogle.js核心文件，待加载完成后再push到ins内，显示广告内容。
而谷歌广告在国内的节点少之又少，时常抽风。当网站加载广告出现加载慢的情况时，网站就会一直处于加载状态，从而拖慢网站加载速度。

问题:如果我的网站要放几个广告单元时，我是不是要为每个广告单元都添加一段<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>呢？

答:不，不需要！网站只需要加载一次adsbygoogle.js

如果网站有多个广告单元，那就可以把该段引入JS的代码放在head内，既可以达到只需一次载入JS 即可让所有广告单元显示广告。

js代码如下

<script>
window.onload = function() {
    setTimeout(function() {
            let script = document.createElement("script");
            script.setAttribute("async", "");
            script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
            document.body.appendChild(script);
    }, 2e3);
}
</script>

jq代码如下

$(function() {
    setTimeout(function() {
            $('body').append('<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
    }, 2e3);
})

代码是让广告在网站载入完成后才开始加载，让谷歌广告加载慢的问题无法影响网站加载速度。

经验谷歌广告拖慢网站加载速度

朗读