加快WordPress的页面生成和载入速度

zhiqiangAugust 26, 2006 IT技术

前一阵，此blog的页面打开速度慢的要命，我每次打开都需要大约10秒钟的时间。而通过Google Analytics的数据看到，70%+用户在这个blog的停留时间还不到十秒:(。所以我决定加速一下我的blog，后来看起来似乎有些效果。下面是我用的一些方法，希望对后来人有些用处。

安装WP-Cache 2.0

WP-Cache 2.0可以将页面缓存，在短时间内(默认为1个小时，可以在后台设置)的再次浏览，将直接发送缓存的页面，相当于将WordPress给静态化了。

好处是显然的。而且这个版本的WP-Cache 2.0在缓存的时候根据页面URL+Cookie进行缓存的，所以它不会影响COOKIE的使用。注意，WP-Cache 2.0只读取Cookie中的email地址，然后根据email地址判定是否属于同一个用户。由于大多数人都没有留下Email，所以我修改成根据Cookie中的用户名来判断，将插件目录下的wp-cache-phase1.php的第67行改成：

//if (preg_match("/^wordpress|^comment_author_email_/", $key)) {
if (preg_match("/^wordpress|^comment_author_/", $key)) {

由于大部浏览者的cookie都是空的，所以这个插件会加快这大部分的浏览速度。另外，这个插件还会侦测文章更新，实时更新缓存等。

但是缺点也是显然的。首先，在页面还没有生成的时候，就进行COOKIE的读取和交换，将降低速度，某种程度上来说，它使得头次浏览的速度更慢。再者，这个插件在运行的时候，还是得先把其他插件初始化，所以它只是减少了页面生成的函数调用的时间。

效果：不明显。事实上，这个插件主要是用来降低系统CPU占用量的，对页面载入速度影响有限。

改善插件

我并没有安装太多插件，而且都是些小型的插件，从来不装像UTW那样的巨无霸插件。但是我还是把那些非插件必须的文件(大部分是我修改插件的时候新加的)都移出插件目录。以免WP错把它们当成插件文件进行初始化处理。

效果不明。因为经过处理的文件不多也不大，想必影响有限。

页面静态化

一个不变的事实是：html页面永远要比php页面快的多，而且几乎不占用CPU资源。所以将页面静态化是一个好主意。但将所有页面静态化，没有这个必要。所以我选择了将blog主页进行静态化处理——各位如果不信的话，直接页面刷新，然后看一下右边的随机文章变了没有:)。

我同学告诉我页面静态化有很多种方法，但我决定采用最土的一种方法：

首先，在根目录下建立一个cron.sh文件，里面的内容是：

wget -O /home/aaaa/zhiqiang.org/blog/index.html http://zhiqiang.org/blog/index.php

上面的/home/aaaa是我的根目录，其中aaaa是用户名。再使用Fterm SSH登录远程主机，输入

crontab -e

在出来的编辑界面中输入

*/10 * * * * /home/aaaa/cron.sh

再保存就OK了。这样，系统会自动地每10分钟一次将blog的动态主页index.php转成静态的index.html，以后访问主页的时候就会直接访问index.html，从而实现了blog主页面的html静态化。

缺点：COOKIE失效。不过山人自有妙计，使用javascript本地读取COOKIE然后填入表格即可。

效果：明显。

合并JS和CSS文件

浏览页面的时候，把页面保存下来，便能看到这个页面含有的文件。文件太多，会大大降低浏览速度。而WordPress的插件系统使得JS和CSS文件很多，所以，应当合并一下JS和CSS文件。

手动合并是一个方法，但是容易弄错，而且不太好修改。另一个方法是建立一个新的all.js.php文件，内容是：

<?php
require_once('目录/wp-blog-header.php' ) ;
include ("/blog/a.js" ) ;
include ("/b.js" ) ;
?>

就是将header.php里面的那些js文件都include到all.js.php，然后在header里面包含all.js.php文件即可：

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

另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过add_action('wp_head','fun' ) ;这样的钩子添加到head里面的。在fun函数的定义处去掉对应的代码，或者直接把这条语句删除即可。

对CSS文件也可以用同样的处理方式。CSS文件一般都不多，这时候可以直接手动把它们都贴到一起。

另外js文件的载入位置也很重要，放在越后面越好，让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。

效果：非常明显。

另外，太多的图片也会降低载入速度，而我这个模板的图片就比较多，而且我已经把能不用的图片去掉了。想着是不是该换模板了。

WordPress相关 WP-Cache 2.0 优化 加速 静态化

你可能感兴趣的

At 2006.08.26 16:13, Xujin said:

合并JS和CSS文件真的很明显？晚上一定要回去试试了

[Reply]
- At 2007.02.25 14:38, Chaney said:
  
  我今天按照你说的把js和css给合并了。
  效果很不错！
  
  [Reply]
At 2006.08.26 17:58, stee said:

启用wp-cache后,我的maxthon有时候打开blog就显示打开完成.但是是个空白界面,需要刷新才行.所以我已经停止使用这个插件了.今天访问你的blog也出现了这样的情况.是为什么呢?插件的原因,还是浏览器的原因?

[Reply]
- At 2006.08.26 18:20, zhiqiang said:
  
  我现在已经把WP-Cache卸载了。但是我以前用的时候也没有出现你说的那种情况。你今天在我这里碰到这种情况，可能恰好是后台在进行每10分钟一次静态页面更新。
  
  [Reply]
At 2006.08.27 01:33, 扫地老僧 said:

COOL! 我也如法炮制看看

[Reply]
At 2006.08.27 06:33, 桔子 said:

我也用了这个WP-cache，不喜欢。

推荐你去看一下 http://www.iyublog.com，海外的一个提供中文wpmu的bsp

[Reply]
- At 2006.08.27 09:44, zhiqiang said:
  
  BSP还是得选择有名的，否则那天突然关了，那真是欲哭无泪啊。
  
  [Reply]
At 2006.08.27 09:12, 痞子新 said:

用过这插件,可不知道哪出了毛病,一用页面就错误了.后来重装了wordpress,也没再试过.

[Reply]
At 2006.08.27 12:44, 天方 said:

呵呵，我一直用这个插件的，不果没有测试过效果

[Reply]
At 2006.08.27 13:18, 探花 said:

一直用这个插件呢~~ 看了帖子有点想动手的欲望有空试试~

[Reply]
At 2006.08.27 22:46, Zig said:

wokao，你真有耐心，这些东西也搞。
倒是把内容简化一点才是永久之计，orz

[Reply]
At 2006.08.28 05:56, 扫地老僧 said:

点了这篇文章的trackback, 出现 Warning: include(/home/.durante/mathzqy/xiaoqiang.org/blog//wp-trackback.php) [function.include]: failed to open stream: No such file or directory in /home/.durante/mathzqy/xiaoqiang.org/blog/wp-includes/template-loader.php on line 8 的提示

[Reply]
- At 2006.08.28 09:17, zhiqiang said:
  
  对不起，最近的trackback spam实在太多了，而且akismet也没有太大的作用，所以我暂时把trackback关闭了，通过将wp-trackback文件改名的方式。
  
  如果需要的话，请手动添加trackback。
  
  [Reply]
At 2006.08.28 09:39, 不让误会 said:

这是个不错的解决方案，不过一定有响应的主机权限才行。

[Reply]
At 2006.09.20 01:14, kenny said:

能不能说一下具体合并的方法,有很多js不是单独包含的.像这样

/js/livesearch.js.php">

有php条件函数,那怎么办,
还有请问css的怎样合并....

[Reply]
- At 2006.09.20 09:42, zhiqiang said:
  
  不知道你说的单独包含是啥意思？你给的livesearch.js.php可以同样include进取。all.js.php会解析执行包含php文件的。
  
  具体的合并方法我更新在文章里面。这些方法都需要一定的php基础，如果啥都不懂的话，还是先学习一下php再用吧。
  
  [Reply]
At 2006.09.20 22:58, Kenny said:

是这样的,我的wp皮肤内置有选项,例如是否使用livesearch功能,然后在head.php就有条件函数判断是否包含liveseacher.js.php , 有几个这样的选项判断是否包含相应功能的js 文件,如果按照你的方法全部include就没有选项的功能. 应该怎么办?

[Reply]
- At 2006.09.20 23:01, zhiqiang said:
  
  难道这个插件需要手动修改head.php吗？这样的话，直接把手动修改的代码，包含哪些判别语句添加到all.js.php即可。
  
  [Reply]
At 2006.10.05 16:44, 可乐 said:

能够说说wp-cache的安装吗。很不好安装，我的wordpress版本是2.03

[Reply]
- At 2006.10.05 18:22, zhiqiang said:
  
  安装方法在它的官方主页http://mnm.uib.es/gallir/wp-cache-2/ 上有说明，就我所知，WP-Cache的安装没有什么特别的地方。
  
  但我听说有人装了这个之后每次打开页面都是空白，必须强行刷新一次之后才能显示，这个我没有碰到过，也不知道具体什么原因造成的。
  
  [Reply]
At 2006.11.02 08:34, 布罗特 said:

试用过wp-cache这个插件，感觉虽然是静下来了。但是对于别的浏览者第一次打开就慢了。而且开了这个cache很多动态东西就不会更新。所以还是卸载掉了。

[Reply]
At 2006.11.09 06:03, 一切为了速度 at iVan.dOo said:

[...] 可惜不太看得懂阅微堂的那篇合并JS和CSS文件的文章。。要不就动手弄弄。。 [...]

[Reply]
At 2006.11.09 06:03, 一切为了速度 at iVan.dOo said:

[...] 可惜不太看得懂阅微堂的那篇合并JS和CSS文件的文章。。要不就动手弄弄。。 [...]

[Reply]
At 2006.11.21 22:52, www.ucosoft.com said:

我也采用了Blog静态化的方式来加速。WP-Cache启动后打开页面总是白屏，只有强制刷新。

[Reply]
At 2006.11.23 08:00, iVan.dOo » Blog Archive » 一切为了速度 said:

[...] 可惜不太看得懂阅微堂的那篇合并JS和CSS文件的文章。。要不就动手弄弄。。 [...]

[Reply]
At 2006.11.28 00:23, Xujin said:

后两个办法想模仿都显困难，汗！～

[Reply]
At 2007.01.22 02:35, woyaoka said:

测试你的PHP能力
http://www.zymose.com/kaoshi/kaoti.php

[Reply]
At 2007.02.25 14:57, Chaney said:

累啊累，不过效果还不错，支持下。
Loading js文件的位置的确很重要

[Reply]
At 2007.03.11 07:12, 徘徊在玻璃之城 » Wordpress 终极优化手册 said:

[...] 合并JS和CSS文件: 不少插件都有自己的JS文件，系统在读取这些文件时候会产生大量的http requests，产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并，会大大加快页面的读取速度。这里我采用的是阅微堂的手动合并的方法。手动合并是一个方法，但是容易弄错，而且不太好修改。另一个方法是建立一个新的all.js.php文件，内容是： <?php require_once(’目录/wp-blog-header.php’ ) ; include (”/blog/a.js” ) ; include (”/b.js” ) ; ?>就是将header.php里面的那些js文件都include到all.js.php，然后在header里面包含all.js.php文件即可： <script xsrc=”all.js.php” type=”text/javascript“/> 另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过add_action(’wp_head’,'fun’ ) ;这样的钩子添加到head里面的。在fun函数的定义处去掉对应的代码，或者直接把这条语句删除即可。对CSS文件也可以用同样的处理方式。CSS文件一般都不多，这时候可以直接手动把它们都贴到一起。另外js文件的载入位置也很重要，放在越后面越好，让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。 [...]

[Reply]
At 2007.10.12 08:51, xiaonei said:

我发文章感到很慢...真晕.

[Reply]
At 2007.12.06 10:39, 优化Wordpress博客加载速度 | Ge Xiaofei said:

[...] 我将coolcode.js合并到mootools.js中了。一般合并JS只需要将原JS文件中的代码拷贝到目标文件中就可以了。或者你可以使用阅微堂提供的方法：建立一个新的all.js.php文件，内容是： <?php [...]

[Reply]
At 2008.01.23 09:55, TechPush » 清理主题文件，加速Wordpress said:

[...] 想进一步优化Wordpress的朋友还可以参考下面两篇文章介绍的方法 : 《优化Wordpress-wp终极优化手册》、《加快WordPress的页面生成和载入速度》。 [...]

[Reply]
At 2008.02.01 10:00, 清理主题文件，加速Wordpress said:

[...] 想进一步优化Wordpress的朋友还可以参考下面两篇文章介绍的方法 : 《优化Wordpress-wp终极优化手册》、《加快WordPress的页面生成和载入速度》。 [...]

[Reply]
At 2008.02.18 09:10, 优化Wordpress–给网站大提速 | Crescent said:

[...] 合并JS和CSS文件:不少插件都有自己的JS文件，系统在读取这些文件时候会产生大量的http requests，产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并，会大大加快页面的读取速度。这里我采用的是阅微堂的手动合并的方法。手动合并是一个方法，但是容易弄错，而且不太好修改。另一个方法是建立一个新的all.js.php文件，内容是： [...]

[Reply]
At 2008.02.21 10:12, Sunxc said:

你好我按照你说的方法把所有js合并成一个all.js.php了在首页引用后怎么找不到路径是的呢
这是我的all.js.php

还有就是我想把all.js.php再次处理下如下：

应该怎么弄，这段代码中是引用$file="all.js"; all.js啊

[Reply]
- At 2008.02.21 11:12, zhiqiang said:
  
  你写的代码我看不到，不知道你在说啥。
  
  不过如果找不到路径这样的问题你都无法解决，还是想让速度快一些的话，你还是先把你网页上多余的功能（其实根本没多少人会用）去掉吧。
  
  痛苦的根源多半因为欲望大于能力。
  
  [Reply]
At 2008.02.21 11:26, Sunxc said:
我的effects.js 等三个文件都是放在myfiles文件夹下的
我现在在head.php中
这样写说明路径是对的啊
同样我包含在这个目录想的all.js.php也应该没问题
问题是在这个文件中应该怎么包含那三个文件呢？
我是这样写的可就是加载错误。。。。
先不说绝对路径和相对路径的问题
[Reply]
At 2008.02.22 11:43, Sunxc said:

问题已经解决多谢

[Reply]
At 2008.03.16 08:01, Aron said:

[Reply]
At 2008.03.30 22:51, 优化Wordpress-wp终极优化手册 at 星娱乐快报 said:

[...] 合并JS和CSS文件:不少插件都有自己的JS文件，系统在读取这些文件时候会产生大量的http requests，产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并，会大大加快页面的读取速度。这里我采用的是阅微堂的手动合并的方法。手动合并是一个方法，但是容易弄错，而且不太好修改。另一个方法是建立一个新的all.js.php文件，内容是： [...]

[Reply]
At 2008.04.28 11:24, WordPress爱好者 - wordpress优化 said:

[...] 我是手动合并，如果你不太熟悉，可以参照阅微堂的手动合并方法： [...]

[Reply]
At 2008.04.30 12:06, iweb » Wordpress终极优化手册 said:

[...] 我是手动合并，如果你不太熟悉，可以参照阅微堂的手动合并方法： [...]

[Reply]

« 从Poincare猜想到Poincare定理——一个馒头引发的血案

北京2008奥运志愿者招募工作开始了 »

加快WordPress的页面生成和载入速度

安装WP-Cache 2.0

改善插件

页面静态化

合并JS和CSS文件

WordPress相关WP-Cache 2.0优化加速静态化

42条留言

阅微堂

WordPress相关 WP-Cache 2.0 优化加速静态化