优化你的 WordPress 之精简 HTML 代码(进阶篇)



真是不用不知道,一用吓一跳,今天看了 Lightbox 2 的代码才知道,需要用到 4JS ,总共将近 200 KB……所以,我义无反顾地把 Lightbox 2 禁用,本文将以及其猥琐的语言简单描述如何精简你的 WordPress 模板。

1、Header.php 精简

很多插件都是需要加载 jscss 的,而且默认就直接放到了 <?php wp_head(); ?> 函数里,这样做只是为了适合大众的主题,在个性化打造、精简自己的 WordPress 主题时,完全可以把主题目录里的 header.php 中的 <?php wp_head(); ?> 删除,而采用自己添加 jscss

(PS:删除 <?php wp_head(); ?> 以后 All in One SEO 插件的 <meta> 关键词和描述功能将失去作用,可以自行  SEOWP-PostViews 也会失去作用,目前头大中……)

由于 HTML 语言和大多数语言一样,采用的是自上而下的顺序,假如头部的 js 太大,那么访问者一开始就会花上几秒甚至十几秒钟的时间来加载你的 js 文件,同样适用 css 。那么,怎么精简呢?我的做法有五点:

1.别去用花哨功能的插件

比如上文提到的 Lightbox 2,启动这个插件,默认就会载入四个 js ,分别是

/wp-includes/js/prototype.js(121KB)
/wp-includes/js/scriptaculous/wp-scriptaculous.js(2.6KB)
/wp-includes/js/scriptaculous/effects.js(38.1KB)
/wp-content/plugins/lightbox-2/lightbox.js(20.8KB)

就为了这个华丽花哨的图片效果,就要载入近 200KBjs 文件,值得么?访客愿意花上好几秒钟先把这四个 js 加载完毕再等待正文的出现么?所以我的做法是直接把 Lightbox 2 禁用,当然,假如你非得使用,那么,请把上述四个 js 文件放到 footer.php ,别忘了还有一个 css ,下文会提及。

2.把 js 放在 footer.php 而不是 header.php

除了必要的几个需要加载在头部的文件(比如 css ),其余的实际上都可以放在底部,这样不但美观,而且 js 放在底部是不会影响整个网站的,在整个网页加载完毕以后照样完整显示效果,当然,这里必须注意次序问题,有些 js 的次序千万别颠倒,否则就没法使用,比如本站使用的 Sweet Titles 里的两个 js 文件的次序。

3.使用 Google Code 储存你的js

你的服务器带宽再怎么好,总比不上 Google 吧?所以,个人用户推荐把一些 js 文件直接放在 http://code.google.com/ 当中,比如,你很想使用 Lightbox 2,那么我已经帮你上传好这四个 js ,只要在 footer.php</body> 前插入

<script type="text/javascript" src='http://showfom.googlecode.com/files/prototype.js?ver=1.6"></script>
<script type="text/javascript" src="http://showfom.googlecode.com/files/wp-scriptaculous.js?ver=1.8.0"></script>
<script type="text/javascript" src="http://showfom.googlecode.com/files/effects.js?ver=1.8.0"></script>
<script type="text/javascript" src="http://showfom.googlecode.com/files/lightbox.js?ver=1.8"></script>

然后加载一个 css 效果,比如

<link rel="stylesheet" href="/wp-content/plugins/lightbox-2/Themes/Dark Grey/lightbox.css" type="text/css" media="screen" />

然后启动 Lightbox 2 插件,记得把 header.php 里的 <?php wp_head(); ?> 删除

4.合并你的 js 和 css

合并 css 很简单,你可以通过查看源代码,把一些 .css 结尾的文件内容全部复制到主题目录的 style.css ,当然还有一些直接输出 css 的插件,比如 WordPress Thread Comments ,把直接输出的 css 也一起复制到 style.css 中,尽量保持整个页面只加载一个 css ,不但提高了效率,而且还可以一起压缩 css ,何乐而不为?

合并 js 就有点麻烦,因为必须考虑次序问题,你可以使用阅微堂提供的方法 (一下内容来自 Gexiaofei.com):

建立一个新的 all.js.php 文件,内容是:

<?php

require_once('&#30446;&#24405;/wp-blog-header.php' ) ;

include ("/a.js" ) ;

include ("/b.js" ) ;

?>

就是将 header.php 里面的那些 js 文件都 includeall.js.php ,然后在 header 里面包含 all.js.php 文件即可:

<script xsrc="/all.js.php" type="text/javascript" />

5.使用 gzip 进一步压缩

这个就不做多少介绍,Nginx 默认配置就开通了 gzip ,假如是 Apache 的主机,可以通过修改 .htaccess 或 使用 Hyper CacheWP Super Cache 等插件辅助使用 gzip 功能,网上文章一大把,自己 Google 学习之。

当然,还可以直接通过精简代码压缩 cssjs ,做到最大化精简,参考文章有:

CSS 压缩与优化工具

Good Online JavaScript Encoding & CSS Compression tools

OK,头部的信息就尽量很简洁了。接下来说说底部

2、Footer.php 的精简

和头部一样,通常大多数主题会在 footer.php 增加一个 <?php wp_footer(); ?> 以适应各种插件,比如 WordPress.com Stat 插件就是把统计代码直接加在 <?php wp_footer(); ?> 里。

