WordPress中YSlow测试的A级攻略

Yslow是Yahoo按照对页面速度提高的一些准则,评测一个网站在速度体验上的优化程度的Firefox插件,并针对每一条给出从F~A的评分以及最终的总分。要测试自己网站在这个标准下的评分等级,你得先使用Firefox,然后安装上Firebug和YSlow插件。我昨天对www.saywp.com弄了一下,居然拿到了A级的分数(97分!),网页的打开速度也象是快了好多。所以也想在这里写下一些感受。

yslow1 300x272 WordPress中YSlow测试的A级攻略

运行YSlow后它会详细地给你指引并告知各项需要改进的地方,如上图的红字部分。基本上你对照着每一点检查就是了,总结几点原则就是下面几点:

减少Http请求

对于这个,其实就是要求你的网站是一个样式文件,一个Js文件,一个背景图片文件,还有减少外链图片之类的。

  1. 对于只做一个样式文件和一个Js文件,这一点并不难实验,不就是合并吗?在WordPress中,对于一些插件自己添加的东西,建议还是手动把它们合并,或者是条件出现
  2. 至于一个背景图片这个,可能就要花点时间了。因为一般情况下,除了纯CSS设计的网站,我们不可避免地在主题中使用一些小图标,而这些小图标每一次的出现都是一个Http请求,严重得很。虽然图标文件是很少,但造成多次的Http请求后果却不可不考虑。所以,象现在www.saywp.com上看到的所有图片,我都整合到一张图片中去了,然后就是利用CSS的定位设置显示。(关于这个操作,我会在后一篇文章详细地写下如何实验。)allbgs 212x300 WordPress中YSlow测试的A级攻略
  3. 还有是减少外链请求,比如最常见的FeedSky订阅数链接就给我取消了(那个东西经常链接超时,气人),换成本地的图片。不得不提的是,WordPress中评论部份的访客头像的请求问题。如果留言人数多了,一大堆的外引Http头像请求,基本上你的评分会被降低至少一个级别。还好Shawn同学提供了一个缓存 Gravatar 至本地服务器的办法,很好地解决了头像对网速还有评分的影响,建议大家也这样操作,效果明显。

基本上完成上面的几项更改,你会看到网站的Http请求变得很少!象是我的只有5次和压缩后的1次!5次中分别是:1次样式文件,1次整合的Js文件,1次首页,1次背景图片,还有一次是Google统计用的Js文件。Super!

yslow2 300x276 WordPress中YSlow测试的A级攻略

GZip压缩站内文件

估计这个操作对大家并不陌生,也已经有很多文章提及到了。

对网站中的一个样式文件和一个Js文件进行压缩的方法,可以参见水煮鱼的再谈 gzip这篇文章。

然后,我们还需要到GIDZipTest检测并确认网站有否开启GZip压缩功能。这个很重要,因为打从WordPress 2.5后它并不是默认开启GZip的!如果你的网站还没有把它开启,方法参见浅文的博客 » Blog Archive » wordpress 2.5 及以上版本中开启Gzip,文中提及了三种方法,总有一种可以为你实现。

为网站文件添加期限

评级中需要你对网站文件,如样式文件,Js文件还有图像文件添加期限。这样浏览器会根据期限自动更新,对于这个,操作方法就是打开.htaccess文件,添加如下项:

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType imgs/gif A2592000
ExpiresByType imgs/png A2592000
ExpiresByType imgs/jpg A2592000
ExpiresByType imgs/jpeg A2592000
ExpiresByType application/javascript A864000
ExpiresByType application/x-javascript A864000
ExpiresByType text/javascript A864000

这样在评级中这一项的要求轻松通过!

上面的几点虽然不是全部,但对于WordPress用户来说,这几点却是最重要的更改,所以我把它们写出来。如果你在上述的更改后还不满意,建议继续阅读对应Yslow的网站速度优化方法略谈这篇文章,定能OK icon wink WordPress中YSlow测试的A级攻略

分类:WordPress;标签:, , , ;收藏本文的永久链接

