避免谷歌广告影响页面加载速度

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

也许大家喜欢往自己的站点上放点广告来捞取外快,但是当确实这么做时却发现网页的加载速度变慢了,为什么呢?

因为目前浏览器总是阻塞式(blocking)的读取网页引用的外部JavaScript,所以雅虎网页优化14条准则中也提到把外部引用的脚本放在页面的底部,差不多是</body>之前。这样网页基本上能最快渲染完毕,然后再加载这些外部脚本。

好了,了解这么多,大家肯定想这样广告只能显示到页面底部了,我想自定义广告的位置该怎么办?Aaron Peters给出了个办法,大家可以参考他博客上的这篇文章《Non-blocking Google Adsense ads: improve page speed》,也就是说我们可以在要放广告的地方放置一个div层,然后把页面底部的广告脚本代码appendChild加载到这个层即可。

不过我不太明白的是为什么Aaron Peters要把页面底部的广告层设置为display:block,貌似这样加载页面的时候,底部会先出现广告,然后才加载至指定位置的层,起初我是这样想的,首先把底部位置的广告层设置为display:none,然后加载至指定位置时再display:block,想法很好,但是实际操作的时候,广告死活显示不出来,经过摸索,终于找到了解决方案,也就是说,在底部的广告代码层的display:block,但是外面再套个display:none的层,这样基本就完美了,下面分享下我的做法。(注:发现原来是自己脚本写错了实际这个方法也是可以的)

1
2
3
4
5
6
7
8
9
10
11
function speed_ads() {
	var ad = document.getElementById('adsense'),
		loader = document.getElementById('adsense-loader');
	if (ad && loader) {
		ad.appendChild(loader);
		loader.style.display='block';
		ad.style.display='block';
		ad.style.height='60px';
	}
}
window.onload=function() {speed_ads();}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
 <head>
 <!--上述脚本位置-->
 </head>
 <body>
   <!--指定的广告显示位置-->
   <div id="adsense"></div>
   <!--其他内容位置-->
   <p></p>
   <p></p>
   <!--广告代码位置-->
   <div style="display:none">
     <div id="adsense-loader" style="display:block">
       <script type="text/javascript">
       // 谷歌广告代码
       </script>
     </div>
   </div>
 </body>
</html>

有网友给Aaron Peters指出了个问题,原文如下。

Important: Will Alexander posted a comment about the failure of this trick: it may (and often will) result in double impressions for ads served to visitors with Gecko (Firefox) and WebKit (Chrome) browsers. Do Not Use This Trick!!!

大概意思是在Gecko核心 (Firefox) 和 WebKit核心 (Chrome)的浏览器下,广告的展示会变为两次?我试了下,暂时没有发现异常,如果有朋友发现问题的话记得告诉我哦:-)

2011年8月26日更新

看到Aaron Peters的这篇文章又有了更新,谷歌广告已经支持非阻塞(Non-blocking)方式加载广告了:

Adsense releases non-blocking Adsense!
Yes, it happened, finally: Google has released a new version of the Adsense show_ads.js file that loads in a non-blocking way. Per today, March 18 2011, Google serves it to Chrome, Firefox and IE8 browsers and support for more browsers is coming. As a bonus: publishers do not have to change their code! Read the Google Code blog post about the new Adsense code(注:由于特殊原因,这里的链接我就不放了,大家可以到作者那篇文章上去找下。)

我试了一下,确实不再卡住页面了,看来谷歌的技术还是比较强大的!

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注