Go to comments ↓ Home » Blog

YSlow 和 Page Speed 优化

WordpressYSlow 和 Page Speed 是两款知名的网页性能分析工具,可以对你的页面载入效率进行打分,并给出改进性能的建议。

很多做主题的朋友都会参照这两项进行优化,并分享改进的经验。

那我也赶下潮流,稍微花了些时间,把 YSlow 和 Page Speed 的分数都提高到了 A 级,当然这只是首页的成绩。

晒测试成绩

成绩如图:

YSlow 和 Page Speed 优化

测试的项目为全部,也就是 YSlow 23项、Page Speed 28项。
Use a Content Delivery Network (CDN) 这一项基本是 0 分,嘛,小网站无视。
另外还有一些图片缩放、CSS 选择器部分导致扣分。

如何提高 YSlow 和 Page Speed 的分数

其实也不难,下面从几个常见的方面说说怎么提高等级。大多来自朋友们分享的经验。

减少页面文件大小

  • 优化图片:压缩体积,减少使用缩放的图片
  • 压缩 CSS 和 JS 文件

减少 HTTP 请求数,减少 DNS 查询

Http 请求数当然是越少越好,这方面的优化也很简单:

  • 合并 JS 、CSS 文件
  • 给背景图片做 CSS sprite
  • 不要外链太多其他域名的文件

Use cookie-free domains

Use cookie-free domains 这一项对分数影响很大,建议折腾。

当浏览器向服务器请求一张静态的图片前,会先发送同域名下的 cookie,服务器对于这些 cookie 不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无 cookie 的请求。

wp-config.php 加入
define('COOKIE_DOMAIN', '你的博客域名');

这样你的所有子域就 Cookie-free 了,然后用子域名来作图床是很好的选择。
对于不加 WWW ,而是直接用顶级域名的,那么上面设置之后,子域名还是会带 Cookies,只能用另外的域名做图床了。

Add Expires headers

Expires header,就是过期时间的header报文。这个文件过期时间,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和文章中调用的图片)其实在很长一段时间内我们都不会对它们有什么改变,这类文件可以设置非常长的缓存时间,这样浏览器以后就不需要再从服务器下载这些文件而直接从缓存中读取,从而大大加速网站的载入速度。

这个我们只要在 .htaccess 文件添加几行代码即可。
# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

Configure entity tags (ETags)

.htaccess 中添加:
FileETag none

其他方面的优化

  • 尽量不使用内嵌脚本、样式,应从外部加载
  • 把 CSS 文件放在源代码的开头,把 JS 放在页面底部加载
  • 优化 CSS 选择器(网页分析其实部分目的也是为了提高这方面的技巧)。
  • 开启 Gzip ,这方面插件和代码的实现方法都有很多,有的主机控制面板还可以直接设置。
  • 使用缓存插件(Hyper Cache、WP Super Cache 等)、数据库缓存插件(WordPress Object Cache、DB Cache Reloaded 等)

参考资料

以前把相应的链接放在了文章每段中,都有同学反映说我没给出方法。。。
囧,难道是因为链接样式不显眼么。这次试试单独放一段。

感谢这几位博友提供的经验。

Gtmetrix:在线测试 YSlow 和 Page Speed

YSlow 和 Page Speed 都是基于 Firebug 的插件,使用 Firefox 的朋友就方便了,直接装扩展即可。

A.shun 这里用来测试的是在线网页性能分析工具 Gtmetrix,同时进行 YSlow 和 Page Speed 的测试,也会详细列出各个项目的成绩,给出改善的建议。

官方提供了 Bookmarklet 方便调用,拖到你的书签栏或个人栏:Gtmetrix Test any page easily
顺便提供 Opera 按钮(国际惯例 😛 ),拖到你的工具栏:opera按钮Gtmetrix Test any page easily

P.S.

1. 其实要把分数再提高些也完全可以做到,只是没必要。
分数这些只是个参考,过分追求就不美了。而且有些优化会给我们平时修改主题带来麻烦。

2. 本文谈的问题主要是网页的性能,这不等于访问速度。
访问速度在极大的程度上是取决于主机的带宽和性能,以及访问者的网络环境。

