本文已于2009年08月21日再次更新
更新:关于wp-cache的优化,请参见本站新作: 优化WP-Cache:Wordprss优化手册(2)
Wordpress的功能非常强大,诸多的插件、花哨的界面,使得它的读取速度也大大降低。因此,如何优化以加快访问者的浏览速度便成了wper们思考的问题。我将诸多高手的方法进行了整理和总结,再结合自己优化的经验汇成此文,希望能对大家有所帮助。
To be, or not to be: that is the question: 这是我想讨论的第一个问题----就是有没有必要做优化。在我看来,绝大多数个人博客是不需要做优化的。花很多时间对一个日访问量不到100的博客做优化还不如花这点时间来好好充实自己的博客内容。 在准备自己的个人博客时最应该考虑的有2个问题。
- 其次尽可能使用最新版本的WordPress,新版本在后台有很大的改进,方便你自己使用、更新。
当你博客的访问量稳步上升后,优化才是你应该考虑的问题。
- 优化所有的图片(images):
图片其实是影响网页读取速度的关键,稍大一些的图片就可能达到100K;因此,在上传自己的图片之前,务必用Photoshop的"保存至网页"(save for web)功能,对图片进行优化。(例如,保存成GIF, PNG格式等等)
- 关闭一切不必要的插件(plugins):
在安装插件之前,首先问一下自己,你是否必须要此插件。尽可能的减少插件数量。
- 开启缓存(Cache)功能:
- 首先你可以开启WordPress自带的缓存功能:
打开WP根目录下的wp-config.php文件,在最后一行之前添加 define('ENABLE_CACHE',true); 将WP-content目录下的cache目录属性改为777,以保证系统能够写入cache。
- 让WP-Cache也用上Gzip:
如果你安装了WP-Cache,一定知道WP-Cache要求必须关闭WP的内置GZip功能,但是我们可以在wp-cache-phase1.php中添加代码来实现Gzip压缩功能。 打开wp-cache-phase1.php,大概在35行左右找到如下代码:
foreach ( $meta ->headers as $header ) { |
在此代码前添加下面的代码:
if ( extension_loaded ( 'zlib' ) ) ob_start( 'ob_gzhandler' ); |
-
减少HTTP请求---合并JS和CSS文件: 不少插件都有自己的JS文件,系统在读取这些文件时候会产生大量的http requests,产生的延迟约为0.2秒/个。因此将所有的JS和CSS文件合并,会减少很多HTTP请求,大大加快页面的读取速度。 但是我不建议大家自己手动合并代码,这里我采用的是阅微堂的合并的方法 。 具体是建立一个新的all.js.php文件,内容是:
2 |
require_once ( '目录/wp-blog-header.php' ) ; |
3 |
include ( "/blog/a.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里面的。在function函数的定义处去掉对应的代码,或者直接把这条语句删除即可。 对CSS文件也可以用同样的处理方式。CSS文件一般都不多,这时候可以直接手动把它们都贴到一起。 另外js文件的载入位置也很重要,放在越后面越好,让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。
- 合理放置css文件和js文件:
一般来说,css文件放在页面头部,而JavaScript脚本则最好放在页面尾部,让浏览器先下载html代码。像Google Analytics 或者Google Ajax Search 这样的大型js代码最好放在文件最后。
- 压缩代码:
- 在管理界面的 Options->Reading选项中,开启WP自带的压缩功能(WordPress should compress articles (gzip) if browsers ask for them)
- 利用CSS 优化工具压缩CSS代码,注意。为了方便自己编辑,最好保留一份未经过压缩的代码。
- 利用Shrinksafe 压缩JS代码,同样的,最好保留未经过压缩的JS代码,以便将来更改时候便于阅读。
- 静态化处理:
为了免得生成太多的文件,我只对首页做初始化。其实这个想法和用WP-Cache差不多,所不同的是 WP-Cache生成缓存页面是靠浏览完成,而我说的方法却是由服务器来完成。我的网页中,Comments都是用javascript实时显示的,所以我要做的只是在更新或添加post后刷新一次主页。所用的程序如下:
02 |
function wwwcopy( $link , $file ) |
04 |
$fp = @ fopen ( $link , "r" ); |
07 |
$cont .= fread ( $fp ,1024); |
10 |
$fp2 = @ fopen ( $file , "w" ); |
15 |
wwwcopy( "您的动态网页(如http://blog./index.php)" , "放置静态网页的绝对地址(如/home/znsunima/public_html/wordpress/index.html)" ); |
记住要把index.html的属性设置成666,这样结果就是别人访问你的网站时候,会直接先读取静态的首页,大大加快了速度。
当然,如果你需要更多静态化页面的帮助,也可以考虑安装 cos-html-cache 这个插件。
-
利用Gzip对css、js还有html文件进行压缩: 这步其实是第六步的延续,因为gzip的压缩比很好,以至于我们可以不用预先压缩css和js代码就可以达到很好的压缩比。 首先建立一个文件style.css.php,放在自己的theme目录里面。然后在header.php文件中把读取style.css改为读取style.css.php。 随后在style.css.php文件添加如下代码:
2 |
if ( extension_loaded ( 'zlib' )){ob_start( 'ob_gzhandler' );} |
3 |
header( "Content-type: text/css" ); |
4 |
# echo the file’s contents |
5 |
include ( $_SERVER [ 'DOCUMENT_ROOT' ]. "/wp-content/themes/default/style.css" ); |
6 |
if ( extension_loaded ( 'zlib' )){ob_end_flush();} |
js文件的压缩方法相同,把all.js改名all.js.php,然后将上面要添加的代码中的text/css改成text/javascript即可。
而html文件,可以用rewrite的方法,比方说我的index.html事实上是利用php读取的index2.html规则,请在.htaccess文件中添加如下代码:
RewriteRule index.html /readhtml.php [L] |
readhtml.php文件的内容和之前读取css文件的类似:
2 |
if ( extension_loaded ( 'zlib' )){ob_start( 'ob_gzhandler' );} |
3 |
header( "Content-type: text/plain" ); |
4 |
# echo the file’s contents |
5 |
include ( $_SERVER [ 'DOCUMENT_ROOT' ]. "/index2.html" ); |
6 |
if ( extension_loaded ( 'zlib' )){ob_end_flush();} |
-
利用Image Map减少meta部分的image读取量: 本部分比较复杂,如不懂可跳过。 在阅读这部分内容之前,你可以点一下这个链接。 你所看到的就是我这个博客使用的背景图。其实现原理就是把一些常用的image用一个大的image来代替,并且在css文件中设置为背景。然后利用div的控制实现鼠标的悬停指向。
这里以我siderbar下方的meta图标为例。 我使用的Two Columns的模版,因此,除了index.php文件外,还会有一个siderbar.php文件,meta信息都会放在这个文件中。一般我们在 meta部分会添加不少图标,所以我们可以将不同的图标放到一个大的gif文件中,然后利用Slice Tools对图片进行分割。
分割完成可在每个Slice上右击鼠标,读取Slice的属性,记下 下图中的X,Y,W,H坐标值。 如图所示的就是图标Creative Commons的坐标(可点击看大图)。
接着在CSS文件中建立一个class
3 |
margin-top : 2px ; //可自己更改 |
4 |
margin-left : 0px ; //可自己更改 |
5 |
background : url (images/bg.gif) no-repeat -41px -82px ; //前者为X坐标,后者为Y坐标 |
有人还会在上面这段css定义中添加一句:
主要用来将文字隐藏,但我不建议这样做,这样的话,在firefox中点击会出现长长的虚框,影响美观。 我的做法是此链接的title文字部分,用“ ”。回到我的例子,我们就可以在sidebar.php添加如下的信息。注意我在写它的title时候用的是空格符号 。
把所有你会用到image都用这种方式修改。上传更改过的所有文件,重新读取,你会发现你网站loading的速度会快很多。你可以按照每个image所产生的http requests约为0.2s来计算。
阅微堂还给出了一个全站静态化的绝好方法,值得借鉴,尤其是java读取cookie的方法,相信对不少人都会有用。
还有一些方法或需要服务器根目录的读写权限,或者需要数据库的root权限,不具有普遍性,就不列出了。
参考资料:
1. 阅微堂:加快WordPress的页面生成和载入速度 2. 4+1 Ways to Speed Up Wordpress With Caching 3. 5 Ways to Speed Up Your Site
|