优化你的 WordPress 之精简全站 HTML 代码（终极篇）

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

WordPress 优化，优化主题的代码是关键一步，但是，假如按照我们设想的，完全把 HTML代码 进行优化，可读性一定很差，不利于二次修改，所以，本次推出终极优化 HTML 代码之优化小王子 —— Autoptimize。

至于最终的效果，大家可以看我的博客源代码，首页的，页面的，文章的，是不是感觉很杂乱，但是显示出来的效果并没有任何差异，在这个节省流量的年代，哪怕是一个字节都会影响到整个网络（Google 语），仔细观察 Google、百度这些超大流量的网站，他们的源代码无一不是和我现在博客的源代码类似。

那么，怎么做到呢？总不至于人工去合成吧（废话，那得花多少时间呀！），这时候，我们的优化小王子 —— Autoptimize 插件登场，蹬蹬蹬蹬！

======

Autoptimize 的工作原理

通过优化HTML代码（去除不必要的空格、换行、注释）、CSS代码、JS代码，缓存起来，然后访问的时候输出，访客访问到的是经过优化后的代码，很大程度上节省了流量，同时作者推荐和 WP Super Cache 插件一起使用。Showfom 小帅锅的建议是，流量不足3000IP之前不用考虑 WP Super Cache，使用 Autoptimize 进行代码优化以后然后gzip输出之，就很完美了。

Autoptimize 安装使用方法

下载，上传，激活，后台设置，WordPress 的插件就是如此简单。

下载地址：http://wordpress.org/extend/plugins/autoptimize/ （或者通过后台搜索 Autoptimize 在线安装，中文版由 Donald 翻译，下载在此：http://zuoshen.com/2009/07/20/642/）

设置讲解图：

Autoptimize 忌讳几则

1、假如样式出错，就不要选择优化 CSS 代码，自己优化是个好方法；同样，假如功能出错，请不要优化 JS 代码，自己优化是个好方法，至于自行优化 CSS 和 JS 代码，参考前文：《优化你的 WordPress 之压缩 CSS/JS 代码（进阶篇补充）》。

2、一般情况下，优化 HTML 代码是不会出错的，原理只是删除了多余的空格、空行和注释而已，假如出错，请自行检查不该优化的代码并且写入 JS。

3、Autoptimize 的原理只是前台进行优化，后台编辑主题里的代码不用修改，所以对于网页设计师来说，为了防止别人抄袭代码也好，为了节省流量提高速度也好，这款插件实在是必不可少。

========

PS：有个PLMM问偶，Showfom 小帅锅，你的做法是什么？

答：我的做法和我给出的图解一样，只是优化了 HTML代码 而已，因为不太会出错，CSS 和 JS 都是我自行优化的，谢谢你的崇拜。

再次PS：请确定主题确定功能以后再进行 WordPress 的代码优化工作，优化切记备份，优化后，前台直接看源代码可读性不是一般的差，所以，谨慎优化。至于什么 Yslow 这些可有可无的测试得分之类的，见他妈的鬼去吧，我才不会吃的空把所有图片都合并成一张，要 CSS 里只输出一张图片是个很费精力的活，雅虎那个东西，自己的首页的代码都那么乱七八糟，我就不评价了，一般75分以上就没问题了，放国内的空间速度都刷刷的……

再再次PS：优化 WordPress 主题的代码系列文章到此结束，接下来我也要学学缓存插件之类的优化，不过貌似人气没那么高以前，我也是懒得用缓存插件的人，所以，下一篇系列文章就要在以后和大家见面了，嘎嘎~

已有94条评论

