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

七夏

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

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

解决办法：
首先我们将谷歌 Google Adsense 获取到的单元广告代码（非自动广告），复制一下，代码如下：

1. <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID
   
2.      crossorigin="anonymous"></script>
   
3. <!-- 荷包蛋部落全局底部 -->
   
4. <ins class="adsbygoogle"
   
5.      style="display:block"
   
6.      data-ad-client="ca-pub-发布商数字ID"
   
7.      data-ad-slot="发布商数字ID"
   
8.      data-ad-format="auto"
   
9.      data-full-width-responsive="true"></ins>
   
10. <script>
    
11.      (adsbygoogle = window.adsbygoogle || []).push({});
    
12. </script>
    

复制代码

代码获取到了，我们可以看见代码其实可以分成两段，其一是js代码，其次是代码，实际Google代码现在的思路很简单，关于js优化有两种方案，一种是设置setTimeout()函数，setTimeout() 方法用于在指定的毫秒数后调用函数，所以我们可以优化下就js代码：

1. <script>
   
2. window.onload = function() {
   
3.     setTimeout(function() {
   
4.         let script = document.createElement("script");
   
5.         script.setAttribute("async", "");
   
6.         script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID";
   
7.         document.body.appendChild(script);
   
8.     }, 2000);
   
9. };
   
10. </script>

复制代码

代码含义就是广告时间延迟异步加载，这样可以加快加载速度！延迟时间（2000）可以自定义！
另外一种就是通过 window.addEventListener 来实现谷歌广告懒加载，可直接复制使用，放在网站 head ，修改实例如下：（推荐使用）

1. <script type="text/javascript">
   
2.     function downloadJSAtOnload() {
   
3.         var element = document.createElement("script");
   
4.         element.setAttribute("async", "");
   
5.         element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-发布商数字ID";
   
6.         element.setAttribute("crossorigin", "anonymous");
   
7.         document.body.appendChild(element);
   
8.     }
   
9.     if (window.addEventListener)
   
10.         window.addEventListener("load", downloadJSAtOnload, false);
    
11.     else if (window.attachEvent)
    
12.         window.attachEvent("onload", downloadJSAtOnload);
    
13.     else window.onload = downloadJSAtOnload;
    
14. </script>

复制代码

这样符合Google官方不能不能改变代码的要求，建议把js放在我们页面的head之内，即使多个页面都会统一调用，然后将<ins>和<script>代码放在网页广告接口位置，例如：

1. <ins class="adsbygoogle"
   
2.      style="display:block"
   
3.      data-ad-client="ca-pub-发布商数字ID"
   
4.      data-ad-slot="发布商数字ID"
   
5.      data-ad-format="auto"
   
6.      data-full-width-responsive="true"></ins>
   
7. <script>
   
8.      (adsbygoogle = window.adsbygoogle || []).push({});
   
9. </script>

复制代码

这样一来加载速度的确会有提升，而且我还发现一个问题，就是优化之后页面js错误由原来的10个减少成3个，这可真是意外的收获啊，其实网上的教程还是很多的，大同小异，基本都是通过异步加载实现的，好了，有问题留言反馈吧

七夏

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

七夏

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

SanS三石

我无知又愚蠢，世界残酷又疯狂。