Adsense广告加载慢如何优化?

  • 发表于
  • SEO
  • 98 阅读

加入Adsense广告后,站点整体加载都变慢了,数据显示的慢,图片显示的更慢甚至加载失败,如何解决?今天体验盒子教你两个方法彻底解决Adsense广告加载慢的问题。

优化Adsense广告代码减少请求

先看一个Adsense生成的默认代码

我们来分解一下,首先通过async异步请求加载adsbygoogle.js核心文件,待加载完成后再push到ins内,显示广告内容。

如何优化这段代码?通过我们的做法是直接复制生成的这段代码,放在相应位置就结束了。但如果我们一个页面有多个广告位,那就会出现多次引用请求adsbygoogle.js文件,这样就会造成网络延迟。那么如果一个页面多个广告是否需要多次引用呢?

Q:如果我的网页上有多个广告单元,我是否要为每个广告单元添加 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

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

上面是Google官方给出的QA,不需要多次引用加载

好的,那么优化方法确定了,在head内一次加载adsbygoogle.js就行(体验盒子使用的是head一次加载),不需要多次加载。也可以用JS监听加载

懒加载优化Adsense广告代码

懒加载一般我们是应用在图片场景,意思是只有在某些特定内容出现在可视区域中时,才开始加载的一种技术,如下所示:

Adsense广告加载慢如何优化?

如何用在Adsense广告代码上呢?一个WG友人针对此问题写了一个小插件,分为JS版和JQuery版本,在这里。下载对应的版本,进行初始化JS:

html,需要修改,提取出你的ins代码相应部分

css,这里建议你根据自己的布局进行调整

完成后的效果是这样的

Adsense广告加载慢如何优化?