优化Google Adsense导致网站加载速度慢的方法

lazy load google adsense 学习笔记

自从7月份挂网站上挂上Google Adsense后,果然不愧是全球闻名的拖慢加载速度的JS,哪怕现在国内解析走的是上海和北京的服务器,但实际情况是,网站完全加载完全都要十几秒,甚至几十秒。我的网站是WordPress搭建的,默认开启了图片延迟加载,加上Google Adsense之后,图片就经常加载不出来,非常影响体验以及SEO。

网上查了下,一般做法就是延迟加载Google Adsense的代码。然后我个人情况会稍微不一样,但最后也找到了原因及解决办法。

以下是前后的Pagespeed测试图:

pc pagespeed
pc pagespeed after
mobile pagespeed
mobile pagespeed after

Sponsored links
Sponsored links

优化Google Adsense广告代码

先来看看Google Adsense的代码,每一个广告单元的代码都是下面这个样子:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

可以看到这段代码分成了三个部分:

1. 加载Adsense的JS。如果有多个广告单元的话,其实这段代码只需要执行一次,所以它是可以单独提出来,放到head或者footer里就好了。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3818033429018049"
    crossorigin="anonymous"></script> 
  • async 表示异步加载Adsense的JS。
  • crossorigin="anonymous" 允许匿名请求。

2. 广告标记

<ins class="adsbygoogle" //定义广告的类名
    style="display:inline-block;width:300px;height:250px" // 指定广告的宽度和高度
    data-ad-client="ca-pub-xxxxxxxx" // 这里是你自己的Adsense ID。
    data-ad-slot="xxxxxxxx"></ins> // 广告单元ID

3. 推送广告

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

这段代码用于将广告请求推送给 Google AdSense。

所以我们可以把第一段代码放到主题的head或者是footer里,不用重复加载Adsense的js,缩减多次调用adsbygoogle.js的时间。然后原来的广告位就只剩下了第二段和第三段代码。

等页面加载完再加载Google Adsense

接下来就是延迟加载adsbygoogle.js,让其在网页加载完之后再执行。把下面这段代码放在网站的footer,在</body>之前。

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

然后广告位在贴上剩下的ins和push代码:

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

滚动页面时再加载Google Adsense

上面是等页面加载完再加载Adsense,还可以选择当用户滚动页面时再开始加载广告。将下面的代码插入到</body>前。

<!-- 延迟加载Google Adsense -->
<script type='text/javascript'>
//<![CDATA[
/* 延迟加载 AdSense JS */
var lazyadsense = !1;
window.addEventListener("scroll", function() {
    (0 != document.documentElement.scrollTop && !1 === lazyadsense || 0 != document.body.scrollTop && !1 === lazyadsense) && (! function() {
        var e = document.createElement("script");
        e.id = "g_ads_js", e.type = "text/javascript", e.async = "async", e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        var a = document.getElementsByTagName("script")[0];
        a.parentNode.insertBefore(e, a)

      	/* 以下为自动广告专用,如果没有开启,请删除*/
      	var gads = document.getElementById("g_ads_js")
        gads.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");

    }(), lazyadsense = !0)
}, !0);
//]]>
</script>

<!-- 延迟加载广告推送 -->
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

然后原广告位上的代码只保留ins即可:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

针对累积布局偏移(CLS)的优化

累积布局偏移 Cumulative Layout Shift,简称是CLS。该概念于2020年5月18日谷歌更新算法时提出。这次更新将 HTML 元素初始位置的任何更改加入了排名因素。累积布局偏移 (CLS) 是用于描述这种位置变化的术语。

通过使用上面的 Google AdSense 延迟加载代码,你可以加快网站速度。但是这会影响CLS分数。因为Adsense的代码里没有规定元素的高度,那么在广告加载前,这块的高度就是0 px,但是一旦加载了 AdSense 广告,元素的高度将变为280 px 到 320 px的样子。那么网页其他元素的初始位置都会自动下移,这会导致 CLS 分数提高0.5以上。然而,谷歌pagespeedinsights的建议最大值是0.25。

建议在ins的代码上加上一个div,规定一个最小高度(当你选择的是固定尺寸的广告时,该值要跟你广告尺寸匹配)。所以延迟加载的代码不变,广告位ins的代码段变成了下面的样子:

<div style="min-height=250px">
<!-- 侧边栏广告 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-XXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

我选择的解决方法

我开启了自动广告和手动展示广告,上述方法我最终只用了第一个,减少Adsense JS的调用。

其次我的需求是加快图片的加载速度,不要等到Adsense加载完再进行加载。虽然我已经将Adsense的代码放到了最后,但仍然是广告加载优先于图片加载。

然后我发现问题的原因来自于安装的一个插件 LiteSpeed Cache。它里面有图片延迟加载的设置,且执行顺序是落后于广告的,所以导致我不论怎么关闭WordPress和主题自带的延迟加载功能,都无法解决问题。最终我关掉了该插件里的延迟图片加载功能,问题解决。

4.5/5 - (2 votes)
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x