huaimao 发表于2009年07月28日20:04
哈哈！偶先来占位！
改天详细阅读！
章鱼发表于2009年07月28日20:08
板凳还是要做的
章鱼回复:
July 29th, 2009 at 23:01
@章鱼, 贱人
Showfom 回复:
July 31st, 2009 at 01:37
@章鱼, 自己骂自己贱人，哎……
ZH CEXO 发表于2009年07月28日20:08
我还是来晚了，下次给我沙花
magehao 发表于2009年07月28日20:10
都这么厉害···
洪涛发表于2009年07月28日20:10
真的有用么?
Showfom 回复:
July 28th, 2009 at 20:13
@洪涛, 你试试访问我的博客速度如何呗。
Cat. 发表于2009年07月28日20:12
现在追求的不是数据查询的多少了,是PHP执行的效率,这个才是关键啊...WP的执行效率太低了~
Showfom 回复:
July 28th, 2009 at 20:13
@Cat., 效率归效率，不是这个文章的重点，这个文章的重点是精简HTML代码，减少输出的体积嘎嘎
石老人发表于2009年07月28日20:12
好厉害，先mark一下，吃完饭回来研究一下
Cat. 发表于2009年07月28日20:13
不过你的网站在国内,已经很快了...你还真有空折腾啊~暑假真好
Showfom 回复:
July 28th, 2009 at 20:14
@Cat., 那是，追求用最少的字节来达到最美的效果，是我的目标嘎嘎~~
Cat. 回复:
July 28th, 2009 at 20:16
@Showfom, 我在想办法讲数据查询的速度将到0.1秒以下...看看DZ论坛吧..太恐怖了~
Showfom 回复:
July 28th, 2009 at 20:22
@Cat., DZ 的效率不是一般的好，PW 的也一样，其实我教你，用 DZ 的内核，做个符合博客的皮肤，然后……哦哈哈
icebugger 发表于2009年07月28日20:14
看了你blog的src，果然很乱很简短。。。
Showfom 回复:
July 28th, 2009 at 20:17
@icebugger, 乱米关系，只要效果对就可以了，这个插件最大的好处就是，后台主题管理里的代码是很完整的。
Cat. 回复:
July 28th, 2009 at 20:18
@Showfom, 嗯嗯,我知道吖,意思就是叫你去折腾这个...
icebugger 回复:
July 28th, 2009 at 20:21
@Showfom, 哇，这样的话就大赞了~
Donald 发表于2009年07月28日20:35
我是路过的。我强烈支持任何给我一个链接的朋友，嗯，特别是小锅～
章鱼发表于2009年07月28日20:37
强烈建议把sweet title和下面的无用工具栏关掉
Showfom 回复:
July 28th, 2009 at 20:51
@章鱼, 关你个毛。
章鱼回复:
July 29th, 2009 at 23:02
@Showfom, 加载JS是罪恶
章鱼发表于2009年07月28日20:38
你那个ST有个JS+CSS 我操
Showfom 回复:
July 28th, 2009 at 20:54
@章鱼, 本来就是js+css的，咋了，日。
章鱼回复:
July 29th, 2009 at 23:01
@Showfom, 慢死我日
Joya 发表于2009年07月28日20:48
外行慢慢研究中....
小峰JoysBoy 发表于2009年07月28日20:58
那个WP Super Cache我感觉也没啥用，主要我博客没多少人看
小明猪发表于2009年07月28日20:59
学习一下，不过你的那句"谢谢你的崇拜。".........我好囧
小猪vs蛋挞发表于2009年07月28日22:07
这些东西不知道要啃多久了，看了5分钟就看不下去了，汗,不过进步了，上次看了3分钟.....
Showfom 回复:
July 28th, 2009 at 22:40
@小猪vs蛋挞, 囧这次介绍的多简单，启动一个插件就是了。
小猪vs蛋挞回复:
July 28th, 2009 at 22:42
@Showfom, 所以偶看了5分钟，走马观花也算看完了，我汗...唉，学习真累....
Showfom 回复:
July 28th, 2009 at 22:53
@小猪vs蛋挞, 谁要你是文科生的嘎嘎
小猪vs蛋挞回复:
July 28th, 2009 at 22:56
@Showfom, 是啊，谁叫我是文科生的....啊啊啊啊啊啊
LAONB 发表于2009年07月29日00:35
这两天天热，没开QQ，竟然连板凳都没了。所有的SHOPEX的代码都是这样，不知道会不会影响蜘蛛爬行，最好模拟下蜘蛛的访问。
Showfom 回复:
July 29th, 2009 at 01:42
@LAONB, 影响个毛。自己爱测试就测试去。
LAONB 回复:
July 29th, 2009 at 09:58
@Showfom, 我才懒得测呢，看这乱七八糟的代码心情不爽
我爱娱乐人发表于2009年07月29日08:39
慢慢研究中
美国VPS推荐发表于2009年07月29日08:49
大早晨就占满座了，早起的鸟有虫吃啊
Dwin 发表于2009年07月29日09:34
有空俺也试试
久酷发表于2009年07月29日16:34
先来报个到哈,这里真热闹,你这是用的酋长的主机?
Showfom 回复:
July 29th, 2009 at 17:10
@久酷, 嗯国内的。
北方熊之舞发表于2009年07月29日17:44
做记号先~改天好好学习~
shun 发表于2009年07月29日17:48
Autoptimize真的很方便
不用瞎折腾
zwwooooo 发表于2009年07月29日18:56
貌似很不错的插件，试试去
zwwooooo 发表于2009年07月29日19:07
试了一下，貌似快了很多，只能优化html，优化css会出错。
Showfom 回复:
July 29th, 2009 at 19:09
@zwwooooo, 个别主题插件的话，js也可以的，css看主题写的css是否规范，不规范就出错了。
zwwooooo 回复:
July 29th, 2009 at 19:56
@Showfom, 我也不知道规不规范，反正通过css2.1验证。我现在用你另外介绍的工具给css瘦身。
Thinkqob 发表于2009年07月29日20:25
我装的插件够多多了不过这个还是可以试试的
回憶发表于2009年07月29日21:24
在群裏看見了，有時間搞下
牛雜檔CEO 发表于2009年07月29日22:49
不要说是你原创啊
Showfom 回复:
July 29th, 2009 at 23:32
@牛雜檔CEO, 你废话，本来就是我原创啊
Leeiio 发表于2009年07月30日00:31
使用中，感谢推荐。
Showfom 回复:
July 30th, 2009 at 00:42
@Leeiio, 记得检查是否会有错误，我昨天试过，阿里妈妈的广告就会显示不正常的
博译论发表于2009年07月30日03:04
歇斯底里的完美主义
顺便：日你学校，这么早开学
再顺便：beat it是开打还是开溜？！
Showfom 回复:
July 30th, 2009 at 16:42
@博译论, Michael Jackson 的 Beat It 嘎嘎这开学不早吧，20多号也。
365hope 发表于2009年07月30日08:52
Wordpress 优化，永远是个不朽的话题，因为大家都想更多地被搜索到的。
本文一些方法+技巧，还是非常使用的，研究研究吧！
另，兄弟有侧边栏上的'倒计时"非常漂亮，使用的是哪个插件啊？舍得公开一下吗？？
Showfom 回复:
July 30th, 2009 at 16:41
@365hope, 一个Flash而已，这个也要用插件的话也就太那啥了……
laofan 发表于2009年07月30日12:20
学习了，莫非你就是传说中的高手
快活林主人发表于2009年07月30日12:20
不错不错，哈，我研究研究
万戈发表于2009年07月31日06:41
我对这个很有兴趣，不是因为优化，是因为加密源码，不错不错
Showfom 回复:
July 31st, 2009 at 13:23
@万戈, 囧没加密呀只是删除不必要的空格和换行，然后优化了css和js的代码……
bolo 发表于2009年07月31日16:48
不如直接把所有代码都压缩了
simaopig 发表于2009年07月31日16:48
疯子，搞那么多优化干什么。嗯。。
妖狐闪现发表于2009年07月31日21:29
学习一下:-)
小Bee 发表于2009年08月2日13:47
我开启了 Autoptimize之后...邮件回复会失效...
Showfom 回复:
August 2nd, 2009 at 14:26
@小Bee, 别优化js即可我试过~~
小Bee 回复:
August 2nd, 2009 at 19:22
@Showfom, 你的邮件回复用哪个插件呢？
Showfom 回复:
August 2nd, 2009 at 19:54
@小Bee, 我是嵌套回复+回复邮件集一身的 WordPress Thread Comment
keelii 发表于2009年08月3日11:12
我都没优化过代码。做主题的时候一次搞定^!^
木頭龍发表于2009年08月5日20:00
啊哈哈，这个插件恰好帮我解决了头疼很久的cos html cache不缓存首页和page页的问题，只是效率没有那么高而已~
这个插件应该有缓存的吧~
哦啦~开心~
Showfom 回复:
August 5th, 2009 at 20:04
@木頭龍, 嗯，有缓存的啦哈哈
所以说发表于2009年08月14日14:49
WP Super Cache 我觉得小站也是有必要做的。。这个目的不是减少流量，是数据库查询量
Showfom 回复:
August 14th, 2009 at 16:32
@所以说, 大家都能这么做就好了。
风之幻龙发表于2009年08月15日17:35
看了你这几篇优化的文章，很实用，支持下～～
很喜欢你的写作风格的说，哈～
whisperer 发表于2009年08月15日20:04
这个℃蛮有创意~~
说起优化我就得汗颜了
抱着你们的教程回家啃去。。。
妖狐闪现发表于2009年09月4日09:37
哈哈，太好了，这样我就不用每次改完js再去压缩了。
whisperer 发表于2009年09月19日16:17
成功减小了5KB，汗~~~~
来看下lss~~
善用佳软发表于2009年09月19日20:22
看了一下源代码，果然与众不同。
一方面增加华丽的效果，一方面精简代码，这是怎样的一种折腾精神啊！
Showfom 回复:
September 19th, 2009 at 20:37
@善用佳软, 无折腾不人生~
chancat 发表于2009年11月1日23:42
汗,原来是作甚这家伙汉化的。、。
chancat 发表于2010年01月3日22:24
我想知道怎么卸载它
Showfom 回复:
January 4th, 2010 at 15:18
@chancat, 直接停用就卸载了
chancat 发表于2010年01月6日21:50
那么简单还用问你么 - -！被定义死了我换玉米换主机 OVER
凸 MJJ 话说你和酋长一样猥琐
离鸣发表于2010年01月7日10:52
谢谢分享，我也用了这个插件
灵亦rEd 发表于2010年06月5日14:29
不错的文章。。表情也很不错。。表情怎么弄的哦
周哥哥发表于2010年07月30日21:31
我的网站4399nn.com使用Autoptimize结果头部文件错误，难道是空间的问题？
yesureadmin 发表于2010年09月17日11:00
哥们是不是只优化了html?并且现在还在使用着？
普罗旺斯发表于2010年12月27日14:57
请问博主，你的评论和留言板的那些表情符号怎么加的呢
囧啊囧发表于2011年01月24日01:04
我安装上试试看
hit9 发表于2011年11月6日20:45
这个插件生成的缓存得定期清理~~~