天下熙熙,皆为利来
天下攘攘,皆为利去

如何优化Adsense 加载速度?:初级优化(一)

说明:近期我发现,我的博客装载了Google Adsense广告之后,加载速度明显买了不少,在网上查找了一下相关的关键词:『adsense js load slow』『谷歌广告加载慢』,就搜到了一个老外的抱怨关于装载有 Adsense 广告的页面的加载速度优化的问题。做站长的,我们都知道网页的加载速度快与否对读者来说很重要,大家都知道 Adsense 广告代码的加载速度一定程度上算是比较慢的,那我们今天就来看看,Google Adsense 加载速度该如何优化。

Adsense 广告是如何加载的呢?

咱们做网站的人呢,应该多少听过
异步or同步这两个词。
大家知道网页的加载涉及到以下几点:

  • 1.DNS 查询
  • 2.TCP 连接
  • 3.HTTP 请求即响应
  • 4.服务器响应
  • 5.客户端渲染

我们只能在客户端渲染这一部分来优化类似于像GoogleAdsense这样的第三方元素。这一部分(渲染树构建、布局及绘制),又可以分为下面五个步骤:

  • 1.处理 HTML 标记并构建 DOM 树。
  • 2.处理 CSS 标记并构建 CSSOM 树。
  • 3.将 DOM 与 CSSOM 合并成一个渲染树。
  • 4.根据渲染树来布局,以计算每个节点的几何信息。
  • 5.将各个节点绘制到屏幕上。

用户请求最初获得的是HTML,CSS,JS等静态资源,对于CSS和JS都属于阻塞类资源,现代浏览器大都是并行加载资源,例如,当 HTML 解析器(HTML Parser)被脚本阻塞时,解析器虽然会停止构建 DOM,但仍会识别该脚本后面的资源,并进行预加载。




大家可能经常会看到一些优化类型的文章中,建议将JS代码放在网页底部也就是这个原因——在使用同步JS的情况下,网页加载到JS部分会停止构建后面的 DOM 元素,直到JS部分逻辑执行完毕,才继续构建下面的DOM元素。

Adsense 加载速度初级优化:

通过以上我们知道了同步JS会影响网页的渲染后,我们可以使用异步的广告JS代码,我们在广告代码的获取处可以见发现,Google Adsense 早已考虑到这个问题了,见下图:

 

我们可以通过切换同步or异步的加载方式,来简单的提升Adsense 广告的加载速度。

通过代码比对,可以看到异步的代码加上了 async 参数,并且结尾是通过一个 push 方法显示代码,具体的实现方式不在本文研究范围内,大家只要将代码的加载方式设置为异步即可,

注:最新的自适应广告代码默认就是异步

异步广告代码不会对网页显示有影响,但他还是会影响你的网页的整体加载时间,但是这个加载时间并不影响别人阅读你网站本身内容。所以如果你是 Adsense 初级玩家觉得装载了 Adsense 广告的网页加载缓慢,那么就按照上面处理即可。

 




赞(1) 打赏一下
未经允许不得转载:iX-清风九里 » 如何优化Adsense 加载速度?:初级优化(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