» 转载请以超链接形式注明来源:A.shun Blog » 《YSlow 和 Page Speed 优化》
» 本文链接地址:http://shun.im/21431

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. @@

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #1
    @
  2. 杀!20:26
    测试提交再修改,时间到底算哪个?HOHOHOHO


    等!20:28
    再等再等~

    Google Chrome 9.0.576.0 Google Chrome 9.0.576.0 Windows 7 Windows 7
    #2
    @
  3. 我是幸福的沙发。 😳

    Opera 10.63 Opera 10.63 Windows 7 Windows 7
    #3
    @
  4. 这些我也做过我也做过~哦也

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #4
    @
  5. 还没功夫做优化,有时间确实要搞一下了。

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #5
    @
  6. 果然是国际惯例啊,呵呵,几乎每一篇都有一个opera的工具栏按钮 😀

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #6
    @
  7. 沙发难坐啊 ❗

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #7
    @
  8. 我没有www……只能杯具了……

    Google Chrome 7.0.517.44 Google Chrome 7.0.517.44 Windows 7 Windows 7
    #8
    @
    • @阿修 应该有其他办法的。有些差插件可以实现吧。
      不过分数什么的,无所谓。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  9. cookie-free原来是这样搞,哈哈,一直不鸟它

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #9
    @
  10. 顺你个折腾帝……

    Opera 10.63 Opera 10.63 Windows 7 Windows 7
    #10
    @
  11. 我的,好大一对 C,囧。不过看了看也没多少改进的余地了,幸好没有分数癖。

    Google Chrome 6.0.496.0 Google Chrome 6.0.496.0 Windows 7 Windows 7
    #11
    @
  12. O卡不卡 没尝试过.

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #12
    @
  13. 在腾讯微博中点击链接,打开显示的居然是手机版样式。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #13
    @
  14. 折腾帝啊

    Opera 10.70 Opera 10.70 Windows 7 Windows 7
    #14
    @
  15. 测试测试

    Camino 1.5.1 Camino 1.5.1 Mac OS X Mac OS X
    #15
    @
    • @希锐亚 原来你还用 mac 的 👿

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun
      我在测试修改user agent 😀
      以前有网上有很多图片有这个功能,现在找不到,只能到你这里来了。

      Firefox 3.6.12 Firefox 3.6.12 Windows Server 2003 Windows Server 2003
    • @希锐亚 我用的是 WP-UserAgent 插件,准确度和选项都不错
      另外还有一个 Comment Info Detector,有显示国旗的功能。
      嘛,wp 下的这些选择都很多。

      只是测试自己浏览器 UA 的话,用简单的 js 即可。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  16. 锲而不舍地追求精致。

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #16
    @
  17. 我上80分就满足了。。 😆

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #17
    @
  18. YSlow: 91
    Page Speed: 93
    小博客 这些都是浮云~ 😛

    Namoroka 3.6.12 Namoroka 3.6.12 Windows XP Windows XP
    #18
    @
  19. super cache多了CDN选项,可以搞cookie free

    Firefox 3.6.12 Firefox 3.6.12 Ubuntu 10.10 x64 Ubuntu 10.10 x64
    #19
    @
  20. 我现在好像只有主页是A了,single就只有B了= =(淡定

    Opera 11.00 Opera 11.00 Windows 7 Windows 7
    #20
    @
  21. 呵呵。很强大,找时间我也弄弄~

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #21
    @
  22. 学习了

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #22
    @
  23. 如果再这样一来,主题肯定又被改来混乱无章了。。

    Google Chrome 7.0.517.44 Google Chrome 7.0.517.44 Windows 7 Windows 7
    #23
    @
  24. 这个前来学习了

    Firefox 4.0b7 Firefox 4.0b7 Windows 7 Windows 7
    #24
    @
  25. 现在的主题是图片搭起来的。。。无视Yslow无视ps。。。正在修改的那个已经弄到双a了 😀
    等有空折腾了,再来请教请教你 😆

    Google Chrome 8.0.552.200 Google Chrome 8.0.552.200 Windows 7 Windows 7
    #25
    @
    • @Weitian Zhao 图片多华丽嘛
      其实图片质量恰当的话对分数影响不大的。
      主要还是 Add Expires headers 和 Use cookie-free domains 两项

      请教不敢当,相互学习~

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  26. 先学习一下,暂时还没用到。

    Google Chrome 8.0.552.215 Google Chrome 8.0.552.215 Windows XP Windows XP
    #26
    @
  27. 测试 手机评论

    Opera Mobile 10.1 Opera Mobile 10.1 Android Android
    #27
    @
  28. 82~~主要是没有启用CDN

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #28
    @
  29. 看来我的也很慢啊

    Firefox 3.6.12 Firefox 3.6.12 Windows 7 Windows 7
    #29
    @
  30. 我是两个插件都装了,优化优化再优化,哈哈

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #30
    @
  31. 刚进来我以为我看到乱码了、、点击文章才到了正常页面、、嘻嘻 😛 ❓ 😈

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #31
    @
  32. 现在不敢安装插件了,我已经装了16个了,人家说太多了不好、吓吓 ➡

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #32
    @
  33. 先把Use cookie-free domains弄起来。
    好像我一次都没有做过这个和w3c验证,回头试一下,希望不要太恐怖鸟。 😳

    Google Chrome 9.0.595.0 Google Chrome 9.0.595.0 Windows XP Windows XP
    #33
    @
    • @小邪 o(* ̄▽ ̄*)ゞ,干脆麻烦你帮我验证一下,打击一下我可怜滴小心灵好了。

      Google Chrome 9.0.595.0 Google Chrome 9.0.595.0 Windows XP Windows XP
    • @小邪 那我就不客气的打击了~ 😎
      你那个 Yslow 不错了,page speed 是稍差。

      w3c 验证也没过。。。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 嘿嘿嘿,yslow倒是不错啦,就是pagespeed很蛋疼 ~
      很多图片优化之后反而很糊了 ~
      所以下不了手压缩图片 ╮(╯▽╰)╭ ~
      【- _ -】,这个,w3c倒是在意料之中,因为这是我这辈子第一次做 【- -】,w3c验证 【- -||】 ~
      突然感觉到了杯具 👿 👿 ~

      Google Chrome 9.0.595.0 Google Chrome 9.0.595.0 Windows XP Windows XP
    • @小邪 w3c 那个很好解决,错误都标得很详细,css的话就是太多私有hack了,-moz、-webkit 什么的用js吧。

      图片我也没有压缩,分数影响不是很大,但改起来麻烦,没必要

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  34. 难怪你博客打开速度这么快。

    Maxthon Maxthon Windows XP Windows XP
    #34
    @
  35. 哈哈、、我再看看,,习惯就不会觉得了 😛 😀

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #35
    @
  36. 先学习了,空了来折腾~

    Google Chrome 8.0.552.215 Google Chrome 8.0.552.215 Windows 7 Windows 7
    #36
    @
  37. 最近事多,暂不折腾

    Opera 10.63 Opera 10.63 Windows 7 Windows 7
    #37
    @
  38. 关键还是看主机性能。。

    Google Chrome 8.0.554.0 Google Chrome 8.0.554.0 Windows XP Windows XP
    #38
    @
  39. 如果我的站去测试一定惨不忍睹…博客常常当成实验室来改~~~

    Google Chrome 8.0.552.215 Google Chrome 8.0.552.215 Windows 7 Windows 7
    #39
    @
  40. YSlow Grade:
    (91%)
    Page Speed Grade:
    (96%)

    我尽力了(除了css- -!),虽然还是有很多地方偷懒的..嘿嘿..
    大概有那么多就行.. 😳

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #40
    @
  41. 怪不得,我总感觉网页很快呢

    Opera 10.70 Opera 10.70 Windows 7 Windows 7
    #41
    @
  42. 感谢ashun的文章,昨天对底子比较好的古博优化了一下:
    YSlow Grade:
    (96%)
    APage Speed Grade:
    (95%)

    Firefox 3.6.13 Firefox 3.6.13 Windows 7 Windows 7
    #42
    @
    • @天毅 原来的还有这么个博客。

      恩,你的主题都很简洁,分数容易提高。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  43. 我大概看了一下,你这里访客极少用ie的啊,基本都是chrome+firefox+opera,chrome好强大……

    Firefox 3.6.13 Firefox 3.6.13 Windows 7 Windows 7
    #43
    @
  44. 学习了。谢谢分享! :roll:

    你的wordpress主题挺不错的说。

    Google Chrome 8.0.552.224 Google Chrome 8.0.552.224 Windows XP Windows XP
    #44
    @
  45. 感谢分享,现在去试试这玩意~

    Firefox 3.6.13 Firefox 3.6.13 Windows 7 Windows 7
    #45
    @
  46. 这两天在折腾WP主题,A.Shun兄的博客给了我不少帮助啊!谢谢! 😀

    Google Chrome 9.0.597.0 Google Chrome 9.0.597.0 Windows 7 Windows 7
    #46
    @
  47. Terry Chen

    折腾了一下,前一个95,后一个87,快过年了就不折腾了!新年快乐!

    Google Chrome 9.0.597.0 Google Chrome 9.0.597.0 Windows 7 Windows 7
    #47
    @
  48. 还是拿古博开刀
    YSlow Grade:(97%)
    Page Speed Grade:(98%)

    折腾快到头了,内页没有太折腾,毕竟wp插件加载的js是个麻烦事

    Google Chrome 13.0.764.0 Google Chrome 13.0.764.0 Windows 7 Windows 7
    #48
    @
  49. YSlow Grade:(99%)
    Page Speed Grade:(97%)
    不过ashun,你知道最悲剧的地方在哪儿么,刚优化完就发现主题有升级,如果升级,意味着又得重头开始,一咬牙,果断跳过……

    Google Chrome 13.0.764.0 Google Chrome 13.0.764.0 Windows 7 Windows 7
    #49
    @
  50. 梦语飞歌

    我用的是img.mengfei.me子域名存图
    但是掉用file_put_contents
    函数的时候报错额。。。好像是权限问题,这个应该怎么修改额?

    Google Chrome 13.0.782.41 Google Chrome 13.0.782.41 Windows 7 x64 Edition Windows 7 x64 Edition
    #50
    @
  51. 折腾好了,继续折腾去

    Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows XP Windows XP
    #51
    @
  52. 一分钱也怕失去的人,必然最后一分钱也没有。

    Internet Explorer 11.0 Internet Explorer 11.0 Windows 7 Windows 7
    #52
    @
Leave a Reply to 掌柜的马甲

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

点击这里取消回复。