加速 WordPress

0 Share

加速 WordPress

通过 Hyper Cache 等插件,以及使用 Gzip 压缩 CSS 、JS 文件并改变其在页面的位置来提高 WordPress 的加载速度。

通过 Hyper Cache 等插件,以及使用 Gzip 压缩 CSS 、JS 文件并改变其在页面的位置来提高 WordPress 的加载速度。

通过插件缓存

WP-Cache 2.0WP Super CacheBatcache 算是比较流行的了。介绍一下我在使用的 Hyper Cache。Hyper Cache 简单小巧,完美支持Gzip压缩更好的支持移动设备,还可以缓存404页,重定向页面等,生成的缓存文件不占用太多空间。关于更加详尽的介绍请看 《Hyper Cache 设置相关》,或者《Hyper Cache 汉化版》。

Gzip 压缩 CSS 、JS 文件

我的主题的 style.css 文件原大小 20K ,压缩后只有5K,速度提升十分明显。同时也不必担心占用过多的服务器 CPU 资源,因为有缓存滴。首先确认你的空间支持 .htaccess ,然后移步到《Gzip 压缩 CSS 、JS》来下载需要的 gzip.php 文件。

我把该文件命名为 wp-gzip.php 传至网站根目录,同时在根目录下建立文件夹 wp-cache ,并确保可写。然后在根目录的 .htaccess 加入:RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]。可以参考这段:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule (.*.css$|.*.js$) wp-gzip.php?$1 [L] </IfModule>

最好不要在 WordPress 默认的那段里面写,# BEGIN WordPress# END WordPress 之间的东西随时可能被 WordPress 重置为默认的语句。

合并 CSS 文件

很多插件都会在 head 标签里插入自己的 CSS 文件,不信打开你的首页,看下源代码就知道。为了确定那些是自动加入的,你可以在你的主题中的 header.php 里查找:wp_head(); ,将之更改为:

	echo '';
	wp_head();
	echo '';

然后重新打开你的网站,看看这两段注释里都多了什么东西?把多的那几行保存一下,然后改成 <?php //wp_head(); ?> 来注释掉这句。把网页代码中引用的 CSS 文件地址,复制到浏览器地址栏中打开,把代码复制,通通粘贴到你的主题 style.css 文件的末尾。要注意,有些插件的 CSS 里面定义了图片背景,你可以把插件中的图片目录移动到主题文件夹里面。比方说某插件里面有一句 url(images/loading.gif),你就可以把插件里面的 images 文件夹放到主题目录中与 style.css 所在的目录即可。

JS 文件放到最后加载

把 引用的 JS 文件的语句统统从 header.php 里面剪切掉,粘贴到主题中的 footer.php 中的 </body> 前面。

需要注意的是,如果你使用的是 WordPress 2.7 ,并且主题支持原生嵌套评论 ,可以在 header.php 中找到 位于 wp_head() 前面的:
<?php if(is_singular()) wp_enqueue_script('comment-reply'); ?>
删除掉,并在 footer.php 中添加:

<?php if(is_singular()) : ?>
<script type='text/javascript' src='http://yourwordpress.com/wp-includes/js/comment-reply.js?ver=20081009'></script>
<?php endif;?>

同样,你也可以对 JS 文件像对 CSS 文件一样进行合并,不过建议有把握再这么做。

其他方面

尽量使用图片较少的主题;尽量使用站内图片。至于广为流传的将主题中的一些判断及函数按执行结果写死的方法也不错,不过有了缓存插件,估计效果不是很大了。另外很多人喜欢在侧边栏放一些引用站外 JS 文件的挂件,还有统计代码等等;如果不是必要,最好不要加这些东西,加的话也尽量放在 footer.php 里面。

加载条

加载条并不能提高页面载入速度,但是能缓解一下访问者等待时的尴尬气氛。添加这个进度条总共分为3步:

  1. 在你的 header.php 中,添加 <div id="loading">加载ing(可以不设置文字,而用背景图片)</div>
  2. 可以参考我的网页代码。

  3. 在 style.css 里面为 loading 设置样式。我的样式:
    #loading{
    z-index:3;
    background-image:url(images/loading.gif);
    left:48%;
    top:10px;
    width:128px;
    height:15px;
    position:fixed;
    }
    * html #loading {
    position:absolute; /*for the fucking IE6*/
    }
    *+html #loading {
    position:fixed;/*for the fucking IE7*/
     }

    而这个 loading 的图片,你可以去定制一个

  4. 在 footer.php 里面添加一段代码保证那个 loading 在页面加载完毕后消失:<script>document.write('<style>#loading{display:none}</style>');</script>

