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

网站接入谷歌广告(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);
})

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

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

我来吐槽

*

*

已有 2 条评论

  1. 秋水

    厉害了,老铁