CQ-CSER

计算机爱好者

优化你的 WordPress 之精简 HTML 代码（进阶篇）

Posted on | 十一月 20, 2009 | 1 Comment

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

 

1、Header.php 精简

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

(PS:删除 <?php wp_head(); ?> 以后 All in One SEO 插件的 <meta> 关键词和描述功能将失去作用，可以自行  SEO ，WP-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）

就为了这个华丽花哨的图片效果，就要载入近 200KB 的 js 文件，值得么？访客愿意花上好几秒钟先把这四个 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 的插件，比如 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 文件都 include 到 all.js.php ，然后在 header 里面包含 all.js.php 文件即可：

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

5.使用 gzip 进一步压缩

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

当然，还可以直接通过精简代码压缩 css 和 js ，做到最大化精简，参考文章有：

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就像是在 ML 。 ML 希望什么？持久？高潮迭起？每当一段代码不合适，然后千方百计去换个更好的，浪费时间不说，脸还鳖得通红，像不像高潮快到的时候？那么……就差射精咯？但是，搞出来的代码偏偏和射精有差异，你以为真的射出来的是浆糊呀？搞出来的代码希望时间越短，代码越少……而射出来的精子却希望时间越长，精子越多，我有好几亿呢！

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

相关文章:

  1. backbox
  2. How to: Display any rss feed on your WordPress blog【Z】
  3. 给你的 WordPress 加一个音乐播放器
  4. jQuery插件jmpopups弹出多级窗口
  5. 不用任何插件实现 WordPress 的彩色标签云
Category: IT, WEB
Tags:

评论|Comments

One Response to “优化你的 WordPress 之精简 HTML 代码（进阶篇）”

  1. 钛锌复合板
    十二月 21st, 2009 @ 10:52

    学习，学习

留言|Leave a Reply





  • Archives

  • SUNSHINE

    • About

    本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

    订阅

    Search

    Admin