Oct 19th, 2007 优化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文件,内容是:
<?phprequire_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" />
取消插件对其CSS和JS文件的自动加载
合并了插件的CSS和JS文件后还没有完全结束。一般插件都会通过add_action(’wp_head’,” ) ;类似的语句将其自带的CSS、JS文件加载到wordpress head部分。我们需要需要插件文件,将对应的add_action语句注销掉。譬如我就注销掉了coolcode中的以下语句:
add_action('wp_head', array(&$CoolCode, 'add_css'));add_action('wp_head', array(&$CoolCode, 'add_js'));
优化adsense广告加载
google adsense的广告加载一直是影响网页打开速度的大问题。adsense优化加载的方法是从网上找到,不过把地址忘记了。adsense广告加载优化也算是adsense优化的一个方面了。
<div id="delicious_loading">loading...</div><div id="delicious_show" style="display:none;"></div>
在页面主循环结束语句前加入下面的代码:
<div id="delicious_loaded" style="display:none">你的google adsense广告代码</div>
在合并了的js文件中加入以下代码:
function delicious() {document.getElementById("delicious_loading").style.display = 'none';document.getElementById("delicious_loaded").style.display = 'none';document.getElementById("delicious_show").innerHTML=document.getElementById("delicious_loaded").innerHTML;document.getElementById("delicious_show").style.display = 'block';};window.onload = delicious;
这样google adsense广告只有在网站主体内容完全显示后才会出现,不会在网页打开过程中出现休克。
发表评论 | Twitter 1,862次浏览| 评论(3)


很有用的介绍,收藏了,
一把CSS和js合并在一起然后让用户一次性下载,你觉的用户冤不?
还是建议分开页面调用不同的css或js
只要把它们都压缩一样可以提高速度
[...] 六种提高网速的方法! 使用object缓存你的wordpress 减少插件和优化插件(威客堂上有一系列的优化文章,很值得一看) 优化博客加快速度 [...]