在网站根目录下的.htaccess文件中添加以下代码

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType text/javascript A2592000
ExpiresByType text/html A600
</IfModule>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|html|htm)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>

FileETag none

现在使用Firefox的YSlow插件，以Small Site or Blog标准测试的分数为99分，以YSlow2(V2)标准测试的分数为94分，被扣掉的几分主要是因为没有使用CDN。所以现在速度已经被优化到了极致。

赶快把它放到你的网站或blog根目录下的.htaccess文件里吧。

© zhiqiang for 阅微堂, 2009. | 链接 | 17 条评论

在浏览网页的时候，浏览器需要把网页上的内容，包括网页HTML，CSS，JS，FLASH和图片等下载到本地，然后把它们显示出来。如果网页上的内容是固定的，下载速度也不是你我能控制的，但下载的大小则是可以控制的，只需要你再传送的过程中先把内容压缩一下即可。

对于一般的HTML，CSS和JS文件，GZIP的压缩比率达50%到80%，节约的流量是非常惊人的。下图是阅微堂上的GZIP结果：

动态内容压缩

动态内容指动态脚本比如PHP生成的内容，比如WordPress产生的内容均为动态脚本内容。对于动态脚本的压缩方式有两种，一种是ob_gzhandler，一种是zlib.output_compression。前者几乎所有服务器都支持，只需要在WordPress后台options->Reading->WordPress should compress articles (gzip) if browsers ask for them打开GZIP传输即可。而后者是一个PHP模块，效果更佳，因为它是边生成，边压缩，边传输的，效率和速度都更好。但这个是PHP的一个模块，不是所有服务器上的有这个模块。

静态文本压缩

但对于另外一些需要压缩的静态文本，比如html, css, javascript文件等。相应的静态文本压缩的Apache模块有两种，GZIP和DEFLATE，后者更好，不过这都没啥选择，完全看服务器是否提供，个人无法配置，比如使用最多的Bluehost和Dreamhost都不支持。

静态文本调用PHP压缩模块实现GZIP压缩效果

如果服务器不提供对于静态文本的GZIP压缩模块，唯一的出路是通过调用PHP。有好几种方法调用PHP达到这个效果，下面介绍一种方法，好处是除了在目录下添加一个文件和修改.htaccess之外，不需要对别的代码作任何修改，所有的js，javascript的压缩都自动生效。（不过，如果你看不懂下面这些代码为什么能起作用，就不要使用这个方法）

首先，修改你的blog目录下的.htaccess文件，加入下面几行代码(注意修改你的blog的目录，这里默认是/blog/)

# to gzip your css, javascript, html file automatically
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/ #directory of your blog, change it to yours
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)(js|css|html|htm)$ /blog/redir.php?file=$1$2&type=$2 [L]
</IfModule>

其次，将下面代码保存在文件redir.php里，放到blog的根目录

<?php # this is the file redir.php, to gzip javascript and css
# set the request file name
$file=$_REQUEST['file'];

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
switch ($_REQUEST['type']){
  case 'css':
    header("Content-type: text/css");
    break;
  case 'js' :
    header("Content-type: text/javascript");
    break;
  case 'html':
    header("Content-type: text/html");
    break;
  default:
    header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
  ob_end_flush();
  # set header the content's length;
  # header("Content-Length: ".ob_get_length()); # (It doesn't work? )
  ob_end_flush();
}
?>

大致解释一下原理，那段.htaccess代码把所有的css,js,html,htm文档自动转向到redir.php，redir.php则读取真实的文件内容，调用PHP压缩模块ob_gzhandler压缩后输出。

© zhiqiang for 阅微堂, 2007. | 链接 | 25 条评论

用WordPress的都知道，WordPress可以打开GZIP传输，压缩比率能达到60%到80%。下表是本blog首页在Web Page Analyzer上的测试报告，此页面上包括css, js所有东西加起来才14K。

QTY	SIZE#	TYPE	URL
1	6999	HTML	http://zhiqiang.org/blog/
1	2593	SCRIPT	http://zhiqiang.org/blog/.../comment.js.php
1	2302	SCRIPT	http://zhiqiang.org/.../all.js.php
1	2048	CSS	http://zhiqiang.org/.../style.css.php
1	431	IMG	http://feeds.feedburner.com/~fc/zhiqiang
5 ^	14373*		Total (^unique objects)

Dreamhost还用的是Apache 1.3(Am I wrong？)，所以没有mod_deflate模块，而用的是mod_gzip模块，这个模块直接在磁盘上读写，效率比前者要低。不过有总比没有好，毕竟压缩比率很高。

但诡异的是，服务器默认对CSS和JS不作压缩。写信去问了dreamhost客服，也没有什么好方法。最后我采用的方法是用php给包一层：用style.css.php来代替style.css：

<?php # this is the file style.css.php, who contains style.css
# set the request file name
$file="style.css";

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
$ext = array_pop(explode('.', $file));
switch ($ext){
case 'css':
 header("Content-type: text/css");
 break;
case 'js' :
 header("Content-type: text/javascript");
 break;
case 'gif':
 header("Content-type: image/gif");
 break;
case 'jpg':
 header("Content-type: image/jpeg");
 break;
case 'png':
 header("Content-type: image/png");
 break;
default:
 header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
ob_end_flush();
# set header the content's length;
# header("Content-Length: ".ob_get_length()); # (It doesn't work? )
ob_end_flush();
}
?>

上面代码不仅压缩代码，而且要求浏览器端Cache这个文件。甚至，可以把所有css文件都放到一个php文件里，只要在echo处加入多个文件即可。

下面是一些常用的测试网站：

• GZIP Test: 测试一个URL地址是否支持GZIP传输，以及压缩比率。
• Web Page Analyzer：网站页面速度报告
• Cacheability Test: 测试一个页面是否可Cache

参考资料：

• Caching Tutorial
• flickr对javascript干的好事
• Working with cached pages

© zhiqiang for 阅微堂, 2007. | 链接 | 18 条评论