March 26th, 2007
压缩你的JS和CSS代码
Category: CSS, WordPress, Author: Nicky, Popularity: 16%减小代码在传输中的大小，就能提高页面的传输速度，打开网页也就快了。在上一篇文章中提到了使用Apache2的mod_deflate模块来压缩页面，但这需要在Apache中加载这个模块才行，今天我给主机提供商留言2次，都得到了同样的答复：“暂时不支持,非常感谢您长期对我司的支持!”。从zhang的留言中得知有名的dreamhost也没有打开mod_deflate，我的心里才好受一点。
mod_deflate模块提供了DEFLATE输出过滤器，允许服务器在将输出内容发送到客户端以前进行压缩(应该也是采用gzip数据格式压缩，deflate是一种压缩算法)以节约带宽。Apache 1.3.x时代使用mod_gzip模块来实现，Apache2已经内置了mod_deflate模块。
而WordPress默认的gzip压缩功能是通过ob_gzhandler这个函数来实现的，ob_gzhandler是php 4.0.4新增的一个输出缓存函数，并通过gzip压缩后发送到客户端。这个函数需要zlib库支持，一般的虚拟主机都安装有这个库，所以很多blog都使用这个方法来实现对php页面的压缩。
那么对于我们这些没有开启mod_deflate模块的主机来说，就只能采用ob_gzhandler函数来压缩了，它的压缩效果和mod_deflate相比，相差很小，几乎可以忽略（但它只能对php文件进行压缩），下一篇文章将附上我对这几种方式的一个对比测试。
使用ob_gzhandler函数有3种方法让它对php进行压缩：
1、在php.ini中设置output_handler = ob_gzhandler
2、在.htaccess中加入php_value output_handler ob_gzhandler
3、在php文件头加上ob_start('ob_gzhandler');
第一种我们是没法办到，第二种方法不错，可以一劳永逸，一、二种方法效果都一样，就是对所有php后缀文件进行压缩。我这里主要介绍一下第三种方法，参考“How To: Optimize Your CSS Even More”。
例如对模板下的style.css进行压缩
1、把模板目录下的style.css复制一份出来，命名为style.css.php
接着在style.css.php顶部加入这句：
在最后加上
（复制的时候去掉?php前的空格）
2、按照下面的方式修改header.php中的css连接
原来的：
修改后的：
搞定，现在你的CSS就可以被gzip压缩了。
JS也可以使用同样的方法，只是在xx.js.php头部加入的应该是这样：
（复制的时候去掉?php前的空格）
仔细看看K2主题的中的JS，就是修改后缀为php后在顶部加入了ob_gzhandler函数。
用这种方法，我把50多K的prototype.js和13K的style.css压缩了，现在用Web Page Analyzer测试我的首页，JS大小从88,553b减小到了45,852b，CSS从17,626b减小到了7,193b。
Tags：Apache, CSS, gzip, mod_deflate, ob_gzhandler, WordPress, zlib.
评论数量(10) | Add Comments
本文网址：http://www.osxcn.com/wordpress/optimize-your-js-and-css.html
收藏! 你的css也太大了点了吧
Gravatar还没有修复啊, 唉彻底死心了!
请问Nicky使用的是那家空间服务商呀？速度不错嘛
好文章，我收藏了！回去我也试验下。
Gravata难道又出问题了吗？
那是总的css大小，style.css只有13k，压缩后剩下3k，效果不错。
我的空间用的西部数码
http://www.west263.com/
不错,呵呵想问一下, Nicky 的广告收入有多少?
很好，学习拉
新注册的gravatar还有在2.0重新上新之后更换的头像都很多用不了, 不过不是100%, 要看运气. 你看我2个不同的email就知道了
这个方法好，BLOG上的JS太多了，压一下
谢谢！确实不错。
最近正准备投向WP怀抱，因为版式用的图片有点多，大得吓人。
然后，按照文中思路，我把所有包括插件的js和css都弄到了一个文件里，一压之后质量轻了差不多一半，太高兴了！！！