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 等）