Adsense广告加载慢如何优化？

发表于 2019年06月14日
SEO

加入Adsense广告后，站点整体加载都变慢了，数据显示的慢，图片显示的更慢甚至加载失败，如何解决？今天体验盒子教你两个方法彻底解决Adsense广告加载慢的问题。

目录表

优化Adsense广告代码减少请求

先看一个Adsense生成的默认代码

<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>

<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>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

我们来分解一下，首先通过async异步请求加载adsbygoogle.js核心文件，待加载完成后再push到ins内，显示广告内容。

如何优化这段代码？通过我们的做法是直接复制生成的这段代码，放在相应位置就结束了。但如果我们一个页面有多个广告位，那就会出现多次引用请求adsbygoogle.js文件，这样就会造成网络延迟。那么如果一个页面多个广告是否需要多次引用呢？

Q：如果我的网页上有多个广告单元，我是否要为每个广告单元添加 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>？
A：不，不需要，adsbygoogle.js 可以一次性加载。
上面是Google官方给出的QA，不需要多次引用加载

好的，那么优化方法确定了，在head内一次加载adsbygoogle.js就行（体验盒子使用的是head一次加载），不需要多次加载。也可以用JS监听加载

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);
}

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);

}

懒加载优化Adsense广告代码

懒加载一般我们是应用在图片场景，意思是只有在某些特定内容出现在可视区域中时，才开始加载的一种技术，如下所示：

如何用在Adsense广告代码上呢？一个WG友人针对此问题写了一个小插件，分为JS版和JQuery版本，在这里。下载对应的版本，进行初始化JS：

// 原生JS
var instance = new adsenseLoader( '.adsense' );
 
// jQuery
$( '.adsense' ).adsenseLoader();

// 原生JS

var instance = new adsenseLoader( '.adsense' );

// jQuery

$( '.adsense' ).adsenseLoader();

html，需要修改，提取出你的ins代码相应部分

<div class="adsense">
  <ins data-ad-client="ca-pub-id" data-ad-slot="id"></ins>
  <p class="adsense__loading"><span>Loading……</span></p>
</div>

<p class="adsense__loading"><span>Loading……</span></p>

</div>

css，这里建议你根据自己的布局进行调整

.adsense{
    display: block;
}
.adsense:before { display: none !important; }
.adsense ins    { width: 100%; height: 100%; display: block; }
 
@media screen and ( max-width: 1024px ) {
    .adsense        { width: 728px; height: 90px; }
    .adsense:before { content: '1024'; }
}
 
@media screen and ( max-width: 800px ) {
    .adsense        { width: 468px; height: 60px; }
    .adsense:before { content: '800'; }
}