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请求是很浪费时间的,网页中每个对象的加载都要经过建立连接的过程,对象很多的话,累积的时间是惊人的。为此,可以:

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://blog.kangzj.net/what-is-tu-chuang/
做完这些之后可以评估一下加速的效果,看看加载时间是不是有显著的提高:
YSlow-kangzj.net1
PS:文中加的为很容易实现。
参考:http://developer.yahoo.com/performance/rules.html


Posted

in

by

Comments

27 responses to “html代码层次加速WordPress”

  1. 顺其自然吧 Avatar

    我也很想知道怎么优化博客www.lynongjia.com

  2. […] html代码层次加速WordPress – Kangzj […]

  3. 治疗近视眼的秘方 Avatar

    怎么优化博客呀,我怎么看不懂,与我交流www.aixeye.com

  4. […] html代码层次加速WordPress – Kangzj […]

  5. […] Yslow 提高网站加载速度里有这么一条:Used Cookie Free Domains , 大意是浏览器会对作用域内每个加载的对象传递 Cookie,在加载图像或者JS、CSS的时候最好用 Cookie-free 域名。如果没有多余的域名可以用一个子域实现,但是要设置 Cookie 的作用域才可以。(来自 Kangzj 的 《html代码层次加速 WordPress》)。 […]

  6. […] html代码层次加速WordPress – Kangzj […]

  7. 宝宝早教 Avatar

    能不能搞个插件合计啊.

  8. 意美 Avatar

    cookie那里看不懂.

  9. Leeiio Avatar

    第10条是错误的,这样的作用域还是.kangzj.net,依旧会污染所有子域。

    1. surda Avatar

      是的,这种cookie-free domains的定义只有用子域名做博客访问地址才有效(如:www.kangzj.net),因为顶级域名kangzj.net会向所有被请求的静态文件二级域名服务器发送cookies。

      1. kangzj Avatar

        说得对,要是首页也用个www的二级域名,而静态资源用别的二级域名就可以了

  10. […] Yslow 提高网站加载速度里有这么一条:Used Cookie Free Domains , 大意是浏览器会对作用域内每个加载的对象传递 Cookie,在加载图像或者JS、CSS的时候最好用 Cookie-free 域名。如果没有多余的域名可以用一个子域实现,但是要设置 Cookie 的作用域才可以。(来自 Kangzj 的 《html代码层次加速 WordPress》)。 […]

  11. […] Cookie 的作用域才可以。(来自 Kangzj 的 《html代码层次加速 WordPress》)。之前我都是用二级域名的形式来存储图片、JS 和 CSS […]

  12. […] 转载自Kangzj同名文章 原参考:http://developer.yahoo.com/performance/rules.html 评论 (0) […]

  13. […] 先从html代码层次加速WordPress说起,第10点 Used Cookie Free Domains  – 用不会传递Cookie的域名,大猫建议用加www的域名作为博客网址,不过Kangzj说可以在wp-config.php,用如下代码设置cookie的作用范围,这样子域名就是cookie free了 […]

  14. […] 加快加载速度。 […]

  15. houkai Avatar

    前几天 我用html压缩功能压缩了 页面变样了 最好手工做了些优化 🙄

    1. houkai Avatar

      @houkai, 错字真多 😕
      前几天 我用html压缩工具压缩了 页面变样了 最后手工做了些优化

      1. kangzj Avatar

        @houkai, 是我的错字吗?找出来几个已经修改了,呵呵

    2. kangzj Avatar

      @houkai, 什么html压缩功能啊?

  16. 纪小年 Avatar

    这个 很复杂
    有没有插件可以搞定的?

    1. kangzj Avatar

      @纪小年, 目前应该还没有这么牛的插件

      1. 纪小年 Avatar

        @kangzj, 你来设计个,我看好你哟

        1. kangzj Avatar

          @纪小年, 这个这个太难了,不是一般的难…

  17. zwwooooo Avatar

    怎么内容有点重复?

    1. kangzj Avatar

      @zwwooooo, 第一段在汇总的文章里也有,算是一个brief introduction

  18. […] 针对这三部分时间,我将加速的方法依加速的方式分成以下几类:php代码层次加速,html代码层次加速,服务器层次加速 ,鼓励你的用户放弃IE […]

Leave a Reply

%d bloggers like this: