给基于WordPress + K2 Theme的网站加速

K2主题是一款功能强大、定制容易的WordPress主题。它完美运用了AJAX 技术并提供了丰富的自定义内容,并且为各种主流 WordPress 插件预留了接口,甚至为部分插件提供了内建样式。然而由于它功能强大,并且需要下载大量的jQuery代码,就导致使用默认K2主题的网站打开速度大受影响。如果进行简单的修改就可以大大提高网站的打开速度。本文介绍了一个利用WP Minify插件使得K2主题中的JS代码不再加载而减少页面打开时间的方法。

—————————– 2010.11.15 更新 ——————————-

今天WP Minify插件更新到 1.0.2 版本,我发现它与目前发布的 WordPress 3.1 测试版之间存在不兼容性问题。也许与我所使用的主题 K2 的架构有关,但这点儿不确定。不兼容性问题具体表现在:

1、导致WordPress 3.1版中引进的新的编辑引用链接的方法不起作用(无法工作),似乎是因为js文件加载错误造成的;

2、导致今天更新的WordPress 3.1 alpha最新版本出现网站崩溃的问题。具体请参考这里

—————————– 2010.08.26 更新 ——————————-

2010.08.24,K2主题更新到1.1版本更新1144,k2不再重写 jQuery 文件请求,也就意味着,你可以使用 Use Google Libraries 插件来从Google提供的jQuery库中加载这些jQuery文件。利用Google稳定而快速的服务器来提供js文件,这样就可以加快javascript的加载。也就不需要再用下面所说的方法来禁用js的加载以提高用户访问速度了。

当然,如果你额外开启k2主题的“AJAX archives & search”功能,就需要额外加载k2内建的js文件(k2/js/k2.min.js 和 k2/js/k2.advnav.min.js)。该文件不能通过 Use Google Libraries 从Google加载,总而减缓网页加载速度。为了速度,建议不要启用该功能。[ 2010.10.04 更新:还可以采取折衷的方案,具体请参考“一个关于WP Minify的奇怪现象”。]

—————————– 2010.08.26 结束 ——————————-

使用该主题,网站打开速度慢主要有两个原因(忽略服务器性能和网络速度影响):一是需要服务器运行php的量比较大;二是需要加载较多的元素。我们从加载的这些元素来考虑,因为这是对打开时间影响最大的。比如它除了需要加载主题CSS样式文件之外,可能还要加载自定义的样式表,这就需要客户端发出2次下载请求,而发送请求并等待服务器响应需要的时间可能比下载时间还长。再比如它在页面的head标记里要求下载4个js文件,这就需要4次请求和等待来完成下载,并且其中一个js文件jQuery.js有70KB左右。所以,从用户点击链接到打开一部分页面都需要很长的时间,除非你使用的服务器响应非常迅速。对于我使用的国外免费空间,开头的请求与等待等等都需要将近8秒。如下图所示。

图1 页面中的js代码打开时间图

我在WordPress中使用了WP Minify插件来对CSS和JS代码进行合并和压缩,这样可以减少请求次数。图中左侧数字表示按顺序请求和下载的元素。1是进行dns查询,2是由不带/向带/的地址https://cnzhx.net/wp/进行301跳转的时间(可见尽量减少301跳转也能提高网站的响应速度,但这不是本文讨论的内容),3是请求下载合并压缩后的CSS样式表文件,4是请求下载合并后的JS代码文件。图中中间的彩色进度条,绿色表示请求时间,蓝色表示传输(下载)时间。可见,如果没有使用WP Minify插件进行CSS和JS代码合并,需要的时间更长。当然,从图中看到的加载JS代码需要的额外时间并不多。但是如果考虑到各地网速的差异,这一点东西下载起来还是需要不少时间的。如果你的页面中不需要使用这些js代码呢,这些时间和带宽还是替访问者省下来吧。

上图是从测试网站的报告中截取的。你也可以去WebPageTest网站实测一下网站的打开速度,从自动生成的报告中能看到页面各个元素打开的顺序和耗费的时间,还能得到改进建议。不过该网站是英文的,英文不大好的话就直接点击上面导航栏的New Test开始一个新测试并输入你要测试网址,其它默认,然后点击页面左下角的 Summit ,静静等待看看效果吧。报告是图表的,比较容易看懂。

一次偶然的机会,我发现WP Minify插件的一个bug。应该是bug吧,它有个选项让你可以将合并后的js代码放到footer部分来加载(如下图2中红圈位置处),可是我用了后发现它并没有加载,彻底的没有加载。反正是可以利用这个bug。这样打开网站页面就不需要请求下载js代码了,可以节省不少时间,如下图3。

图2 WP Minify插件的选项页

图3 不加载js代码时的页面元素打开时间

大家可能注意到这里用的是blog/这个地址,这是因为中间我换了地址了(详见,广而告之:变更博客链接),而且还进行了其它一些改变,但是跟我这里讨论的问题无关。放这个图是为了说明少掉的那个请求并等待下载合并后的js代码的过程的。

好了,大家可以看到,这个方法仅仅是为了更多的减少不必要的加载时间,提高访问满意度。实际上,如果注意尽量不使用301跳转,效果会更加明显。回头再专门说这个吧。大家可以把图3和下面的图4对比一下:

图4 与图3对比301跳转带来的网页打开时间延迟

©

本文发表于水景一页。永久链接:<https://cnzhx.net/blog/speed-up-website-built-with-wordpress-plus-k2-theme/>。转载请保留此信息及相应链接。

4 条关于 “给基于WordPress + K2 Theme的网站加速” 的评论

  1. 引用通告: 体验WordPress 3.1新特性 « 水景一页

  2. 引用通告: 优化WordPress中JavaScript加载位置 « 水景一页

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>