让用户浏览网页速度更快的优化技巧

昨天Steve的 讲座涉及了一个我从没考虑的领域，在没法优化后台服务器的时候，如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里，我就根据他的建议，把我对这博客的更新的过程记录一下。如果想了解更多的信息，可以看他的主页，那里有不少他做的讲座的视频和讲稿，还可以看到他在斯坦福开的课的视频……再进一步就是去读他的两本书了《High Performance Web Sites: Essential Knowledge for Front-End Engineers》《Even Faster Web Sites: Performance Best Practices for Web Developers》。

优化的过程，实际上就是根据Yslow这个Firebug的插件的提示“升级”的过程（Yslow可用于不同大小的站点，我选择了“Small Site or Blog”这个选项）。为什么要优化？功利的讲，是让你的页面在搜索引擎里表现更好；但更重要的是，省下这1-2秒的时间，能让你的读者更加舒畅地浏览你的站点。

我做了一下的几步：

1. 把所有的CSS文件放在一起；并避免使用@import的方式倒入CSS文件，因为这种方法强制浏览器在import的时候只能运行一个线程，而一般情况是两个线程一起上的。
   对于我来说，我新建了一个styleall.css文件，把所有在”screen”情况下使用的CSS全部复制粘贴进去。使用Yslow中的“All CSS” 的工具，很容易就收集到了所有的CSS的信息——三个插件、Google和theme里用的。最终，从9个不同的CSS文件，我缩到了2个，一个给 ”screen”用，一个给”print”用。在修改了theme调用的CSS的方法后，我到每个插件的设置页面，禁止调用相应的CSS。如果插件不允许 修改的话，我就修改插件的源代码，搜索“.css”，然后删掉。
2. 把所用的javascript合到一起，然后尽可能的放在页面的末尾，因为js的下载强制性的是单线程，放在页面的尾部，给读者印象是页面已经完全下载好了，而实际上有些功能的js还在下载中。
   对于我，因为所有的js都不没有使用document.write，可以放心大胆的合并并放到页面的尾部。我使用Yslow中的“All JS Minified”工具，操作很快：所有插件使用的合并到一个min.js在插件的根目录；所有主题使用的合并在theme的根目录；我没有合并来自Google的javascript到前面的两个汇总文件中，因为根据我的理解，Google会根据浏览器的不同把不同的js推送出来。

    

   
   <script type='text/javascript' src='/files/allimg/090608/2054090.jpg blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用两个线程下载的优势，在空挡把大文件先下载下来。