但是这么做就会增加一次数据库查询,所以,我的做法就是直接删除 <?php wp_footer(); ?>

而且还可以参考上面的方法,把一些没必要开头就加载的 js 文件放在头部,放到 footer.php 是个很好的选择,而且,尽量把 footer.php 里没用的代码全部删除,当然不包括主题作者遗留的信息,尊重版权就必须以超链接形式完整保留作者的网站。

3、HTML 代码的精简

Hyper Cache 插件里有一个 Optimize HTML 功能,能清空源代码中不需要的空格,谨慎使用,假如你和本站一样使用<pre></pre>代码标签,那么就别用了。

另外,多学习一些 HTML 知识,推荐一个介绍 HTML 代码压缩的工具网站:网页压缩

4、淫荡的时间到咯

说了那么多,只要多去尝试,相信你一定能做出一个大概两三秒就能加载完毕的首页,那么,就让淫荡的语言再来总结一下吧:我知道某某同志们喜欢看这段。

说起敲网页编程代码,HTML PHP ASP 之类的,真TM就像是在 MLML 希望什么?持久?高潮迭起?每当一段代码不合适,然后千方百计去换个更好的,浪费时间不说,脸还鳖得通红,像不像高潮快到的时候?那么……就差射精咯?但是,搞出来的代码偏偏和射精有差异,你以为真的射出来的是浆糊呀?搞出来的代码希望时间越短,代码越少……而射出来的精子却希望时间越长,精子越多,我有好几亿呢!

下次有空继续,本文能无条件转载,记住,淫荡的人生,是不需要解释的……

相关信息

WordPress JAM

已有28条评论

  1. Yacca CHINA Mozilla Firefox Windows 发表于2009年05月11日15:55

    接下来是讲缓存了么?!^^

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @Yacca, 等这个小博客的流量大了再讲 哈哈 :mrgreen:

    [回复]

  2. mg12 CHINA Mozilla Firefox Windows 发表于2009年05月11日18:43

    原来 Lightbox 2 这么猛. :shock:
    建议讲讲如何优化页面结构以减少标签数量. 哈哈~

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @mg12, Highslide相对要用到的js小了不少,看来以后又要回归HighSlide了额……

    [回复]

  3. 任平生 CHINA Google Chrome Windows 发表于2009年05月11日18:58

    不错的教程 :wink:
    貌似我这个主题都符合你的写这个教程哈 :grin:

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @任平生, 嗯 本来就是为这个主题量身定做的。

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @任平生, 小白鼠,试试邮件收到没

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @任平生, 再试试邮件收到没

    [回复]

  4. LAONB CHINA Internet Explorer Windows 发表于2009年05月11日19:02

    我看到了淫荡的一段,够IN。

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @LAONB, 下次来个 High 点的

    [回复]

  5. Sivan CHINA Mozilla Firefox Windows 发表于2009年05月11日20:29

    优化的再好,网页里一堆图一样慢。今天我优化了一下新主题的CSS,优化了半天才2-3K,我何必呢,少用一个图片得了。
    我的观点:1、运行速度优化,少用插件,能省则省。
    2、页面文件优化,你说的这些优化JS、CSS之类的。

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @Sivan, :lol: 同感

    [回复]

  6. 流星 CHINA Google Chrome Windows 发表于2009年05月12日14:27

    没有任何基础的时候,还是不会优化

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @流星, 流量少的时候也不用怎么优化,大了以后不优化都不行……

    [回复]

  7. shamas CHINA Internet Explorer Windows 发表于2009年05月12日15:52

    以前我也是挖空心思优化,后来一换主题又完了,所以现在维持现状

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @shamas, :lol: 经常换主题对SEO不好,除非是只换了个css……

    [回复]

  8. ponytail CHINA Mozilla Firefox Windows 发表于2009年05月22日10:28

    :mrgreen: 最近刚Yslow调整了一下站子,做精简的效果真的蛮明显的~~

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @ponytail, :cool: 肯定的嘛

    [回复]

  9. Await CHINA Internet Explorer Windows 发表于2009年06月13日19:28

    写得不错。可以考滤用lytebox代替lightbox。

    lytebox只有一个文件。

    [回复]

  10. 西贝小鱼儿 CHINA Mozilla Firefox Windows 发表于2009年06月21日23:20

    小屋打扮的不错,希望继续努力!
    支持下!

    西贝小鱼儿 敬上
    :grin:

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @西贝小鱼儿, 谢谢支持哈哈

    [回复]

  11. 章鱼 CHINA Internet Explorer Windows 发表于2009年06月26日20:51

    用all in one seo 百度会不收录

    [回复]

    Showfom CHINA Mozilla Firefox Windows 回复:

    @章鱼, 没这回事,别听他们瞎说,只要别把no index打钩即可。

    [回复]

  12. 章鱼 CHINA Internet Explorer Windows 发表于2009年06月26日20:53

    操 有得好学了 合并图片 合并JS 合并CSS gzip之
    google也不敢放了

    [回复]

  13. leee CHINA Google Chrome Windows 发表于2010年03月3日17:40

    WP-PostViews 也会失去作用

    这个怎么解决?

    [回复]

欢迎写下您的评论,其中 * 为必填项目

这里写下你想说的话

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


Follow us on Twitter