Bluehost开启Gzip的正确方法及实现CSS和JS的合并压缩

搬家到Bluehost之后，我就开始慢慢地进行网站性能优化（WPO）。玩过WordPress的人应该都知道Gzip这个术语吧，有些主机的cPanel后台直接提供了此功能，非常方便。但问题是，在Bluehost的cPanel后台你是找不到这个功能的。

通过Google得知，Bluehost以前是提供这个功能的，但后来他们自己从cPanel上删除了这个选项。我又以“Bluehost”和“Gzip”为关键进行搜索，发现了网上都是这么介绍的：Bluehost对页面传输的优化比较怪，html文件默认是进行Gzip压缩的，但对CSS和JS文件不进行压缩……我不知道这个说法从何而来，反正我觉得很奇怪，因为通过各种在线Gzip检测工具（如http://www.whatsmyip.org/http-compression-test/和http://tool.chinaz.com/Gzips/）得知，我的网站默认是没有启用Gzip的。

首先要确定Bluehost到底支不支持Gzip。根据《如何知道服务器是否支持Gzip压缩》这篇文章的介绍，确认BH支持此功能。

其次得探索如何手动开启Gzip功能。续Google之，得知通过配置php.ini文件，也可以手动开启此功能。方法很简单，直接创建一个php.ini文件，用ftp客户端上传到网站根目录（public_html）即可（网上有些教程说手动创建完此文件后，还要去cPanel后台的PHP Config执行一系列操作，那是误导你的，别信~）。此文件内容如下：

output_buffering = Off
output_handler =
zlib.output_compression = On

完成以上操作后，用在线Gzip检测网站测一下，确实是已经开启Gzip了，如下图所示：

不过问题还完全解决呢。我想测一下网站的加载速度如何，在本地用YSlow试了一下，发现很多CSS和JS文件没有优化——这意味着前面开启Gzip的操作只能压缩html。需要说明的是，这里的优化有两方面的含义：1）合并多个小文件；2）压缩文件体积。网上确实有很多这方面的教程，教你如何手动合并/压缩CSS和JS文件，问题是这样做的话要修改好多处地方，升级WordPress的时候就麻烦了。好吧，我只好求助于万能的WordPress插件了。Google了好一会儿，决定选择WP Minify这个插件。按照网上一些教程（如《WP Minify 的使用 》）的提示，在这个插件的设置中我并没有启用html压缩，以免造成不必要的麻烦（实际上前面我手动开启Gzip后，已经对html的压缩生效了）。

用YSlow再次试了一下，效果很好。这时候，我突然想起有个网站可以在线对比YSlow和Page Speed这两种标准。没错，就是GTmetrix啦（话说这个名字真不容易记……）。这个网站的Page Speed分类有一项测试叫做Remove query strings from static resources，提示我说WP Minify有两个url含有问号“?”，建议删除。我在WordPress后台查看了一下WP Minify的设置，确实一个叫做Pretty Url的选项可以将这些不规则的url“美化”一下，其实也就是缩短一下。不过呢，在我启用Pretty Url选项后，重新用GTmetrix测试得出的结果还是一样的。这说明Pretty Url不起作用，有可能是WP Minify这个插件需要升级了（从其官网来看，目前只支持到WordPress 3.3.2）。

YSlow的测试结果还表明，Expires headers和ETag得分很低。Google了一下，得知可以通过配置.htacces文件来自定义这两项参数。具体配置我就不贴出来啦，网上非常多的教程可以参考的。

经过各种细节优化后，再来看看GTmetrix的得分：

看来，优化的效果还不错嘛！至于本地YSlow的测试，得分如下：

Small Site or Blog Grade A 100分
Classic (V1)   Grade A 94分
Classic (V2)  Grade A 96分

实际上，YSlow的V1和V2规则集更适合于大型网站，对个人博客这类小站点参考意义不大。有意思的是，如果你使用了Google Analytics的话，V1和V2的Add Expires headers是没办法拿到A等级的，因为http://www.google-analytics.com/ga.js这个脚本并不是由你控制的，而是由Google决定的。比较囧的是，Page Speed这个标准是Google自己的产品，但用这个标准来检测网站，也会提示ga.js需要添加Expires headers，请问这是想干嘛……如果你硬是要搞定这个问题，也不是说没有办法，只要把ga.js这个脚本托管在你的主机本地即可，但这会带来其他一系列问题，得不偿失（Google官方也不推荐本地托管ga.js脚本）。所以，即便你有强迫症，也请忽略这个问题吧。

顺便一下，在GTmetrix上，Page Speed测试有一项叫做Optimize images，可以直接提供优化过的图片供下载，这是非常方便的。本来我以为自己网站主页那个大大的RSS订阅图标已经优化得可以了，没想到还是有改进的空间。

今天的折腾到此为止，下次有空继续，例如搞个cookie-free domain来优化图床什么的。