谷歌Google AdSense广告导致网站加载慢?代码优化及网站加速教程

Google

现在大部分站长都申请了谷歌Google AdSense广告,然后挂上去,希望能有所收获。但是过的一段时间发现一个比较严重的问题,就是网站的加载速度受影响。虾皮路就遇到了这种情况,比如本来网站打开很快的,结果放上谷歌Google AdSense广告后,每次打开都要转圈圈,等谷歌Google AdSense广告全部显示出来后才算全部加载完成。这样给访客始终不太好的浏览体验。

虾皮路也遇到过这样的情况,现在就分享一下谷歌Google AdSense广告导致网站加载慢的代码优化及网站加速教程。

一、优化谷歌AdSense广告代码

大家申请谷歌Google 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>

然后如果一个页面放3-4个广告的话,那么一个页面里面有3-4个这样的代码。但是大家有没有发现,其中每次都要调用一个https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js代码。其实是只要调用一次就行了的。官方也说到了:

Q:如果我的网页上有多个广告单元,我是否要为每个广告单元添加 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> ?
A:不,不需要,adsbygoogle.js 可以一次性加载。

既然官方都这样说了,那实际上可以将代码:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

放到 head 里,相当于每页都会加载。然后剩下的广告代码就精简为如下这样:

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

节省了多次调用adsbygoogle.js的时间。

但是光这样还不够,能不能让网页显示完成,然后再到谷歌Google AdSense广告显示呢?当然是可以的。

二、延迟显示谷歌AdSense广告

实际上就是JS监听加载。将每次网页加载完成后,才开始加载谷歌Google AdSense广告的JS,就是https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js。

那么,只要我们将下面的代码放到 head 里,保证每一页都有加载。

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

然后在每个广告位上继续放上相应的广告代码即可。和第一条一样。

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

刷新缓存后,你会发现,网页会先展示,然后才到谷歌Google AdSense广告,网站优化加速完成,是不是访问快多了?

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

虾皮路版权所有,未经允许不得转载:虾皮路 » 谷歌Google AdSense广告导致网站加载慢?代码优化及网站加速教程

分享到: 更多 (0)
坚持下去不容易,打个赏呗

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活