优化Wordpress-wp终极优化手册

更新：关于wp-cache的优化，请参见本站新作：
优化WP-Cache：Wordprss优化手册(2)

Wordpress的功能非常强大，诸多的插件、花哨的界面，使得它的读取速度也大大降低。因此，如何优化以加快访问者的浏览速度便成了wper们思考的问题。我将诸多高手的方法整理总结了一下，汇成此文，希望能对大家有所帮助。 （建议将WP系统更新至2.1.2 以上)

1. 优化所有的图片（images）：
   图片其实是影响网页读取速度的关键，稍大一些的图片就可能达到100K；因此，在上传自己的图片之前，务必用Photoshop的"保存至网页"（save for web）功能，对图片进行优化。（例如，保存成GIF, PNG格式等等）
2. 关闭一切不必要的插件(plugins)：
   在安装插件之前，首先问一下自己，你是否必须要此插件。不要安装UTW之类的超大插件，尽可能的降低插件数量。
3. 开启WP自带的缓存(Cache)功能：
   1. 打开WP根目录下的wp-config.php文件，在最后一行之前添加 define('ENABLE_CACHE',true);
   2. 将WP-content目录下的cache目录属性改为777，以保证系统能够写入cache。
   3. 如果您的blog日访问量在200以上，建议安装WP-Cache插件，否则不推荐使用。

   4. 让WP-Cache也用上Gzip：如果你安装了WP-Cache，一定知道WP-Cache要求必须关闭WP的内置GZip功能，但是我们可以在wp-cache-phase1.php中添加代码来实现Gzip压缩功能。
      打开wp-cache-phase1.php，大概在35行左右找到如下代码：

      foreach ($meta->headers as $header) {
      header($header);

      在此代码前添加下面的代码：

      if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');

4. 合并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代码最好放在文件最后。

5. 压缩代码：
   1. 在管理界面的 Options->Reading选项中，开启WP自带的压缩功能(WordPress should compress articles (gzip) if browsers ask for them)
   2. 利用CSS Tweak压缩CSS代码，注意。为了方便自己编辑，最好保留一份未经过压缩的代码。
   3. 利用Shrinksafe 压缩JS代码，同样的，最好保留未经过压缩的JS代码，以便将来更改时候便于阅读。
6. 静态化处理：因为首页被浏览的几率大，所以我这里只对首页做初始化。其实这个想法和用WP-Cache差不多，所不同的是 WP-Cache生成缓存页面是靠浏览完成，而我说的方法却是由服务器来完成。具体见我自己写的插件。首先，你需要安装WP-Cron插件，该插件的作用是可以定时让服务器自动运行。具体的配置方法见它的说明文件。你所要做的是让系统每15分钟自动运行如下的程序：

   <?php
   function wwwcopy($link,$file)
   {
   $fp = @fopen($link,"r");
   while(!feof($fp))
   {
   $cont.= fread($fp,1024);
   }
   fclose($fp);
   $fp2 = @fopen($file,"w");
   fwrite($fp2,$cont);
   fclose($fp2);
   }
   //Example on using this function
   wwwcopy("您的动态网页（如http://blog.znsunimage.com/index.php）", "放置静态网页的绝对地址（如/home/znsunima/public_html/wordpress/index.html）");
   ?>

   记住要把index.html的属性设置成666，该程序的作用是每15分钟自动读取index.php并将其写入到index.html中，这样结果就是别人访问你的网站时候，会直接先读取静态的首页，大大加快了速度。

7. 利用Gzip对css、js还有html文件进行压缩：
   这步其实和第五步有些重复，因为gzip的压缩比很好，以至于我们可以不用预先压缩css和js代码就可以达到很好的压缩比。
   首先建立一个文件style.css.php，放在自己的theme目录里面。然后在header.php文件中把读取style.css改为读取style.css.php。
   随后在style.css.php文件添加如下代码：

   <?php
   $file = "css文件绝对路径（请自行更改）";
   if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
   header("Content-type: text/css");
   # echo the file’s contents
   echo implode(", file($file));
   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?fn=index2.html [L]
   readhtml.php文件的内容如下：

   <?php
   if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/plain");
   $file = "安装wp的绝对路径".$_REQUEST['fn'];
   # echo the file’s contents
   echo implode(", file($file));
   if(extension_loaded('zlib')){ob_end_flush();}
   ?>

8. 利用Image Map减少meta部分的image读取量：
   这个在Paul的网站上有详细的叙述。把一些常用的meta部分的image用一个大的image来代替，并且在css文件中设置为背景。然后利用div的控制实现鼠标的悬停指向。
   这里以我siderbar下方的meta图标为例。我使用的Two Columns的模版，因此，除了index.php文件外，还会有一个siderbar.php文件，meta信息都会放在这个文件中。一般我们在 meta部分会添加不少图标，所以我们可以截图后粘贴到photoshop，然后利用Slice Tools对图片进行分割，分割完成可在每个Slice上右击鼠标，读取Slice的属性，记下 下图中的X,Y,W,H坐标值。
   
   接着建立了一个menu_meta：

   #menu_meta {
   background-image: url("http://www.znsunimage.com/images/gif/meta.gif");
   height: 141px;
   margin-left:-2px !important;
   position: relative !important;
   padding-top: 0px;
   width: 118px;
   border: 0px !important;
   } /* 请注意其中的position属性不要修改。 */

   然后，定义一个 a.rss，这个class用来定义鼠标在RSS2.0图标上方的操作。

   a.rss {
   position: relative;
   display: block;
   background: transparent;
   left: 0px; /* 填入Photoshop中所读取的X值 */
   top: 0px; /* 填入Photoshop中所读取的Y值 */
   width: 85px; /* 填入Photoshop中所读取的W值 */
   height: 20px; /* 填入Photoshop中所读取的H值 */
   cursor: pointer;
   border: 0px;
   text-indent: -9900px; /* 将文字隐藏*/
   }

   随后，我们就可以在sidebar.php添加如下的信息，注意其中不同的class，如sitemap,sitemeter都要如上面所述，在css文件中一一定义。

   <div id="menu_meta">
   <a class="rss" href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>">RSS</a>
   <a href="http://s22.sitemeter.com/stats.asp?site=s22zhenning" class="sitemeter" title="Site Meter">sitemeter</a>
   <a href="http://blog.znsunimage.com/sitemap.xml" class="sitemap" title="Site Map">sitemap</a>
   <a href="http://www.spreadfirefox.com/?q=affiliates&id=154085&t=206″ class="firefox" title="Firefox Flicks!">firefox</a>
   <a title="Creative Commons License" rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/" class="cc">cc</a>
   <a href="http://wordpress.org/" class="wp" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>">wp</a>
   </div>

   大功告成。上传更改过的所有文件，重新读取，会发现原来meta的诸多图标被一个大图标所代替，但功能效果和原来类似。按照每个image所产生的http requests约为0.2s计算，这样的方法可以节约1s的时间。

   阅微堂还给出了一个全站静态化的绝好方法，值得借鉴，尤其是java读取cookie的方法，相信对不少人都会有用。

   还有一些方法或需要服务器根目录的读写权限，或者需要数据库的root权限，不具有普遍性，就不列出了。

   参考资料：

   1. 阅微堂：加快WordPress的页面生成和载入速度
   2. 4+1 Ways to Speed Up Wordpress With Caching
   3. 5 Ways to Speed Up Your Site