优化你的 WordPress 之压缩 CSS/JS 代码（进阶篇补充）

Posted in WordPresson 2009/7/28 | 79 条评论 | 作者：Showfom

由于本人是个代码洁癖控+优化控，一旦确定使用某个主题以后，会彻底去优化他的代码（这时候从来没考虑过可读性）。

虽然现在的宽带1M、2M已经算不了什么，但是很多地方仍然使用512K甚至更低的网速，试想，一直小猫来访问你的网站，却要苦苦等待10多秒才能打开，也太那啥了吧，我曾经介绍过几个优化 WordPress 的文章：

优化你的 WordPress 之减少数据库查询次数（中级篇补充之 Object Cache）

最终的效果只是提高了 WordPress 的效率，在《优化你的 WordPress 之精简 HTML 代码（进阶篇）》一文中简单提到了要优化自己的HTML代码，作为一名超级代码洁癖控，怎么能容忍自己的 CSS 或者 JS 的代码的体积如此庞大，如此……

所以，经过摸索，Showfom 小帅锅 决定彻底优化自己的 CSS 和 JS 代码，现在首页只加载了一个 CSS 和 JS，并且去除了多余的累赘的重复的代码，最终效果如下：

//showfom.imgbed.com/v1/style.css

可以自行下载或者直接在 Firefox 中打开看效果，之前的体积有 14 KB 左右，经过妥善处理，现在体积只有 10KB 不到点，别小看这3、4KB，我想起了某个帅锅说过的一句话（其实你们知道是谁说的啦哈哈）：“优化如同女人的乳沟，挤一挤还是可以再优化的。”

那么，需要用到什么工具呢？本人的优化系列的一大好处就是，几乎没有任何专业知识，我只传授方法，不传授原理（因为鄙人不才，自己也不是很懂专业知识），压缩CSS的终极利器就是：CSSTidy，这是一个开源程序，使用C++编写，作者也放出了PHP版本，下载地址在这里，你可以下载C++的源代码自己进行编译，也可以把PHP版上传到自己的空间。

默认中文的只有繁体，所以我特意为大家翻译好了中文，并且上传至我的空间，没有多余空间的朋友也可以享福了，地址：

http://i.zou.lu/csstidy/

简体中文版CSSTidy下载点这里。

使用方法，进入 //showfom.imgbed.com/csstidy/ ，然后复制你的CSS代码，要稍微压缩的话直接点击执行，要最大化压缩（不在乎可读可修改性）的话，选择右边的压缩程度为最高，如图（以小众软件的CSS作为例子）：

点击执行以后，看页面下方，会输出精简但是并不阉割的CSS代码：

我们可以看到，原来21.934KB的CSS，可以精简到13.518KB，压缩比率: 38.4%，太帅了。

然后把精简过的 CSS 复制到后台 > 主题 > 编辑 > Style.css

切记，除非和我一样，把样式放到单独的文件夹然后头部引用的CSS也是放在其他文件夹，那么，WordPress 主题的 Style.css 必须满足头部信息的完整，就是前面几行注释一定得存在，否则读取不了主题就完了。

比如，小众软件这个CSS前面几行注释：

