加速blog:GZIP压缩传输你的文件

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

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

1.动态内容压缩

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

2.静态文本压缩

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

3.静态文本调用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压缩后输出。

写于2007年十一月 29日

25条留言 -> 跳到留言表格
  • At 2008.01.06 17:07, 北极冰仔 said:

    我在自己的 blog 上试验了有问题,压缩后的 CSS 不起作用了。

    • At 2008.01.20 15:16, 杜海凡 said:

      我调用这段代码有问题..我也大概明白是什么原因了.我的域名:blog.ivandoo.com是直接解析到blog文件夹上的,不存在domain/blog的问题..像我这种问题.是否将/blog/这句代码删除就好了呢?还是需要更多的修改@

      • At 2008.01.20 15:29, 杜海凡 said:

        yes,我想我的想法是对的.网站可以从新打开了.但是有一个新的问题....这样更改以后是否依然有效..还有就是这样更改了和wordpress后台的gzip压缩是否重复?是否哟啊将后台的gzip压缩关闭呢?

        • At 2008.01.20 22:05, zhiqiang said:

          是对的... 那个.htaccess里的注释里写了的。

          这个压缩和WordPress后台的gzip压缩是独立的。不过要注意,你的服务器的动态压缩是哪种类型,ob_gzhandler还是zlib.output_compression。如果是后者的话,WordPress后台的gzip选项不用打开也会有压缩效果,而且这时候上面代码的ob_start();ob_start('ob_gzhandler');} ob_end_flush(); ob_end_flush();部分都可以删除。

        • At 2008.03.29 13:31, littlewing said:

          请问一下,这种方法是不是firefox下不行啊,我用后ie显示正常,firefox下css压缩后无效了。要是不用.htaccess,用这个php一个一个压缩,都正常

          • At 2008.03.29 22:03, zhiqiang said:

            嗯,是一个.htaccess的小bug造成的,多写了个`[`号,我已经改过来了,你重新测试看看。

            • At 2008.03.30 07:26, littlewing said:

              嗯,都显示正常了。非常好

          • At 2008.03.30 07:46, littlewing said:

            盼第三章写完

            • At 2008.04.01 22:43, littlewing said:

              不好意思再问一下,就是用cos-html-cache静态化站后,RewriteRule里的压缩类型不能有html,否则ie以外的浏览器打开的都是该静态html的源文件,而ie都是正常显示的静态html,例如这个静态后的网页:http://gust.org.ru,搜不到有类似的问题,请问怎样让ie以外别的浏览器支持啊

              • At 2008.04.01 22:58, zhiqiang said:

                哦,原因是没有发送正确的Content-type。我修改了一下redir.php的源代码,添加了一个'html'的case。你可以试试看

                • At 2008.04.02 22:22, littlewing said:

                  对呀,静态化前我还专门加了个html case,后来又删了
                  现在好了,重新加上就行了
                  那个RewriteRule的代码你又加上`[`号了

              • At 2008.04.11 13:43, MO said:

                WordPress应该自带这个功能吧...

                • At 2008.04.11 20:21, zhiqiang said:

                  WordPress自带的是php动态内容的压缩,静态文件比如css,还是需要服务器的支持或者采取特殊的方法处理。

                  • At 2008.04.11 21:13, MO said:

                    嗯, 我是修改了 .htaccess 这个文件,让服务器来Gzip这些静态文件的...

                • At 2008.05.12 14:47, 酋长 said:

                  测试,也不起作用。。

                  • At 2008.05.13 11:22, G - 理想和现实本来易于冲突,理想时已经含了悲哀,现实起来当然就会绝望 said:

                    [...] 网站用了cos-html-cache来静态化,所以不光想压缩css和js,连带html文件也想一块儿压缩了。原来一直用 阅微堂的方法在.htaccess里写一个规则来压缩网站的html,css和js,后来由于网站重建,同样的代码首页不能压缩了,即网站首页http://xxx/后面没有html后缀,所以无法压缩,只有http://xxx/index.html才可以正常压缩html. [...]

                    • At 2008.07.29 14:33, 毒龙的世界 said:

                      [...] 原帖地址:http://zhiqiang.org/blog/posts/speedup-blog-gzip-javascript-css.html [...]

                      • At 2009.02.13 17:22, 终极gzip压缩css、js、html、php语法 @ agon - 破地儿 said:

                        [...] 关于这个话题,很多人都写过了,最早是看阅微堂的教程很受启发,后来发现,我用起来rp很差,不是php动态网页不能压缩,就是css不显示,不能方便的按各种类型统一设置缓存,后来我用zlib的方法解决了以上问题,并且解决了firefox不显示css的问题,可是用zlib又有个坏处,就是必须等网页下载完之后,才开始解释,初次载入感稍差,mod_DEFLATE模块可以便下载边解释。 好了不说废话了,放代码,我以这个000webhost空间为例,首先编辑.htaccess,在里面添加两行代码: [...]

                        • [...] 不管是zlib.output_compression还是ob_gzhandler,都仅能对PHP文件进行GZIP压缩,对于HTML、CSS、JS等静态文件只能通过调用PHP的方式实现,可以参照文章《加速blog:GZIP压缩传输你的文件》中的“静态文本调用PHP压缩模块实现GZIP压缩效果”。 最后想说的是,现在主流的浏览器默认使用的是HTTP1.1协议,基本都支持GZIP压缩,对于IE而言,假如你没有选中其菜单栏工具->Internet 选项->高级->HTTP 1.1 设置->使用 HTTP 1.1,那么,你将感受不到网页压缩后的速度提升所带来的快感! [...]

                          • At 2010.04.27 21:56, IT小弄堂 » Blog Archive » 使用GZIP压缩网页内容,节约空间(GoDaddy)流量,加快访问速度 - longdang.com的IT小支弄 said:

                            [...] 不管是zlib.output_compression还是ob_gzhandler,都仅能对PHP文件进行GZIP压缩,对于HTML、CSS、JS等静态文件只能通过调用PHP的方式实现,可以参照文章《加速blog:GZIP压缩传输你的文件》中的“静态文本调用PHP压缩模块实现GZIP压缩效果”。 [...]

                            • At 2010.05.11 12:01, 尝试Gzip压缩 | Javascript is dancing said:

                              [...] 更多参考:《Compress PHP, CSS, JavaScript(JS) & Optimize website performance》,《Creating ETag headers in php》,《开启GZIP,提速Wordpress》,《加速blog:GZIP压缩传输你的文件》 [...]

                              • At 2010.07.22 14:24, fd said:

                                结婚以后我才发现,我的老公是个流氓http://tieba.baidu.com/f?kz=835985238

                                • At 2010.10.31 20:41, 小游 said:

                                  写的不错,很有用

                                  • [...] 关于这个话题,很多人都写过了,最早是看阅微堂的教程很受启发,后来发现,我用起来rp很差,不是php动态网页不能压缩,就是css不显示,不能方便的按各种类型统一设置缓存,后来我用zlib的方法解决了以上问题,并且解决了firefox不显示css的问题,可是用zlib又有个坏处,就是必须等网页下载完之后,才开始解释,初次载入感稍差,mod_DEFLATE模块可以便下载边解释。好了不说废话了,放代码,我以这个000webhost空间为例,首先编辑.htaccess,在里面添加两行代码: [...]

                                    • [...] 网站用了cos-html-cache来静态化,所以不光想压缩css和js,连带html文件也想一块儿压缩了。原来一直用 阅微堂的方法在.htaccess里写一个规则来压缩网站的html,css和js,后来由于网站重建,同样的代码首页不能压缩了,即网站首页http://xxx/后面没有html后缀,所以无法压缩,只有http://xxx/index.html才可以正常压缩html. [...]

                                      (Required)
                                      (Required, not published)

                                        B | I | U | D | 添加链接 | 插入引用 | 插入代码 | 插入表情 | | + | ?

                                      guest | 注册 | 管理

                                      阅微堂

                                      理工科背景的证券从业人员
                                      Loading...
                                      Loading...
                                      Loading...