提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!

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

因为目前浏览器总是阻塞式(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的层,这样基本就完美了,下面分享下我的做法。 (注:发现原来是自己脚本写错了实际这个方法也是可以的)

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();}
<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 (注:由于特殊原因,这里的链接我就不放了,大家可以到 作者那篇文章 上去找下。)

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