最近忙里偷闲不仅把dudo博客的Banner更换了一下，还对页面进行了简单优化，性能明显提升不少，主要借助了Yahoo! YSlow和Google 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和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%无瑕疵，那是不可能的。速度控要不得。
除非特别声明，dudo博客文章均为原创，转载请以链接形式注明本文链接
共有(72)条评论
志言 发表于 2011-4-20 at 10:17 #6楼无觅猜你也喜欢，这个我也有用。
我是指无觅上面那两个按钮，呵呵
[回复]
dudo 回复:
四月 20th, 2011 at 10:29
@志言, 奇怪啊，难道不是无觅插件升级后的结果？我就用了相关文章插件，其它什么都没有啊……从昨天才开始出现的，以前什么也没有，而且我也没做任何改动，很奇怪
[回复]
哒卜柳W 发表于 2011-4-20 at 11:48 #11楼
日光博客 发表于 2011-4-20 at 13:47 #13楼
空中楼阁 发表于 2011-4-20 at 18:53 #16楼这个两个工具还没用过，先试试。我现在为提高博客打开速度是尽量减少图片，用纯css，感觉还好。
另外，问下，如果一个页面里用了很多wordpress的调用函数，会不会增加请就次数啊？
[回复]
威骋自动化 发表于 2011-5-04 at 18:07 #34楼过来踩踩，分析很好！！
http://www.pm1234.com
威骋供应电容剪脚机,电脑剥线机,剥线机,自动剥线机,端子机,微电脑切带机,全自动电脑切带机,切带机,切管机,跳线机,震动盘,走刀式分板机,分板机,锡膏搅拌机,全自动点胶机,点胶机,自动点胶机,双液点胶机,深圳点胶机
[回复]
elec 发表于 2011-5-17 at 15:48 #39楼Page Speed和YSlow我也经常用，访问速度超过1秒的就会用它们来查下。firefox可以说是做优化必备的，因为很多有用的插件都是基于此平台来开发的
[回复]
李亚元 发表于 2011-7-14 at 15:19 #42楼
淘宝丰胸产品排行榜 发表于 2011-11-20 at 15:34 #49楼是两款最实用的网站性能分析工具，两者都系出名门，前者来自Yahoo！，后者来自Google，两家最大的搜索引擎自然对网站页面
[回复]
定制各种商务礼品 发表于 2011-12-21 at 22:18 #57楼一米精品工艺厂，专业定制各种商务礼品，如各种精美U盘，本厂网址：www.gok100.com，联系QQ：1064046868，欢迎广大顾客朋友前来批发零售。
[回复]
ewrwt 发表于 2012-2-08 at 22:24 #63楼东莞市导胜自动化设备有限公司http://www.138auto.com于2007年创建，是一家集科研、开发、制造、销售于一体的自动化高新设备企业，公司主要生产全自动尼龙扎带机,自动扎带机,电缆剥线机,同轴电缆剥线机,同轴线剥线机,同轴线剥皮机,电脑剥线机,剥线机,自动剥线机,端子机,电脑切带机,全自动电脑切带机,切管机,全自动点胶机，拥有多台先进的数控钻、铣、冲、及其它光机电一体化数控成套加工设备，旨在快速跟踪国际新设备，不断创新；用自动化设备改造传统产业，大力开发自动一体化的数控成套加工设备并成长为一家专业生产各种点胶设备，电脑切带机设备和剥线机设备的公司。公司从业人员具备了丰富的行业经验，立足于自主创新，并通过吸取国外先进设备，根据市场需求不断提升产品结构性能，形成了自已特色的产品和服务。 我公司经多年的经验设备积累，已成长为点胶机方案解决商，全自动尼龙扎带机,自动扎带机,剥线机，自动裁切机供应商等。
[回复]
dudo 回复:
四月 20th, 2011 at 00:09
@聊IT评论网, 是的，因为浏览器可以同时发起不同的HTTP请求各一个，相当于多线程下载。把图片和JS等用不同的域名（比如加www和不加www就相当于两个域名）可以提高下载速度，但是这会增加一次域名查询，所以两者之间要做一个取舍。对于博客来说，如果图片不是特别多、JS运算特别大的话，效果并不明显，甚至会起到相反效果。
[回复]