在前几天文章《汇报下最近的Wordpress优化工作》，其实我也说到了针对css和js文件的优化，当然，只是合并文件、删除冗余注释等低级方法。这里转载一篇Charles的文章《简述对WP博客样式表和JS脚本的压缩 》
插播广告：如果你正在因为不懂编程，为修改博客发愁？或者你有什么Excel/Word方面的疑问？请移步Estyle的博客。热心的老E兄将为您解答。特别是Blogbus一些修改方法，强烈推荐，比如：
《随机友情链接在博客大巴上的实现》
《修改博客大巴评论样式的简单方法》
《如何修改“评论榜”》
……
Ok，下面正文：
应朋友的要求，才决定要写这个文章，我想，我对这个问题的理解是比较肤浅的，恐怕也讲不清楚，所以，我只简述一下步骤，高手就直接跳过吧。
先从文件在网络上传输说起，浏览一个网页，一般就是浏览器从服务器上下载文件的一个过程。举个例子，如果浏览我的网页，你要下载这么几个文件：
- 由index.php输出的一个HTML文件，也就是主页上的文字、链接还有他们的逻辑结构
- style.css样式表文件，决定了页面的外观
- jquery.js和vg.js脚本文件，决定了主页上的一些小功能，表单验证啦，ajax之类的
- 其他若干文件如logo.png，日志中引用的图片，或者留言中的头像，等等
浏览一个网页要下载这许多文件，如果每个文件又都很大的话，得到的结果只有一个，就是网页展现时间相对来说要长。如果能对传输的文件进行压缩，就能缩小文件的体积，加快浏览器的下载速度，减少服务器的流量。
还好，浏览器本身就是支持压缩格式的，比如gzip，现在问题的关键就是怎么让服务器把输出的文件压缩。我在网上搜了一下，一般最好的做法是使用服务器来压缩，Apache带有一个模块，叫做deflate，就专门干这个，如果你的服务器支持这个功能，那么你就很幸运，直接开启这个，然后配置一下就可以了。当然，我没有，所以，我也搞不清楚怎么配置啦。
服务器本身不支持，我们还有别的办法，那就是使用PHP来压缩了，PHP是支持gzip的。当然，又是一样，我讲不清楚怎么写那些代码，也搞不懂，但是这不代表我就不能用。
一个个说，压缩HTML文件，我用的是一个插件，就是WP Super Cache，这个插件自己就可以对Cache下来的文件进行压缩，只要在控制面板里面打个钩就行了。（WP 2.3 以前的，WP本身就有压缩功能）
刚才只说了压缩HTML，剩下的东西怎么办呢？本来我也是没有办法的，是看到了伟大的K2的代码，才知道，原来还可以这样。起作用的是这么段代码，这段代码在js文件夹的gzip-header-js.php和css文件夹的gzip-header-css.php中都有，内容几乎是一样的，其作用就是对这个文件进行压缩，并且要求浏览器缓存这个文件，缓存时间是两个月。
<?php
// check to see if the user has enabled gzip compression in the WordPress admin panel
if ( extension_loaded(‘zlib’) and !ini_get(‘zlib.output_compression’) and ini_get(‘output_handler’) != ‘ob_gzhandler’ and ((version_compare(phpversion(), ‘5.0′, ‘>=’) and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start(‘ob_gzhandler’);
}
// The headers below tell the browser to cache the file and also tell the browser it is JavaScript.
header(“Cache-Control: public”);
header(“Pragma: cache”);
$offset = 5184000; // 60 * 60 * 24 * 60
$ExpStr = “Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”;
$LmStr = “Last-Modified: “.gmdate(“D, d M Y H:i:s”, filemtime($_SERVER['SCRIPT_FILENAME'])).” GMT”;
header($ExpStr);
header($LmStr);
//注意！！！！！：以下两个header是二选一的，千万不能全放上去啊！！！！！
//此段代码专用于js代码的压缩，看下面这句Content-Type就知道了。
header(‘Content-Type: text/javascript; charset: UTF-8′);
//如果是CSS文件，替换成下面这句
header(‘Content-Type: text/css; charset: UTF-8′);
?>
大家要做的也是很简单的，把上面这段代码，插入到你的js文件，或者CSS文件中，然后将他们的扩展名加一个.php就可以了。注意看我写的注释啊，不看清楚就照抄，你肯定搞不定。
现在来举个例子，比如我的页面使用了jQuery类库，那么我原本要这样写：
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.js”></script>
然后，我把上面的代码拷贝到jquery.js文件的最前面，然后重命名成jquery.js.php，引用时候写法也变成下面的样子了：
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.js.php”></script>
jQuery的那个文件原来的尺寸为55KB，经过这样的处理，浏览器实际下载量是17KB，只有原来的三分之一。
但是对样式表的压缩，并非那么一帆风顺，因为主样式表文件是不能重命名的，必须叫style.css，这是WP机制决定的的，如果你换了名字，模板根本不会出现在模板列表里面。
处理这个问题的方法我知道两个：
1，把style.css里面的内容，拷贝到另一个css中，比如，myzipstyle.css中，然后使用上面我说的方法，最后在header.php中加上对myzipstyle.css.php的引用，就可以了。而style.css里面就只有7行注释，你可以把对它的引用从header.php中去掉。但是这个style.css，及其文件内前面那些注释，都是必须的，不能删掉（虽然你可以不用）。
2，像伟大的K2那样，在style.css里面引用另一个css文件，写法如下：
//K2的style.css，除了注释，就只有下面一行。相信聪明的你已经看懂了，我就不再费唇舌了。
@import url(‘css/core.css.php’);
乱七八糟，洋洋洒洒一大堆，希望能对你有所帮助吧~~
当然，还有更高级的方法，也更厉害，但是我是没有搞清楚的，我提提名字，如果你有志于再深入一步的话，可以有个出发点。再后面的方法就是，自己编译一个专门用于压缩的CGI程序（也可以用别人编译好的），然后放到服务器的cgi-bin文件夹里面，然后，手动修改.htaccess，让浏览器访问的每个文件，都从“压缩机”里面过一遍。你可以去：阅微堂（http://zhiqiang.org/blog/posts/speedup-your-blog.html），主人对博客优化有着深入而系统的研究。
最近准备清理冗余代码,差不多搞好了…我那破皮…
好像版式变了好多？
小墨好样的，先做个位置，再看～
我是来感谢你的广告的，谢谢！ :_)
另外，大概浏览了一下广告后面的内容，很不错，喜欢精益求精的探索。
再表达一下自己的个人观点：就我所知，CSS/JS/HTML等静态文件，在默认情况下是会缓存到本地的，如果把他们“裹”在PHP里面，很可能会让缓存失效，反而产生反效果。所以，不建议静态文件走服务器端压缩（除非站点被设置为不缓存）。但是，静态文件删除注释什么的，这些手段很必要，立杆见影！哈哈。
PS：不过服务器端文件没有必要删除注释。
个人观点，仅供参考。再次感谢你的广告！
另外，不知道小墨方不方便修改一下广告？
因为有一篇“随机友情链接在博客大巴上的实现”，个人认为也很猛，希望能一并广告一下：
http://estyle.blogbus.com/logs/23216790.html
感激！
相当猛，马上加上^_^
小墨，还记得我吗，嘿嘿～
你狠，连blog都建好了~
刚才在本地试了一下，没有成功，郁闷啊。
恩，清理了下自己都感觉整洁多了，其实外表也看不出来@@
呵呵 稍微加了点东西，应该没什么太大变化吧~
这回坐的位置不是很好啊~
那是不是你认为文中说的方法没什么用呢？
技术活，偶其实不懂^_^
我还没尝试呢，没时间弄。晚上试试
不错，这里比我那里热门多了，嘿嘿……
不过，我已经说了，那段代码是大名鼎鼎的K2里面截取出来的。
已经向浏览器发送了正确的header，要求缓存，而且要求缓存时间比一般都要长，2个月。这个主要是回答一下Estyle提出的那个问题。
另外说一句，楼主没有给原文留链接啊~~
怎么说也分给我点流量吧。
http://www.chunaove.cn/simple-guide-to-css-js-compress.htm
你写的这个链接，既没有指向我，也没有指向你自己，不知道是干啥啊。
这玩意我一点都不懂，所以这是条垃圾评论。。
呵呵，不好意思，可能操作有误，只复制了地址后面部分simple-guide-to-css-js-compress.htm
。。。。其实我也很奇怪，为什么只复制了后面@@
不好意思
没事，欢迎转载
广东电信访问你的站，速度非常，莫非在电信线路？
压缩css样式表的之前介绍过几个工具，js的朋友那里介绍了我那就没有介绍了。如果日后还需要修改的话，还是不建议对代码进行一些机械化的压缩，因为它们会自动删除一些注释文字，再修改的时候怕找不着北^^前车之鉴。
P.S:这几天回到广州，很多事情需要处理，所以更新慢了，谢谢小墨关心！
怪不得，我说怎么更新慢下来了。
主机就是电信的，所以我自己用着还是不错的，但是有些朋友就访问非常困难。
多谢建议^_^
没关系，悄悄说：其实我也不懂
不过我今天改进了一下我评论系统了，可以折叠的^_^。效果是做好了，但是样式还没有修改完。。
呵呵，我没注意分析代码，原来代码中考虑了缓存的，Sorry。
考虑了缓存，如此甚好，甚好，呵呵。
wordpress是不是有插件可以实现压缩功能的？
One Trackback
[...] 这两天小墨都在优化他的wordpress主题,其中他提到压缩Wordpress样式表和JS脚本 这种压缩CSS样式表和js脚本方法是利用gzip,而且是采用PHP压缩的gzip.但是这样gzip压缩会消耗服务器的CPU资源，(大部分服务器都限制CPU使用的)所以在CPU使用高的时期，gzip压缩模式下的网页访问速度可能比没有压缩的网页还要慢. [...]