博客优化实践:利用YSlow和Page Speed提速

最近忙里偷闲不仅把dudo博客的Banner更换了一下,还对页面进行了简单优化,性能明显提升不少,主要借助了Yahoo! YSlowGoogle Page Speed两款工具。最大的改进就是使用了CSS Spirit技术,虽然不是复杂的技术但是对博客优化作用却十分明显。所有的优化原理都来自我以前翻译的文章Yahoo!网站性能最佳体验的34条黄金守则分为内容服务器JavaScript和CSS图片、Coockie与移动应用一系列文章,在这里我也推荐所有对博客网站优化感兴趣的朋友能够再读读,可能有些地方翻译的不准确,但是理解应该不成问题。

一、博客优化利器:YSlow和Page Speed

YSlow和Page Speed是两款最实用的网站性能分析工具,两者都系出名门,前者来自Yahoo!,后者来自Google,两家最大的搜索引擎自然对网站页面优化有更多的话语权。关于YSlow和Page Speed的详细使用方法请分别参看文章你的网站为什么会慢?——用YSlow为你的网站提速Google网站性能优化工具Page Speed试用报告。不过两款工具都只能在Firefox浏览器上运行,而且都必须要在安装了Firebug插件之后才能使用。Yslow 与Friebug搭配

通过运行YSlow和Page Speed可以获得相应的分析结果,并且两者都给出了相应的处理方法。仔细阅读,并根据优化建议逐条修改即可。当然也有很多可能是普通博客做不到的,比如CDN分发等,恐怕只有大型网站才能有这个实力做得到。一般来说,WordPress首页可以优化到YSlow为Grade A,Page Speed分数90分以上。

二、使用CSS Sprite提升页面性能

CSS Sprite是一项前端开发技术,旨在减少文件请示次数和文件大小,这同时实际上还带来另一个好处,那就是预加载。说得好懂一点就是把你博客里能用到的背景、小图标全部整合在一张图片里,通过CSS中的background-position显示背景中图片不同部位来实现背景的切换。

通过查看dudo博客的各个图标、banner等你可能看到所有的东西其实都在一张图片上,除了页面背景因为要重复显示无法实现外。那么这样做究竟有什么好处呢?

1、减少HTTP请求次数。每下载一个小图标浏览器都会向服务器发布一次HTTP请求,每次请求都会花费一定的时间,而CSS Sprite则只需要一次HTTP请求即可;

2、减少图片文件大小。dudo博客就是一个很好的例子,虽然Spirit Image比所有图片加起来的尺寸都长都宽,但是文件大小却要比他们的总和还要小。

3、预加载,节省时间。由于所有的图片都在一个文件里出现,当你请求任何一个页面时所有用到的图标会一次下载并缓存,当你再查看其他页面时,浏览器将不会再重复下载而直接显示,这将节省大量时间。

关于WordPress博客的CSS Spirit优化方法,稍后我会出一篇专门介绍教程,请关注。

三、减少不必要的外部引用

这个也是很重要的,也是很多博客存在的问题。比如你的网站计数器、Feed订阅统计、投放的广告等都会占用浏览器请求时间。前几天我抱怨FeedSky统计数经常抽风,决定放弃时也主要出于其对博客性能的拖累。针对这个问题我建议:只使用一个统计网站、Feed订阅尽量只使用文字链接。这两个都非常耗费时间,因此计数功能的JS是不能被缓存的(缓存后计数功能失效)也不会被压缩,而且运算量较大,任何一次页面显示都会被重复执行。

过多广告代码投放也会引起同类的问题。不过类似Google Adsense使用的是<iframe>标签在一定程度上会规避这个问题,但是会带来另外一个问题:违反Web标准

博客优化是一个技巧性很强的东西,不过有了YSlow和Page Speed之后我们省了很多麻烦,即使你不是很懂这方面的东西,只要按照标亮的提示进行优化就可以了。不过你要想做到100%无瑕疵,那是不可能的。速度控要不得。