2010-5-15 update:
本来想尝试使用Google的项目托管功能,把导入js和css的php文件托管在google code下,可是Google托管服务器可能不支持php文件的写入功能,无法通过php来导入css和js文件,测试失败。
接着把css和js文件托管在Google code下来分发下载资源,使得js和css在googlecode.com域下,增加浏览器的并发下载数。虽然是可以,但是测试效果并不佳,没有了js和css的压缩功能,在空缓存下加载速度不佳,最终还是放弃了这个尝试。
不过通过Google的项目托管功能在某些时候把一些资源托管在那里(比如图片,视频,doc,pdf等等),也是一种优化并行下载数的方法。
=====================================================
Gizp这个词或许大家都不会再陌生了,刚开始在《高性能网站建设指南》,《高性能网站建设进阶指南:Web开发者性能优化最佳实践》以及YAHOO Developer Network中发表的关于提高网站加载速度的34条rules中《Best Practices for Speeding Up Your Web Site》,了解到它对提高页面加载速度方面的优越性,可是一直迷惑于不知道怎么去设置和开启,今天在高性能网站建设进阶指南:Web开发者性能优化最佳实践的第9章《超越Gzip压缩》以及后面的《尽早刷新文档的输出》中又讨论了关于Gzip压缩的问题。所以,只能是上网搜资料,一查到底了。
本来很想用自己的blog做测试的,可惜是虚拟主机,不能自由配置。所以对于服务器端的Gzip压缩的设置,只能是先学理论,日后捣鼓捣鼓主机了,不过对于这方面的设置方式,还是搜到了些资料:《如何开启Gzip压缩》。
因为本博客也都是使用了wordpress系统,所以接下来说说利用php来开启Gzip压缩的方式。更多关于优化wordpress系统的技巧可以浏览《优化试试玩》。
首先,介绍给大家一个网站来测试你的blog是否开启了Gzip压缩:《Web Page Content Compression Verification》。这个网站有些意思,可以测试任何网页是否开启了Gzip压缩,而不单单简单的首页。它还可以查看Response Headers(HTTP Request Response Headers),这个firebug、HttpWatch等等插件都可以查看,就不多说了。同时,对于测试出没有开启Gzip压缩的情况,提供了一种使用PHP开启Gzip的方式(Add Gzip Compression Easily With PHP),它提供的方法非常简单,只需要在每个页面的DOCTYPE前面加上<? ob_start(“ob_gzhandler”); ?>的PHP语句即可。不过对于wordpress系统来说,只需要在主题的header.php中加上上面的代码,就可以了。
对于上面提供的方法,我测试了一下,结果不尽如人意。它确实是对页面的HTML进行了压缩,而且效果也非常良好,下面是对我的blog首页进行测试的压缩效果:
Original Size: 17.58 KB
Gzipped Size: 5.5 KB
Data Savings: 68.71%
这个结果让人满意。但缺点是,它没有对css、js等等进行Gzip压缩。测试发现,仅是对HTMl进行了压缩。非常可惜~
GZIP压缩功能在Wordpress2.3-2.5版本里都是自带的,之后的版本就默认取消了,不知道为啥。不过如果想要暂时使用这个替代的方案,也还是可以通过使用一些Wordpress的插件的,比如:GZippy,GZIP Output。我查看了下上面两个插件的源码,原理跟上面使用的那句PHP代码是一样的,所以喜欢用哪个就用哪个,无伤大雅。
接下来,我们来看看另外一种通过PHP来实现css、js文件的Gzip压缩的方案。方案来源:《使用PHP压缩网站JS/CSS文档》。它主要就是通过下面的一段PHP代码来实现:
<?php
if(extension_loaded('zlib')){
ob_start('ob_gzhandler');
}
header ("content-type: text/css; charset: gb2312");
header ("cache-control: must-revalidate");
$offset = 60 * 60 * 60 * 24;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
ob_start("compress");
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
return $buffer;
}
include('style.css'); //读取css文件
if(extension_loaded('zlib')){
ob_end_flush();
}
?>
具体的代码解析可以查看上面给出的网址链接。接下来我主要是展示一下测试的效果:
当没有使用上面的方法压缩css、js文件的时候,在firebug和ySlow下在空缓存下的onload时间和grade得分情况:

当使用了上面的方法压缩之后,在firebug和ySlow下在空缓存下的onload时间和grade得分情况:

从上面的图示中可见,对于Gzip压缩的效果,是非常明显的,并且在YSlow和Page Speed下都能够得到一个非常满意的打分,而且在HTTP请求文件的大小也减少了一半以上,大家可以对比上面关于加载combine_js.js文件的对比。可是在firebug的“网络”瀑布图中,它们在每次刷新的时候还是发送了HTTP请求,没有显示出304的缓存效果,不解。
之后我又查看了下Firefox缓存的文件(在地址栏中输入:about:cache即可),下面是关于style.css.php缓存的截图:
每次刷新页面的时候,“Fetch count”选项都会加1,这说明文件的确是从缓存里读取了。当然,combine_js.js.php文件也一样。但是为什么还是HTTP请求的返回状态是200呢?
突然想到了上面的那段PHP代码中关于expire头文件的设置是动态的,每次请求都会动态改变expire头,当然还通过header函数发送了其他的请求头信息,或许就是因为这些,每次请求返回了不同的头信息,所以状态是200。
以上解释是本人的推测,还有待更深入的了解……
更多参考:《Compress PHP, CSS, JavaScript(JS) & Optimize website performance》,《Creating ETag headers in php》,《开启GZIP,提速Wordpress》,《加速blog:GZIP压缩传输你的文件》
===============================================================================
附录:
测试发现,使用上面优化css、js文件的方式对于css里所使用的背景图片是无效的,不能给背景图片添加Expires过期日期,这在YSlow下可以测试出来。上网搜索了一番,也没个着落。突然又想到了上面优化css、js的那段PHP代码,既然可以读取css、js文件,那么同样可以用来读取图片了,所以就测试了下,把css里使用背景的链接从icons.gif改为icons.gif.php,之后在YSlow下测试,果然凑效,图片被设置Expires了,可以通过YSlow查看效果。
再经过一番搜索,查看到了PHP官方网站下关于header函数的解析的评论里提供了另外一种实现方式:《http://www.php.net/manual/en/function.header.php#61903》。可是经过测试,对设置背景图片的Expires并没有起作用。
大家的手印: