当前位置: 首页 > 设计 > 正文
avatar

做一些联盟广告时,由于联盟广告的加载慢,整体页面的显示速度也会变慢,如果按照下面的方法加载广告就可以有效地解决这个问题。

今天给博客做了点修改,然后发现加载网页真的快了不少,特别是在宿舍网速很不给力的情况下。由于放了百度广告,打开文章页加载到标题就会停顿一下加载广告,网速卡的话要等好一会儿,虽说广告没什么点击率,但是总比没有强,是吧。

那么如何将广告对网页加载的影响降到最小是我们所要考虑的,王晔童鞋的这篇文章《避免谷歌广告影响页面加载速度》就很好的解决了这个问题,此人隐藏甚深,平时一般不抛头露面,好东西都藏着,大家一般很难注意到,所以我还是要推荐一下下。

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

他的方法是这样的:

<script type="text/javascript">
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();}
</script>
<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">
       // 谷歌or百度广告代码
       </script>
     </div>
   </div>
 </body>
</html>

王晔同学只给了网页上面只有一个广告时候的解决方法,如果有几个怎么办?

我们可以用下面的脚本替换原来的脚本,当然要注意一一对应。

<script type="text/javascript">
function speed_ads(loader, ad) {
var ad = document.getElementById(ad),
loader = document.getElementById(loader);
if (ad && loader) {
ad.appendChild(loader);
loader.style.display='block';
ad.style.display='block';
}
}
window.onload=function() {
speed_ads('adsense-loader0', 'adsense0');
speed_ads('adsense-loader1', 'adsense1');
speed_ads('adsense-loader2', 'adsense2');
}
</script>

这样的话,页面加载就快了很多了。

本文固定链接: http://www.weisay.com/blog/load-ads-donot-affect-page-speed.html | 威言威语

