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

前一阵,此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代码最好放在文件最后。

效果:非常明显

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

转自http://zhiqiang.org/blog/it/wordpress-accelerate-the-pace-of-pages-printed-in-the-generation-and.html

4 Comments
  1. 页面静态化的这个思路很巧妙
    不过通过include合并JS文件也会有一定的开销,可以考虑通过ajax在页面主体加载完成以后再加载功能性JS

    1. 恩,有道理,这些东西还是要看配合

  2. WP静态化的问题多多,越折腾越折腾。现在就优化了下后端nginx,数据库M+B优化,前端使用自己写的GZIP缓存工具,效果显著。其它的真不愿意去折腾了,无极限。话说你的评论提交感觉很慢啊,总会卡个五秒以上才能提交成功。

    1. 这个没办法,不愿折腾了,过滤很多,不折腾了。

Leave a Reply

Time limit is exhausted. Please reload the CAPTCHA.