(以上方法来自 aw

大概就这么多了,如果你还不满足,可以看看 shawn 的 《如何缓存Gravatar 至本地服务器》,我嫌麻烦就没弄,呵呵,我对现在的速度很满足了。如果你还有别的高招,不妨留言哈~

Comments ( 31 )

  1. Replyxiaorsz
    呵呵,这些差不多都用到了!! 总结的很不错,支持下!
  2. Replybssn
    都不知道哪个好了,现在就想要一个能彻彻底底生成静态的那种。
    • Replyk2max
      我想... 你需要 cos-html-cache ..
  3. Replymercy
    太复杂,做人还是简单点好 :-)
  4. ReplyLeeiio
    有钱我要选个牛逼的空间~速度快不用优化也快,哈~
  5. Replyk2max
    你用 Hyper Cache 了? 效果如何?
    • Reply卢达
      感觉很还可以吧~
  6. Replyxiaorsz
    皮肤升级了?这样效果也蛮不错的!!
    • Reply卢达
      呃,搞出问题了。。。然后又没时间弄了
  7. 本博客启用的 WordPress 插件 - Dallas Lu
    [...] Cache:类似的缓存插件可是 加速WordPress 的必备之物。Samsarin PHP Widget:在边栏中使用 PHP 代码,灰常的方便。WordPress [...]
  8. ReplyDonald
    话说我那儿写了那么长的一篇介绍Hyper Cache的文章,欢迎引用。哈哈。实际使用中Hyper Cache对访问速度的提升要比WP Super Cache明显得多啊,真是个不错的东西。
    • Reply卢达
      呵呵,介绍得很详细哈,才发现~
  9. Reply沿阶草
    谢谢分享。加了一个滚动的gif图片总比“正在加载”这四个字好看。。
  10. ReplyJinwen
    过来才看到你也写过这篇东西呢,也看下。PS.页顶的搜索栏样式要不再加一句:outline:none;呢,为了在水果机上一致。
    • Reply卢达
      呃,其实搜索栏那早就想改一下了,懒,加个隐藏就放那了。我只在 IE 和火狐上测试过……
  11. Reply百家乐
    谢谢楼主的分享呀,终于解决了我的问题啊
  12. Replychancat
    收藏。学习
  13. 折腾启示录 - Dallas Lu
    [...] php.ini 文件来启用 Gzip 压缩,结果,很久之前压缩 JS 和 CSS 文件来 加速 WordPress 的办法竟然失效了。曾经因为不能保存评论者 Cookie 而停用了 Hyper Cache [...]
  14. WordPress使用经验(三)速度优化 - 露兜博客
    [...] 二、加速 WordPress [...]
  15. Replywpcn
    很搞笑的是,我打开你的这个日志居然用了很久。。。“很久”是多久呢?半天! 半天是多久呢?很久!
    • Reply卢达
      我这里速度一直不错啊~jiong
  16. ReplyLudou
    非常感谢你提供的方法。 也希望你继续参与WordPress Codex中文的完善工作,一起努力哦
    • Reply卢达
      之前接触 mediawiki 程序少,貌似有些操作不太恰当……汗啊,我好像把中文首页给改了
      • ReplyLudou
        我也看到,首页是改了,但是链接还在
      • ReplyLudou
        错了,别人会帮你改过来,多尝试几遍就会了
  17. Graygift@ye» 博客存档 » 加速wordpress
    [...] footer.php 里面。 感谢Lorz™ [...]
  18. Reply章鱼
    for the fucking IE
  19. Reply8848
    为何我的进度条一闪就不见了?难道是服务器速度快 ?
    • Reply卢达
      服务器速度快 是可能的原因之一~~
  20. WordPress使用经验(三)速度优化 - 露兜博客
    [...] 二、加速WordPress [...]
  21. Replyno75.info
    很不错。。。。这些都是必须的

Leave a reply

Your email address will not be published.