加载多个广告不影响网页打开速度:目前有44 条评论

  1. avatar
    22楼
    阚阚_Jun Google Chrome Windows

    太晚了.明天研究一下.

    2011-10-15 23:06 [回复]
  2. avatar
    21楼
    bestchao Google Chrome Windows

    经过测试发现在google chrome浏览器下此方法首页打开网页无法显示出来google adsense,只有在本页刷新后才会正常显示出来,不知有没有发现这个问题。

    2011-08-23 17:00 [回复]
    • avatar
      William Google Chrome Windows

      木有啊,不管是百度的还是google的都能正常显示,可能是你自己没有添加正确。

      2011-08-23 17:05 [回复]
      • avatar
        bestchao Google Chrome Windows

        没错的呀,www.bestchao.com 我的网站你帮忙检查下,我替换成百度的广告就可以显示正常。问题出在哪里了?

        2011-08-23 20:55 [回复]
  3. avatar
    20楼
    Tueur Google Chrome Windows

    博主你贴code是用什么插件?

    2011-04-30 08:46 [回复]
  4. avatar
    19楼
    海天 Google Chrome Windows

    这个弹出方式貌似比我那个好
    我那个 有的浏览器不兼容
    晚上回去试试这个

    2011-04-08 10:20 [回复]
    • avatar
      William Maxthon Windows

      我这个全兼容的,我都测试过了

      2011-04-08 17:06 [回复]
  5. avatar
    18楼
    工作室 搜狗浏览器 Windows

    这种方法其实谷歌的AdSense官方博客很早就推荐过了的

    2011-03-17 09:48 [回复]
    • avatar
      William Maxthon Windows

      是么。没有看过,不过这个效果还是很实用的

      2011-03-17 12:24 [回复]
  6. avatar
    17楼
    xuan律 Internet Explorer Windows

    我一博客图片多,也是个烦恼。

    2011-03-16 22:01 [回复]
    • avatar
      William Maxthon Windows

      是滴,所以上传图片先压缩一下,我的图片虽然外链,但是我都压缩过的,图片也很少失真

      2011-03-17 12:24 [回复]
  7. avatar
    16楼
    爱惜 Mozilla Windows

    对自己的博客暂时还没有加广告的想法,还是喜欢简洁。

    2011-03-12 18:21 [回复]
    • avatar
      William Mozilla Firefox Windows

      呵呵,你的博客确实比较简洁

      2011-03-13 15:06 [回复]
  8. avatar
    15楼
    reizhi Google Chrome Windows

    现在没放AD了,感觉赚不到钱

    2011-03-12 13:45 [回复]
    • avatar
      William Mozilla Firefox Windows

      是的,现在做联盟广告没有以前那么好了

      2011-03-13 14:47 [回复]
  9. avatar
    14楼
    小星 Mozilla Firefox Windows

    看懂了,确实是不错的方法!

    2011-03-11 16:00 [回复]
    • avatar
      William Maxthon Windows

      看懂了就好,哈哈

      2011-03-11 17:07 [回复]
  10. avatar
    13楼
    四十三度 Internet Explorer Windows

    在以前看到过介绍这方法的,挺好的。就是没用哈哈

    2011-03-10 22:44 [回复]
    • avatar
      William Maxthon Windows

      方法很多,用JS不一样,效果都是一样的

      2011-03-11 13:10 [回复]
  11. avatar
    12楼
    xmwusx Google Chrome Windows

    你那个回复吧我 网页搞瘫痪了哈哈~
    才发现那个自己搞的ubb没有转义……

    2011-03-10 19:29 [回复]
    • avatar
      William Maxthon Windows

      额~这么厉害,现在应该修复了吧

      2011-03-11 13:09 [回复]
  12. avatar
    11楼
    晨光博客 Internet Explorer Windows

    不错的方法,收藏了,另外我想问下博主的代码高亮是如何实现的

    2011-03-09 22:05 [回复]
    • avatar
      William Maxthon Windows

      我用的SyntaxHighlighter Evolved
      这个插件

      2011-03-11 13:09 [回复]
  13. avatar
    10楼
    song Maxthon Windows

    找了个行政司机的活儿,以后可能上网就少了,以后也很少有机会再研究技术的东西了,博客就用来记录工作了~~~~

    2011-03-09 20:57 [回复]
    • avatar
      William Maxthon Windows

      对啊,记录生活蛮好。晚上回去上?

      2011-03-11 12:07 [回复]
  14. avatar
    9楼
    Paran Internet Explorer Windows

    来看看 看看 哈哈

    2011-03-09 17:31 [回复]
  15. avatar
    8楼
    xmwusx.cn Google Chrome Windows

    昨天blog链接换了……原本aritcle.php?id=67 现在变成index.php?article=67结果百度一个人都没人现了半天,现在才明白是链接出问题 百度不到我网页……

    2011-03-09 07:49 [回复]
    • avatar
      William Maxthon Windows

      哈哈,看你有换回来了,那个主题还不健全

      2011-03-11 12:03 [回复]
  16. avatar
    7楼
    IM路人 Maxthon Windows

    我也放了很多广告,但懒得管加载延迟的问题~~~

    2011-03-08 20:39 [回复]
    • avatar
      William Maxthon Windows

      终究希望网页打开速度能快一些

      2011-03-11 12:04 [回复]
  17. avatar
    6楼
    xmwusx.cn Google Chrome Windows

    看得 不是很懂……js不是熟悉
    你动作很快啊 我刚更新了程序就来了
    回复功能出问题 停在调试 你就恢复了 哈哈 不过现在修好了

    2011-03-08 13:51 [回复]
    • avatar
      William Maxthon Windows

      呵呵,我说怎么一直发布不了的呢~主题还有些问题来着的

      2011-03-08 14:02 [回复]
      • avatar
        xmwusx.cn Internet Explorer Windows

        是!ie7的二级有问题~
        那个引用回复我 估计要弄很久

        2011-03-08 15:10 [回复]
      • avatar
        Prouz Google Chrome Windows

        发我一份皮肤呗,我研究研究~~哈哈

        2011-03-08 23:17 [回复]
  18. avatar
    5楼
    龙城瓶子 Google Chrome Windows

    说实话,没看懂
    看了你的源代码才明白。。。

    2011-03-08 12:56 [回复]
    • avatar
      William Maxthon Windows

      额,我觉得写的很明白来着的~囧

      2011-03-08 13:52 [回复]
  19. avatar
    4楼
    竹海听涛 Internet Explorer Windows

    给力 给力

    2011-03-08 11:32 [回复]
  20. avatar
    地板
    Paran Internet Explorer Windows

    这个 给力 哈哈

    2011-03-08 10:48 [回复]
  21. avatar
    板凳
    qiuyili Internet Explorer Windows

    先收藏了,值得学习。

    2011-03-08 09:36 [回复]
    • avatar
      William Maxthon Windows

      有广告的绝对值得用的

      2011-03-08 13:52 [回复]
  22. avatar
    沙发
    Prouz Google Chrome Windows

    抢个沙发再看~~哈哈

    2011-03-07 21:36 [回复]
    • avatar
      Prouz Google Chrome Windows

      擦,我只看到第二个广告的“百度推广”别的东西没有了……看来我网速不给力啊!

      2011-03-07 21:38 [回复]
      • avatar
        William Internet Explorer Windows

        我的网才是真的卡,所以必须得给广告懂点手术

        2011-03-07 23:26 [回复]
        • avatar
          Prouz Google Chrome Windows

          你自己又不点…………

          2011-03-08 12:13 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter