七夏 发表于 2024-6-29 18:32:38

优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度


因为谷歌在国内尴尬的局面,在网页加载js的时候可能会比较拖拉。

解决办法:
首先我们将谷歌 Google Adsense 获取到的单元广告代码(非自动广告),复制一下,代码如下:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID
   crossorigin="anonymous"></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>

代码获取到了,我们可以看见代码其实可以分成两段,其一是js代码,其次是代码,实际Google代码现在的思路很简单,关于js优化有两种方案,一种是设置setTimeout()函数,setTimeout() 方法用于在指定的毫秒数后调用函数,所以我们可以优化下就js代码:
<script>
window.onload = function() {
    setTimeout(function() {
      let script = document.createElement("script");
      script.setAttribute("async", "");
      script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID";
      document.body.appendChild(script);
    }, 2000);
};
</script>
代码含义就是广告时间延迟异步加载,这样可以加快加载速度!延迟时间(2000)可以自定义!
另外一种就是通过 window.addEventListener 来实现谷歌广告懒加载,可直接复制使用,放在网站 head ,修改实例如下:(推荐使用)
<script type="text/javascript">
    function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.setAttribute("async", "");
      element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID";
      element.setAttribute("crossorigin", "anonymous");
      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>
这样符合Google官方不能不能改变代码的要求,建议把js放在我们页面的head之内,即使多个页面都会统一调用,然后将<ins>和<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>
这样一来加载速度的确会有提升,而且我还发现一个问题,就是优化之后页面js错误由原来的10个减少成3个,这可真是意外的收获啊,其实网上的教程还是很多的,大同小异,基本都是通过异步加载实现的,好了,有问题留言反馈吧

七夏 发表于 2024-6-29 18:33:34

滴~学生卡,打卡成功!楼主辛苦了,祝楼主:开心每一天🥰,打卡时间:2024年06月29日 18:33:34

七夏 发表于 2024-6-29 18:33:42

当丁达尔效应出现时,光便有了形状。

SanS三石 发表于 2024-7-1 02:57:57

我无知又愚蠢,世界残酷又疯狂。
页: [1]
查看完整版本: 优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度