最近发现网站的加载速度开始变慢,浏览器一直显示加载谷歌广告的数据,在网上查找了一下相关资料,发现元凶是谷歌JS代码,导致打开博客,最开始跳出来的不是博文的内容,而是毫不相关的广告,占用了太多的服务器资源。
解决办法也非常简答:对谷歌JS使用懒加载
即https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js 这个核心 js文件
这样访客在访问页面时,广告先不加载,直到划到页面最底下,广告才开始加载。
修改实例如下:(推荐使用)
通过 window.addEventListener 来实现谷歌广告懒加载,可直接复制使用,放在网站 head 里
- <script>
- 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>
这样也符合Google官方不能改变代码的要求
然后将<ins>和<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>