January 8, 2009
WordPress 提速一二三
WordPress 提速一二三
现在越来越不喜欢写长篇大论，主要是自己语文太差（初中时代语文曾经不及格，亏我还是语文课代表），字一多就组织不好。写的人痛苦，看的人痛苦，不如简短点尽自己的能力表达清楚算了。正文开始。
这篇关于 WordPress 提速的东东并不是提速大全，时间有限，我只写刚刚拍脑袋想到的几点，罗列如下：
尽量减少图片
这点应该不需要证明吧，“显然”就可以得出这个结论。稍不留神，某个图片的体积就可能大过了整个 HTML 文档，这也是我摒弃 header 图片的一部分原因。不过你的设计依赖于大型图片，忽略此条。
尽量减少数据库查询
数据库查询是很费时间的，某些不必要的 WordPress 插件还是不要装了，或者精心挑选实现同样功能但查询次数更少的。我之前使用的显示最新留言的插件比现在的要多出 17 个查询，目前首页的数据库查询次数总共才 25。在模板的 footer.php 或其它任意不起眼的地方加入下面这行代码显示生成这一页面消耗的数据库查询次数。
压缩 CSS 和 JavaScript
1. 清理 CSS
CSS 可以在线使用 CSSTidy 清理一下，可以减少很多不必要的冗余（如：空格、换行等等），尤其在选择“最差可读性”之后，整个 CSS 文档内容压缩为一行。但清理前请务必备份原始 CSS 文件，一是为了方便以后修改，二是有些选项使用不当会完全破坏 CSS。强烈建议使用最保守的清理方式。
2. 打包 JavaScript
JavaScript 脚本可以使用 packer 压缩，去除空格、换行后变为一行；勾选 Base62 编码将会压缩为更小的格式，但如果接下来你还想继续使用 gzip 进一步压缩 JavaScript，不推荐 Base62，实践证明普通 packer + gzip 才是最佳拍档。
3. 使用 gzip 进一步压缩
Gzip 是一种非常优秀的压缩方式，详细信息可以自行阅读 gzip home。使用 gzip 压缩 CSS 和 JavaScript 需要服务器支持 gzip，压缩 CSS 的方法与压缩 JavaScript 的方法基本是一样的，注意把 Content-Type 设置为 text/css。这里还运用了另外一个提速的技巧：强制性的浏览器缓存。
尽量减少 HTTP 请求数
HTTP 请求是很费时间的，主要花费（浪费）在建立连接的过程中。真正传输 1K 和 10K 数据的时间相差无几，但哪怕你请求的是一个仅有几字节的东东，一样需要花费可观的连接时间。
CSS Sprites 和 Inline Images with Data URLs 就可以帮上大忙了。
CSS Sprites 的思想是把很多张小图片（如：图标）整合为一张大图，再利用 CSS 的 background-position 属性在正确的地方显示正确的图标。这样的好处就是把原来的 n 个 HTTP 请求减少至 1。
Inline Images with Data URLs 的思想是干脆直接把装饰性的小图片写在 CSS 或 HTML 中，不需要 HTTP 请求。当然不能直接在文本中写二进制的 0101，但经过 base64 编码后就可以了。基本的用法是：
例：
可以借助 PHP 来生成 base64 的图片内容：
那么 CSS 就可以写成下面的样子：
Inline Images with Data URLs 的局限：
- IE 5-7 不支持，IE 8 据说会支持。为了兼容 IE，把这些部分单独写入 IE 专用的 CSS 文件中。具体可以查看本站使用的两个样式表。
- 文本形式的图片占用比二进制更多的字节。Base64 格式比二进制大 39%~45%，在 gzip 压缩后，这个比例减小至 8%~9%。最好在 base64 编码之前优化图片本身。
- 浏览器对 inline 图片有大小限制。Opera 最大支持 4,100 字节，Firefox 最大支持 100K。所以最好只应用在小图片上。目前本站在 6 个小图片上使用了该技巧。
补充一点：CSS Sprites 和 Inline Images with Data URLs 是可以同时使用的。
全站静态化
关于全站静态化，似乎已经讨论过很多（人）次了，这里不再赘述。
结语
本文最后声讨一下百毒图片搜索，搜索“新干线”的结果为什么都是商品房，难道图片也用来竞价了？？
沙发！！技术都挺实用的！
不过那个强制浏览器缓存，如果改的比较频繁的话有时候浏览器不更新，蛮郁闷的，呵呵！！
最近一直在学习WP的相关知识.所以，感谢分享！
@xiaorsz 貌似 CTRL + F5 可以强制刷新缓存：）
@adomit 欢迎交流！
主题又修改了下啊，比从前好看多了
background-position 属性 这个方法不错。学习了！
基本上问题都讲到了，不过要全做到还真不容易
数据库查询那行我还不知道怎么用呢？我加入到模板了，但是好像没有看到查询次数，是在源代码看吗？还是说直接会在页面上显示？
现在这个主题很漂亮
我现在发现，无论再优化，还是不如服务器在国内快。。最主要的还是线路问题。另外，静态化之后其实不用考虑查询问题了。
我来放点厥词：经过长时间地折腾，我觉得，提高效率啥的，都是geek们的游戏而已。不必太追求这个东西了~~经过一系列步骤，速度提升不超过10%~~与其那样，不如换一个虚拟主机，单页载入速度提高个几秒都不奇怪的。
已经知道了呵呵，日志页居然有35个
@blankyao 谢谢夸奖，大家多提点意见我尽量往好了改，呵呵。
@老N CSS 有好多小东西挺实用的。
@Poshi ：）
@Shawn 是的，我这个再提速也比不上国内的主机快。但如果我不优化，相信没人愿意来我这里了，07 年的时候我测试过，打开我的首页需要 70 多秒，线路确实是个大问题。
是的。静态化后，数据库查询的压力几乎减少至忽略不计，影响的也只是第一次生成页面的时候。
@Charles 呵呵，你说的有一定道理。不过我在国外主机上能达到目前这个速度已经很满意了，这确实得归功于上面那些手段。
@北极冰仔
是啊，但是用户不会去强制刷新，以为出错了呢！！呵呵！
还是折腾啊，总有说不完的话题，关于速度。
@xiaorsz 如果这么说，确实是个问题哈。
@Jinwen 哈哈，原来的太丑了，这是折腾的动力源泉。
赞一下,尤其是那个BASE64的PHP编码语句,3Q!
@NetPuter 欢迎常来交流！
去查查有多少请求。感谢分享
不知道我用了shadowbox-js 还可以再压缩一次么？？
我总是觉得很慢
学习了
减少图片、减少数据库查询，以及CSS、JavaScript外调
都是有效提速的方法
减少 HTTP 请求数, 這招強, 學習…
我只减少了数据库查询和优化CSS文件，JS压缩有点危险，懒得去动，而gzip自身很占资源。。。不到万不得已，一般不使用- -
很技术，很实用，赞一个。优良的模板也很重要
推一個，我也正在弄新的主題，也是把許多小圖合併成一張大圖，利用CSS技巧呈現。
之前有留意到, 一些網站用一張大圖來處理所有小圖標, 今天才知道這是CSS Sprites技術…
基本上都是这几招