如何解决Google AdSense广告导致网站加载慢的代码优化方法

网站教程评论232阅读模式

前言:

相信很多做网站的朋友网站有了一部分流量后就会挂上 Google AdSense 谷歌广告以维持服务器的运营需要,但是国内对于谷歌的网络优化并不是很好,很多网站在挂上Google AdSense 谷歌广告后网站的加载速度受影响,本来网站打开速度很快的,结果放上谷歌Google AdSense广告后,每次打开都要转圈圈,等谷歌Google AdSense广告全部显示出来后才算全部加载完成。这样给访客始终不太好的浏览体验。如果你也遇到这个情况的,不妨可以试试这个办法。

如何解决Google AdSense广告导致网站加载慢的代码优化方法

1、Google AdSense 代码精简

首先我们需要精简优化 Google AdSense 谷歌广告的JS代码,我们申请 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-idXXXXX这是你的广告ID”
data-ad-slot=“idXXXXX这是你的广告ID”
data-ad-format=“auto”
data-full-width-responsive=“true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

那么我在网站的多个页面或一个页面投放多个Google AdSense 广告,这样就会造成打开一个网页重复加载多个js,那么一个页面里面有很多个这样的代码。你就会发现,其中每次都要调用一个https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js 代码。其实这个js只要调用一次就行了的。

问:如果我的网页上有多个广告单元,我是否要为每个广告单元添加

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

答:不需要,adsbygoogle.js 可以一次性加载完成。

以上是官方的回答,那么我们可以直接把以下这段js文件直接写入主题 head 里,相当于每页都会加载这个JS,就不会重复请求加载这个JS了,节省了多次调用adsbygoogle.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>

2、谷歌广告js延迟加载

有没有方法先让网页先展示,然后才到谷歌Google AdSense广告显示,而不影响网站打开的速度呢,用懒加载的方式加载 ads­by­google.js 核心文件,建议将下列代码部署至 </body> 之前即可。

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

3、代码预加载:

下面是几个谷歌需要加载的网址,通过预加载来提速。,

    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <link rel="dns-prefetch" href="//pagead2.googlesyndication.com" />
    <link rel="dns-prefetch" href="//partner.googleadservices.com" />
    <link rel="dns-prefetch" href="//tpc.googlesyndication.com" />
    <link rel="dns-prefetch" href="//www.googletagservices.com" />

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

以上3个方法都是组合使用的,如果不需要延迟加载就不需要使用“谷歌广告js延迟加载”只使用”AdSense代码精简”即可,我用的1和3。

另外延迟加载 Google Ad­Sense 在移动宽带有时候直接不会显示广告,个人建议只使用的精简JS代码,没有做延迟加载优化。

文章声明

1、文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系站长和小编,或者自行点击 投稿。
4、若文章中有侵权或不适当内容,请告知我们,本站会第一时间进行处理 免责申明。

admin
  • 我们不提供免费技术支持
  • 转载请务必保留本文链接:https://www.haizimeiti.com/581.html
评论  0  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: