Go to comments ↓ 2010年12月03日 - Home » Blog

YSlow 和 Page Speed 优化

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

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

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

晒测试成绩

成绩如图：

测试的项目为全部，也就是 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 按钮（国际惯例 😛 ），拖到你的工具栏：Gtmetrix Test any page easily

P.S.

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

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

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

更多关于 Bookmarklet, WordPress, 主题的文章

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

Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/ashun/shun.im/wp-includes/class-wp-comment-query.php on line 399