Kangzj
记录技术和生活~html代码层次加速WordPress
相比php代码层次加速WordPress，html层次上的优化更加重要一些。因为现在的服务器配置都很牛，php执行效率也很高，除非你的WordPress插件多得太离谱，在速度上一般是不会有太多大的影响的（基本上1m以内可以执行完）。而html代码决定了WordPress加载的速度，浏览你博客的速度在很大程度上是这个因素决定的（在同样的网络环境下），用户加载网页的时间有80%花在这上面。要想你的WordPress飞速跑起来，html层次的优化是非常必要的。
1. 使用的工具-YSlow
Why Slow是雅虎制作的用来检测你的网站为什么会加载慢的FireFox插件，html层次的优化还要以它作为指导。下面就以YSlow检测的各个方面，也就是html层次加速的各个方面展开描述。
2. Make Fewer HTTP Requests – 减少HTTP请求的数量 ※
这是加速你的网页的关键，HTTP请求是很浪费时间的，网页中每个对象的加载都要经过建立连接的过程，对象很多的话，累积的时间是惊人的。为此，可以：
- 合并JS，CSS文件。一般来说，每个站都有一套css和js，在每个页面都要加载，合并会给整个站加速。
- 合并切割成小块的图像。
- 在CSS里设置背景图像。
- 区分每个页面加载的css和js，在需要的时候再加载。可以参考林木木：《小站提速手记之 —— 按需加载 CSS》和万戈：《WP 提速之按需合并压缩 JS 文件》
3. Compress Components With Gzip – 用Gzip压缩网页 ※
这项属于php代码层次加速的范畴，请稳步查看。
4. Put CSS at Top & Put Js at Bottom – 把CSS放在开头，把JS放在结尾 ※
Yahoo!的统计表明，把CSS放在开头的话可以加快网页渲染的速度。JS文件一般来说较大，而浏览器同时下载元素的数目是有限制的（IE好像是6个），大的JS文件会妨碍其它重要元素的加载。但是有时JS文件中含有document.write等代码，不能放在网页最后也是没有办法的事情。如果JS放在开头而又不想浏览器先加载的话可以用deferred属性，可以起到跟放在网页结尾一样的效果，但是FireFox并不支持这一属性。
5. Avoid CSS Expressions – CSS中不要使用表达式
CSS是一种十分强大的工具，它可以支持动态的表达式。CSS中的表达式会造成很严重的问题，它们不只在网页加载的时候进行运算，甚至在用户动鼠标的时候也会计算。CSS可以统计表达式被运行的次数，在网页上经常动鼠标引起的表达式的运行会达到10,000之多，运行次数数量之大让人吃惊。
6. Make CSS and JS External – 不要把CSS和js直接写入网页中，应加载外部
因为CSS和JS浏览器一般会有缓存，不必每次都从服务器加载，并且也可以减少每个网页的体积。
7. Reduce DNS Lookups – 减少DNS查询的数量
DNS查询也是需要时间的，一个网页中加载的元素最好不要使用太多不同的域名。
8. Minify Javascript and CSS – 去除JS和CSS中的冗余
减小JS和CSS体积以减少加载时间，这个很好理解。参考万戈：《用 Page Speed 检测多余的 CSS》
9. Avoid URL Redirecting – 减少重定向
重定向增长了加载时间，降低了用户体验。
10. Used Cookie Free Domains – 用不会传递Cookie的域名 ※
浏览器会对作用域内每个加载的对象传递Cookie，在加载图像或者JS、CSS的时候最好用Cookie-free域名。如果没有多余的域名可以用一个子域实现，但是要设置Cookie的作用域才可以。打开wp-config.php：
define('COOKIE_DOMAIN', 'kangzj.net');
把kangzj.net换成你博客的域名，这样你的所有子域就Cookie-free了。
11. 外部加载部分元素 ※
外链不但可以节省流量，而且可以利用优势的服务器资源，给WordPress加速。
(1) 从Google加载JQuery库：
或者：
如果加载别的库可以点击这里查看：http://code.google.com/apis/ajaxlibs/documentation/index.html
(2) 做个图床，外链图片： http://kangzj.net/what-is-tu-chuang/
做完这些之后可以评估一下加速的效果，看看加载时间是不是有显著的提高：
PS：文中加※的为很容易实现。
参考：http://developer.yahoo.com/performance/rules.html
© 2009, kangzj. 版权所有.
十月 12th, 2009 at 14:39
[...] 针对这三部分时间，我将加速的方法依加速的方式分成以下几类：php代码层次加速，html代码层次加速，服务器层次加速 ，鼓励你的用户放弃IE [...]
十月 12th, 2009 at 23:05
怎么内容有点重复？
[回复]
kangzj 回复:
十月 12th, 2009 at 23:25
@zwwooooo, 第一段在汇总的文章里也有，算是一个brief introduction
[回复]
十月 13th, 2009 at 13:37
这个 很复杂
有没有插件可以搞定的？
[回复]
kangzj 回复:
十月 13th, 2009 at 14:18
@纪小年, 目前应该还没有这么牛的插件
[回复]
纪小年 回复:
十月 14th, 2009 at 12:42
@kangzj, 你来设计个，我看好你哟
[回复]
kangzj 回复:
十月 14th, 2009 at 12:59
@纪小年, 这个这个太难了，不是一般的难…
[回复]
十月 14th, 2009 at 09:44
前几天 我用html压缩功能压缩了 页面变样了 最好手工做了些优化
[回复]
houkai 回复:
十月 14th, 2009 at 09:45
@houkai, 错字真多
前几天 我用html压缩工具压缩了 页面变样了 最后手工做了些优化
[回复]
kangzj 回复:
十月 14th, 2009 at 11:11
@houkai, 是我的错字吗？找出来几个已经修改了，呵呵
[回复]
kangzj 回复:
十月 14th, 2009 at 11:10
@houkai, 什么html压缩功能啊？
[回复]
十月 29th, 2009 at 06:09
[...] 加快加载速度。 [...]
十二月 16th, 2009 at 23:11
[...] 先从html代码层次加速WordPress说起，第10点 Used Cookie Free Domains – 用不会传递Cookie的域名，大猫建议用加www的域名作为博客网址，不过Kangzj说可以在wp-config.php，用如下代码设置cookie的作用范围，这样子域名就是cookie free了 [...]
一月 13th, 2010 at 14:21
[...] 转载自Kangzj同名文章 原参考：http://developer.yahoo.com/performance/rules.html 评论 (0) [...]
一月 22nd, 2010 at 20:06
[...] Cookie 的作用域才可以。（来自 Kangzj 的 《html代码层次加速 WordPress》）。之前我都是用二级域名的形式来存储图片、JS 和 CSS [...]
一月 23rd, 2010 at 17:33
[...] Yslow 提高网站加载速度里有这么一条：Used Cookie Free Domains ， 大意是浏览器会对作用域内每个加载的对象传递 Cookie，在加载图像或者JS、CSS的时候最好用 Cookie-free 域名。如果没有多余的域名可以用一个子域实现，但是要设置 Cookie 的作用域才可以。（来自 Kangzj 的 《html代码层次加速 WordPress》）。 [...]
二月 8th, 2010 at 09:18
第10条是错误的，这样的作用域还是.kangzj.net，依旧会污染所有子域。
[回复]
surda 回复:
八月 10th, 2010 at 10:01
是的，这种cookie-free domains的定义只有用子域名做博客访问地址才有效（如：www.kangzj.net)，因为顶级域名kangzj.net会向所有被请求的静态文件二级域名服务器发送cookies。
[回复]
kangzj 回复:
八月 10th, 2010 at 16:01
说得对，要是首页也用个www的二级域名，而静态资源用别的二级域名就可以了
[回复]
十月 11th, 2010 at 09:50
cookie那里看不懂.
[回复]
十月 29th, 2010 at 09:50
能不能搞个插件合计啊.
[回复]
十二月 3rd, 2010 at 20:25
[...] html代码层次加速WordPress – Kangzj [...]
二月 6th, 2011 at 21:36
[...] Yslow 提高网站加载速度里有这么一条：Used Cookie Free Domains ， 大意是浏览器会对作用域内每个加载的对象传递 Cookie，在加载图像或者JS、CSS的时候最好用 Cookie-free 域名。如果没有多余的域名可以用一个子域实现，但是要设置 Cookie 的作用域才可以。（来自 Kangzj 的 《html代码层次加速 WordPress》）。 [...]
四月 19th, 2011 at 14:09
[...] html代码层次加速WordPress – Kangzj [...]
五月 27th, 2011 at 16:57
怎么优化博客呀，我怎么看不懂，与我交流www.aixeye.com
[回复]
七月 21st, 2011 at 17:28
[...] html代码层次加速WordPress – Kangzj [...]