/*
Theme Name: DeepBlue fix
Author URI: http://www.nathanrice.net/
Version: 1.0
Author: Nathan Rice
Description: DeepBlue is a free theme by <a href="http://www.dailyblogtips.com/">Daily Blog Tips</a>.
The CSS/XHTML is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

必须存在，意思就是说，精简过的 CSS 代码中，把注释全部删除了，这几行得手工加在最前面，否则 WordPress 会读取不了主题。

OK，CSS精简完毕，那么，如何再Gzip之，使得传输的时候再次压缩，不断压缩减小体积才是我们的目的，这就得启动 Gzip 功能，以前也介绍过，像 WP Super Cache、Hyper Cache 这些插件里自带了 Gzip 功能，假如不用插件的话，可以用这几篇文章的方法

完美启用Gzip压缩JS、CSS

WordPress 提速之 Gzip 压缩

WordPress之终极Gzip兼容IE6

给 WordPress 开启 Gzip 功能

======

不但 CSS 可以这样压缩，JS 也同样可以，推荐在线压缩JS的网站：//showfom.imgbed.com/jsmin/，来自 JS Minifier javascript，英文版在这里：http://fmarcia.info/jsmin/test.html 中文版在这里： //showfom.imgbed.com/jsmin/

PS：谨慎使用超级压缩（Agressive），一般推荐普通压缩（Conservative）即可，就是默认的那个，复制你的js代码到框框里，然后点击JSMin压缩即可。

同样，JS 和 CSS 一个道理，也可以通过 Gzip 近一步压缩，这里我就不多介绍了。另外这里还有一个压缩 JS 的网站

再次PS：优化得有针对性，针对某个网站某个博客优化才是硬道理，虽然每个网站的代码不通用，但是优化的原理都是一样滴，今天就不推荐博客和推友了。

相关信息

本文短网址：http://aa.cx/075 ，如果你觉得本文很可爱，请使用 Twitter 来分享本文：Tweet This
收藏+分享: Delicious / Live Favorites / Google书签 / 百度搜藏 / QQ书签 / 饭否 / 豆瓣 / Twitter

已有79条评论

Bronco 发表于2009年07月28日00:39
CSS和js用gzip压缩并缓存，我觉得大小也就差不多了，折腾剩下的几k今后自己也不太方便...
[回复]
Showfom 回复:
July 28th, 2009 at 00:40
@Bronco, 关键是有些空间不支持gzip咋办，所以手工压缩一遍再Gzip才是最好滴~
[回复]
Bronco 回复:
July 28th, 2009 at 00:42
@Showfom, 用php啊~就是之前很流行的把css和js交给一个php来处理。想指望mod_deflate还是算了吧...
[回复]
Showfom 回复:
July 28th, 2009 at 00:43
@Bronco, 几 KB 耶！Google 为了一个字节都可以进行优化呢，何况我们这种小博客，节约流量，从我做起
[回复]
Bronco 回复:
July 28th, 2009 at 00:48
@Showfom, 这是以自己的不方便为代价的~像我这种时不时要折腾一下主题的人肯定会不爽滴~~
其实我的js已经用YUI Compressor压缩过了 css因为会不时修改一下，没有动~
[回复]
Showfom 回复:
July 28th, 2009 at 00:51
@Bronco, So 我是说一旦确定好一个主题几百年不去改动以后嘛，PS：切记备份哦哈哈你的博客的代码也太他妈乱了！我都看不下去鸟。你看head 里有多少不必要的代码！！
[回复]
Alan 发表于2009年07月28日00:59
丫的，都分享到 Gtalk 了
CSS 还不需要压
[回复]
Showfom 回复:
July 28th, 2009 at 01:06
@Alan, CSS确定好以后压缩一下多爽~~嘎嘎
[回复]
LAONB 发表于2009年07月28日01:17
板凳你看又有错别字了,也可以把PHP版上川到自己的空间,下次还是叫我给你把把关.
压缩工具的工作很简单,换行取消,不过貌似删除最后的；做的不完美。我的也有压缩的余地。
[回复]
Showfom 回复:
July 28th, 2009 at 15:44
@LAONB, 取消换行取消多余的空格合并同类的css 就这么简单，体积能减少很多
[回复]
博译论发表于2009年07月28日01:31
就为那衰哥一比喻，努力挤
[回复]
Showfom 回复:
July 28th, 2009 at 15:45
@博译论, 挤呀挤呀挤……
[回复]
西风发表于2009年07月28日08:17
日你就算再压缩也没看见你个MJJ的网站速度快
[回复]
Showfom 回复:
July 28th, 2009 at 15:43
@西风, 日老子的博客比你那三脚猫的博客速度快多了去了！日
[回复]
西风回复:
July 28th, 2009 at 17:24
@Showfom, 废话，你这不找抽么，你要是不用vps，你有这么快啊！傻X
[回复]
Showfom 回复:
July 28th, 2009 at 17:53
@西风, 这个博客没用啊你个傻X！
[回复]
Leeiio 发表于2009年07月28日08:42
对于使用国外空间的我来说，压缩js和css是何等的重要，可是由于js里面很多不够规范的地方导致现在还不能直接压，否则会出错。。
[回复]
Showfom 回复:
July 28th, 2009 at 15:45
@Leeiio, 囧哦用普通压缩没问题的啦，只是去除多余的空格和空行而已。超级压缩就麻烦了，会合并函数之类的我也不清楚，总之不规范的js用超级压缩就……
[回复]
美国VPS推荐发表于2009年07月28日08:48
压缩之后，代码的易读性，好像大打折扣。。
[回复]
Showfom 回复:
July 28th, 2009 at 15:42
@美国VPS推荐, 不是一般的打折扣……
[回复]
雪深发表于2009年07月28日09:10
不压缩了已经够小的了
[回复]
Showfom 回复:
July 28th, 2009 at 16:26
@雪深, 嘎嘎看自己需要的~
[回复]
要饭的发表于2009年07月28日09:30
看看，老大给很多人都优化过博客的～～
[回复]
Showfom 回复:
July 28th, 2009 at 15:46
@要饭的, 玩玩而已啦嘎嘎
[回复]
shamas 发表于2009年07月28日09:50
优优去也
[回复]
Showfom 回复:
July 28th, 2009 at 15:46
@shamas, 嗯去吧去吧
[回复]
junjun 发表于2009年07月28日10:08
哟哟哟，我不懂代码呢。。难得搞
[回复]
Showfom 回复:
July 28th, 2009 at 15:47
@junjun, 姐姐你多幸福，专门有人会帮你搞的啦~~
[回复]
junjun 回复:
July 28th, 2009 at 15:48
@Showfom, 刚才callme啊哈哈哈，我在看电视没来得及接啊
[回复]
Showfom 回复:
July 28th, 2009 at 15:49
@junjun, 再call姐姐一次~
[回复]
junjun 回复:
July 28th, 2009 at 15:50
@Showfom, 我要专心致志的看电视哈哈哈
[回复]
Showfom 回复:
July 28th, 2009 at 15:51
@junjun, 哼哼那算了，找别的姐姐去哼哼
[回复]
junjun 回复:
July 28th, 2009 at 17:49
@Showfom, 只有安装wp是别人帮我的，其他都是我自己搞的
[回复]
Showfom 回复:
July 28th, 2009 at 17:52
@junjun, 昂姐姐真乖~
[回复]
shamas 发表于2009年07月28日11:21
弱弱的问一下，所谓的代码可读性差如何理解
[回复]
Leeiio 回复:
July 28th, 2009 at 13:14
@shamas, 可想而知，代码压缩过了多余的空格以及代码缩进都没有了，外人肯定是很难看懂了除非重新对代码进行格式化。所以代码格式化之前自己得先保存一份未优化的，否则日后维护就有的罪受了。
[回复]
Showfom 回复:
July 28th, 2009 at 15:39
@Leeiio, 是的，所以切记备份嘎嘎但是体积真的小很多鸟~
[回复]
许三品发表于2009年07月28日12:05
不错，多少还是减肥了，别太胖了！
[回复]
Showfom 回复:
July 28th, 2009 at 15:47
@许三品, 节约流量，从我做起。
[回复]
Yacca 发表于2009年07月28日13:07
wopus的主机默认开了gzip么?...我怎么感觉没有捏...
[回复]
Showfom 回复:
July 28th, 2009 at 15:42
@Yacca, 国内的空间嗯哼~国外的当然默认没开启。
[回复]
xiaorsz 发表于2009年07月28日13:09
酋长的空间现在默认：GZIP吗？！！
貌似以前是没有的，呵呵！！
[回复]
Showfom 回复:
July 28th, 2009 at 15:39
@xiaorsz, 国内的服务器，默认开启的，嘎嘎~
[回复]
Leeiio 发表于2009年07月28日13:16
其实google的ad耗费了我博客的大量载入时间，每一个广告都要载入一次showad这个js，得研究下优化google ad了可是又怕被认为作弊。。
[回复]
Showfom 回复:
July 28th, 2009 at 15:40
@Leeiio, 嘎嘎直接载入Google的js呗~只要不用框架frame就不会是作弊的啦。
[回复]
ZH CEXO 发表于2009年07月28日13:38
不错的文章，只是现在picasa还是俺的心病
[回复]
Showfom 回复:
July 28th, 2009 at 15:41
@ZH CEXO, 用东哥的插件呗，直接解决了。
[回复]
ZH CEXO 回复:
July 28th, 2009 at 16:14
@Showfom, 插件好用，但流量算我的，这样就违背了当初使用picasa的初衷
[回复]
Showfom 回复:
July 28th, 2009 at 16:26
@ZH CEXO, 你个mjj的家伙，放我这里来吧，联系一下我，Twitter上推一下也可以。
[回复]
万戈发表于2009年07月28日14:11
一下子收到三篇的pingback，原来出自你这里，呵呵
[回复]
Showfom 回复:
July 28th, 2009 at 15:41
@万戈, 你回上海了呀。。我还在上海瞎逛捏…………
[回复]
leehow 发表于2009年07月28日16:13
不管我的事...
[回复]
Showfom 回复:
July 28th, 2009 at 16:26
@leehow, Leehow 姐，一直找你捏。。。上线的时候Q一下我哦
[回复]
seri 发表于2009年07月28日16:59
洁癖的人还真是多啊。- -||| 之前也是很洁癖，直到几天热情褪去，就懒得折腾了 - -|||
[回复]
Showfom 回复:
July 28th, 2009 at 17:52
@seri, 昂……
[回复]
zEUS. 发表于2009年07月28日18:45
好文，收藏～
[回复]
Showfom 回复:
July 28th, 2009 at 19:14
@zEUS., 现在欣赏一下我的HTML代码，绝对吓死你嘎嘎
[回复]
zEUS. 回复:
July 28th, 2009 at 20:25
@Showfom, 最好不要把 JS 和 CSS 的引用放到正文 body 里，会影响机器人抓取文章内容..
[回复]
Showfom 回复:
July 28th, 2009 at 20:31
@zEUS., 没有呀，只放到head里呀，你看到的是Ajax评论的js~
[回复]
小峰JoysBoy 发表于2009年07月28日20:39
这些东西好高级啊，等我有时间也要好好学了弄下自己博客，速度那么慢
[回复]
Showfom 回复:
July 28th, 2009 at 20:47
@小峰JoysBoy, 啊……这个。。不高级的……
[回复]
小峰JoysBoy 回复:
July 28th, 2009 at 20:59
@Showfom, 对我来说还是有点高级呃，我都没研究过这些
[回复]
Showfom 回复:
July 28th, 2009 at 21:04
@小峰JoysBoy, 看得多就懂了哈哈
[回复]
小峰JoysBoy 回复:
July 28th, 2009 at 21:08
@Showfom, 恩，以后好好研究，等有空了，把你博客好好翻一遍
[回复]
shun 发表于2009年07月29日18:33
发现我的style.css有接近30k
[回复]
Showfom 回复:
July 29th, 2009 at 19:12
@shun, 囧那么大的css……
[回复]
shun 回复:
July 29th, 2009 at 19:33
@Showfom,
以前没考虑那么多，往里面丢了一堆东西。。
现在删了一部分，在用你推荐的csstidy精简了下
18k
[回复]
Showfom 回复:
July 29th, 2009 at 19:34
@shun, 帅吧~~
[回复]
zwwooooo 发表于2009年07月29日19:28
很不错的说，我把我的style.css从18.4k压缩到13.3k
[回复]
Showfom 回复:
July 29th, 2009 at 19:31
@zwwooooo, 压缩是好事情嘎嘎再 Gzip 之，传输过去就几KB而已
[回复]
bolo 发表于2009年07月31日16:49
有空我也去挤一挤乳沟，哈哈
[回复]
T-bag 发表于2009年08月1日19:03
我热用了之后反而更大了！
[回复]
Showfom 回复:
August 1st, 2009 at 19:09
@T-bag, 人品问题？囧
[回复]
Alex 发表于2009年08月2日21:02
刚才试了一下我的CSS文件，仅仅可以压缩5K，晕啊。。还有20几呢。。。
[回复]
晴空落叶发表于2009年09月15日20:51
我的CSS文件有23K，标准压缩减了2K不过页面导航的定义那出错了
[回复]
晴空落叶回复:
September 15th, 2009 at 20:53
@晴空落叶, 最小压缩也出错了。算了。
[回复]
chancat 发表于2009年11月1日23:33
。。我记得那句乳沟的话是这样说的..
时间就像女人的乳沟,挤挤还是有的
[回复]
Mr.Cantus 发表于2010年01月28日15:53
太好了。呵呵。我的博客就有点大。YUI是JAVA的，我也不会。谢谢你的分享了。我加你友情链接了，可以的话，你也把我的加上吧
[回复]
Showfom 回复:
January 28th, 2010 at 16:11
@Mr.Cantus, 不交换友情链接了~不加~
[回复]

Search