优化Wordpress博客加载速度

为了保证博客的个性化和功能需要，我在这个博客上使用了多个wordpress插件，另外还使用了google分析和雅虎统计来观察博客流量细节。这些插件和统计代码的使用很大程序上减缓了博客的打开速度。更重要的是博客主机服务商Dreamhost是在国外的，打开速度很大程序上影响了博客的正常阅读。通过网上查找以及自己研究，最终实现了博客加载速度的提升（反正我自己是比较满意…）。

从总体来说，网站页面提速主要可以从这几个方面入手：减少页面体积、加快页面元素加载、减少数据库查询、纯静态化页面生成等等。在这个博客上我主要使用了合并CSS和JS文件，优化JS加载的方法。在我优化之前，这个博客加载的CSS和JS如下图所示。

合并wordpress和插件的CSS文件

除了wordpress主题所需要的CSS文件，有些插件也会加载个性化定义，这样在打开博客的时候就需要调用多个css文件，合并多个CSS文件就可以加快这一进程。
合并CSS很简单，只需要将页面调用的几个CSS文件综合到一个文件中独立调用就可以了。需要注意的是CSS中所调用的图片路径一定要调整正确。这个合并可以将插件的CSS合并到主题的css文件中去。

合并JS文件

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

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

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

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

取消插件对其CSS和JS文件的自动加载

合并了插件的CSS和JS文件后还没有完全结束。一般插件都会通过add_action(’wp_head’,” ) ;类似的语句将其自带的CSS、JS文件加载到wordpress head部分。我们需要需要插件文件，将对应的add_action语句注销掉。譬如我就注销掉了coolcode中的以下语句：

1. add_action('wp_head', array(&$CoolCode, 'add_css'));
2. add_action('wp_head', array(&$CoolCode, 'add_js'));

优化adsense广告加载

google adsense的广告加载一直是影响网页打开速度的大问题。adsense优化加载的方法是从网上找到，不过把地址忘记了。adsense广告加载优化也算是adsense优化的一个方面了。

1. <div id="delicious_loading">loading...</div>
2. <div id="delicious_show" style="display:none;"></div>

在页面主循环结束语句前加入下面的代码：

1. <div id="delicious_loaded" style="display:none">
2. 你的google adsense广告代码
3. </div>

在合并了的js文件中加入以下代码：

1. function delicious() {
3. document.getElementById("delicious_loading").style.display = 'none';
4. document.getElementById("delicious_loaded").style.display = 'none';
5. document.getElementById("delicious_show").innerHTML=document.getElementById("delicious_loaded").innerHTML;
6. document.getElementById("delicious_show").style.display = 'block';
7. };
9. window.onload = delicious;

这样google adsense广告只有在网站主体内容完全显示后才会出现，不会在网页打开过程中出现休克。