40 Responses to “WordPress中YSlow测试的A级攻略”

  1. ZH CEXO 回复此留言 2008/12/22 12:05 #comment-3819

    不是太懂,但好像很有用,以后也试试朝这个方向努力~

  2. Jason Ng 回复此留言 2008/12/22 13:25 #comment-3821

    gzip有时会让网站加载出错,在浏览器里变成压缩包下载。

  3. xiaorsz 回复此留言 2008/12/22 16:16 #comment-3828

    貌似有些主机直接就是gzip压缩输出的!!
    你的博客速度也优化到极致了,呵呵!

  4. Lorz 回复此留言 2008/12/22 17:19 #comment-3829

    有位同学写的,添加个文件就能做到压缩所有 CSS 、JS 文件。
    http://www.cbmland.com/post/522/optimized-wordpress-notes-1.html

  5. Jinwen 回复此留言 2008/12/22 12:10 #comment-3820

    @ZH CEXO: 其实说的就是一些对网站速度的优化原则,或者说是指引,并通过一个分数等级进行评估。

  6. 辐射鱼 回复此留言 2008/12/22 15:07 #comment-3824

    我使用的是 FireFox 3.1 B2,用不了这个插件,囧啦
    个人感觉 gzip 太耗服务器资源,使用虚拟主机的同学最好手动压缩

  7. Shawn 回复此留言 2008/12/22 15:22 #comment-3827

    Yslow 可能对优化大网站有些向导作用,但是小型网站的东西本身不多,所以优化起来不会有太大的效果感觉。尤其是需要依赖外部服务的时候,YSlow 就会降低分数,这个有点不好说。。。

  8. Alan 回复此留言 2008/12/22 18:01 #comment-3830

    我的太多图片,严重影响了评分

  9. Yacca 回复此留言 2008/12/22 18:01 #comment-3831

    @Lorz: 这个和gzip插件应该是一样的吧...^^

  10. 胡戈戈 回复此留言 2008/12/22 18:39 #comment-3832

    俺搞的一个纯CSS的皮也90多分

  11. winlon 回复此留言 2008/12/23 02:08 #comment-3834

    高手 我用WP Thread Comment 这个插件想实现 我回复对方的回复后 邮件同时对方 当我设置好了后 我回复 别人却收系统发出的邮件! 请问邮件提醒怎么才能实现呢?

  12. Jinwen 回复此留言 2008/12/22 20:45 #comment-3833

    @Shawn: 是的,一些外部的服务如feedsky和google friend connect的确会把分数降低,因为太多的请求动作了。
    @xiaorsz: 还是自己检测一下的好,呵呵。
    @Alan: 我的也是图片多,所以花了较多时间把图片整合到一张上去。
    @胡戈戈: 纯CSS的,没有图片链接的烦恼啊,省心好多。

  13. hufont 回复此留言 2008/12/23 05:40 #comment-3837

    曰~只有65分~

  14. hufont 回复此留言 2008/12/23 05:56 #comment-3838

    我再曰~~只有48分了。。。
    崩溃ing~

  15. winlon 回复此留言 2008/12/23 08:58 #comment-3840

    @Jinwen: 哦 这样啊! 那你回复我后 邮件通知我 你是用什么插件实现的!

  16. Jinwen 回复此留言 2008/12/23 02:12 #comment-3835

    @winlon: 这个问题啊,因为我没用过那个插件,所以人我也不懂回答。建议直接问插件作者啊。

  17. Jinwen 回复此留言 2008/12/23 07:37 #comment-3839

    @hufont: 你网站怎么会加载8个Javascript和5个CSS的啊,不可能的吧,恐怖啊。

  18. Jinwen 回复此留言 2008/12/23 09:08 #comment-3842

    @winlon: 你可以试试Mail To Commenter这个插件,很不错的。

  19. apollools 回复此留言 2008/12/23 10:38 #comment-3845

    @Jinwen: 刚刚研究了你现在这个主题的代码,太强悍!!!allbgs.png这个办法很棒,目前感觉这个主题向上面加什么都是多余的!谢谢您做出这么好的实例!!!

    ps,能发一份与现在附加了众多JQUERY功能的主题吗?下载的那份与目前还是不太一样,我的email您应该看得到!谢谢!佩服!

  20. 睡到自然醒blog 回复此留言 2008/12/23 11:49 #comment-3848

    头像可以缓存的吧,为啥我在空间里看到了cache文件夹...

  21. apollools 回复此留言 2008/12/23 12:01 #comment-3850

    @Jinwen: 时间(时区)没有改正过来!~

  22. Jinwen 回复此留言 2008/12/23 12:05 #comment-3851

    @apollools: 没有啊,那时间是我所有区域-巴黎的时间来的啊,呵。

  23. QQ个性签名 回复此留言 2008/12/24 17:17 #comment-3878

    主题真的超好哦。。

  24. WenYaYa 回复此留言 2008/12/26 09:36 #comment-3891

    RSS订阅但中淡出效果是怎么制作的呢?非常漂亮,希望能分享一下啊。

  25. shamas 回复此留言 2008/12/26 05:12 #comment-3887

    这个插件我以前也用过,不过倒没看给我评了多少分呵,这个对网站优化蛮实用的

  26. 猪小猪 回复此留言 2008/12/26 06:58 #comment-3890

    你是apache2.0吧?那请问apache1.33怎么设置呢?

  27. Jinwen 回复此留言 2008/12/26 14:34 #comment-3894

    @WenYaYa: 谢谢,我转头写一篇介绍的。

  28. Jinwen 回复此留言 2008/12/26 14:35 #comment-3895

    @猪小猪: 你问的是要设置什么的呢?

  29. SkyLanD 回复此留言 2008/12/27 10:35 #comment-3901

    酝酿用你这个主题,但又怕麻烦,改来改去的,呵呵。

    确实很漂亮!

  30. Jinwen 回复此留言 2008/12/27 12:57 #comment-3905

    @SkyLanD: 先谢谢哦。是啊,每次改主题都是件麻烦事来的。

  31. shamas 回复此留言 2008/12/29 05:53 #comment-3934

    要达到这样的级别是需要放弃很多东西的呵

  32. Jinwen 回复此留言 2008/12/29 11:43 #comment-3944

    @shamas: 是啊,我放弃了google connect friend,还有feedsky的订阅数显示呢。不过我自己喜欢简洁,暂也尚可,不要那两个东西。

  33. 喵小可 回复此留言 2008/12/31 06:22 #comment-3969

    呵呵,我不使用火狐浏览器。

  34. Charles 回复此留言 2008/12/31 09:43 #comment-3971

    很全面,很好。以前一直不知道那个E-Tag的怎么搞定,现在有个谱了。

  35. Humphrey 回复此留言 2009/01/04 07:43 #comment-4010

    很遗憾,我的是F!

  36. Humphrey 回复此留言 2009/01/04 12:04 #comment-4013

    用了你的主题马上蹿升到了C级别了!呵呵,很好!

  37. Summer 回复此留言 2009/05/18 10:48 #comment-7141

    又学习到了新东西,非常感谢:)

  38. Knightby 回复此留言 2009/08/09 16:09 #comment-9283

    CSS..
    好强大


The trackbacks and pingpacks: