Wordpress 提速之 Gzip 压缩

今天来聊下 wordpress 提速,其实关于这方面的话题网上其实蛮多的,速度对一个网站来说无疑是非常重要的,对于速度的追求也是无止境的,在这方面的表率无疑就是 shawn 了,看他博客的很多技巧都是针对速度来的……不过话说回来,速度也不是绝对的,看很多优秀的博客速度并不占优,有时候追求速度难免还会牺牲一些其它的东西!!此文仅供参考。

废话少说,关于 wordpress 的提速还是可以从很多方面入手的,因为 WP 的灵活而导致其效率和速度的下降,比如因为使用插件而在头部载入的 N 多的 JS 和 CSS 就是最为典型的,就不展开说了,今天我们只说 Gzip!

什么是 Gzip 压缩,为什么要用 Gzip 压缩

说白了就是一种压缩的技术,它将浏览器请求的文件在服务器端进行压缩,然后将文件以压缩的形式传递给浏览器,然后在浏览器端进行解压缩,还原后进行解析。而目前 99% 的浏览器都支持 Gzip ,包括 IE 4+, Netscape 4+, Opera 5+ 和所有版本的 Safari 和 Firefox ,所以大家可以放心使用。

在这里我们的压缩对象是所有的 html、JS、和 CSS 。而他的压缩效率惊人,能减小 60% 到70%。像我的博客一个 10K 的 JS 文件,用 Gzip 压缩后浏览器接收的只有 3K 大小,16K 的 CSS 文件也被压缩到了 5K,很强大吧!

怎么知道我的页面是否 Gzip 压缩过了

Gzip 的方法有很多种,而有很多的服务器是默认开启 Gzip 压缩的,不过据我所知,这种服务器少之又少。怎么确定自己的网页是否被 Gzip 呢!!这种测试的网站网上也很多,不过一般只能测试 html,这里推荐给大家一个测试的网站:Websiteoptimization,输入网址后,输入验证码,就会给出你的 Web Page Speed Report.

gzip

貌似很多的“童鞋”看错了,现在补图上来!!其中在下面的 Page Objects 中,会给出所有所加载的文件的信息。在最后一栏的信息中,如果显示:Congratulations! This file was compressed. 说明是被压缩过的,如果是:Up to **** bytes could have been saved through compression,显然是还没被压缩的。

启用 Gzip 的几种方法

是的,有几种方法,是针对不同的情况的。

1、最好的情况是你的主机采用的是 Apache 2,并安装启用了mod_deflate 模块。这样就很简单了,只需要在 .htaccess 文件中加入以下代码可以压缩 HTML, PHP, JS, CSS, XML 后缀的文件。

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript
</ifmodule>

不过一般的主机都没有这个模块,如果你是独立主机可以自行配置。至于如何检测自己的主机是否有安装这个模块,我还真没找到办法,望高手指点。如果大家有兴趣,可能将上面的代码加好,看是否 Gzip 来试一下!以上方法来自:我爱水煮鱼

2、用 PHP 来压缩

此方法也需要 PHP 模块 zlib 的支持,不过这是一个基本的模块,一般都开启了!!所以我们主要讲下这部分。

用 PHP 压缩动态页面

我们先来看所谓的 html 的压缩,其实也就是由 PHP 动态生成的 html 。这样的方法有很多,我用的是 shawn 的方法 ,还有 几种方法 供参考。

用 PHP 压缩 JS 和CSS

关于 JS 和 CSS 的压缩也有几种方法,目前比较多的是像 K2 学习,将 JS 和 CSS 改为 .php 的方法。这个前辈已经介绍过了,请移步:简述对WP博客样式表和JS脚本的压缩

这种方法的缺点是要修改每个 JS 和 CSS 文件,有点不太方便。对于将所有插件中的 JS 和CSS 都合并的博客来说还算容易,但没有合并的来说无疑是一项巨大的工程,而且插件更新也是件麻烦的事。另外看着好好的 CSS 文件变成了 PHP ,看着挺怪的,呵呵!!好处是有好的适应性,因为这 K2 用的方法!

第二种方法是老N提供的方法加速blog,压缩js,css,减省带宽 ,这种方法应该说比较简单,而且默认对所有的 JS 和 CSS 生效。原理就是把 JS 和 CSS 利用 .htaccess 交给一个 PHP 文件来处理进行压缩。

老N那的代码貌似复制出来有些问题,我再贴一下,呵呵:

1、创建 gzip.php 文件并上传到博客根目录,代码如下:

下载: gzip.php
<?php
$allowed = array(
'css' => 'text/css',
'js' => 'text/javascript',
'html' => 'text/html',
'htm' => 'text/html',
);
$file = isset($_GET['url']) ? $_GET['url'] : null;
$extension = explode('.', $file);
$extension = array_pop($extension);
if(isset($allowed[$extension]))
{
$pos = strpos($file, '..');
if ($pos === false && is_file($file))
{
@
ob_start ('ob_gzhandler');
header("Content-type: {$allowed[$extension]}; charset: UTF-8");
readfile($file);
} else {
header('HTTP/1.1 404 Not Found');
}
}
?>

2、更改.htaccess文件,在.htaccess中添加:

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} ^.*\.(css|js|html|htm)$
RewriteRule ^(.*)$ gzip.php?url=$1 [QSA,L]

就 OK 了~,的确很简单

但上面两种方法还有一个问题,就是会吃服务器的资源,占用一定的 CPU 和内存,因为每次访问页面都要执行一下。但具体吃到什么程度,我就不清楚了,据说在服务器资源紧张的情况下压缩的效率会比较低,不过我想一般大型的主机提供商的主机还是不会有什么问题的。

第三种我们来看 辐射鱼提供的方法

1. 下载 Gzip.php 文件并上传到你的Wordpress安装目录
2. 在你的 Wordpress 根目录建立 wp-cache 文件夹并确保其可写入
3. 在.htaccess里面加上

RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

即可

也非常的简单,而且此种方法的优点是:自动读取并 gzip 压缩 css 和 js,访问时直接调用生成的 .gz 文件,节约带宽也不占用服务器资源,但不适用空间下安装了多个 Wordpress 的博友,可能导致二级目录下的某些 WordPress 无法加载 CSS 样式。这些都是辐射鱼的原话,呵呵!另外就是当 CSS 和 JS 有更新时要手动清除缓存才行。符合条件的同志推荐用这种方法!!

终于写完了,看来目前还没有很完美的解决方案,大家可以根据自己的实际情况来选择用哪种方法,以上资料仅供参考,有问题请留言!!

Share with Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关文章本月热门点击排行

  • N/A
Post a comment 2009/02/14 – 16:4610,073 Views
Post a comment | Trackback URL | RSS Comments 115 Comments
  1. 2009/06/16 at 23:24 | #101

    @chancat
    你说的是辐射鱼的gzip.php文件里的吧?那个是缓存开关。设为true,启用gzip,按照xiaorsz文章里的描述进行;设为false,不启用gzip,直接读取文件然后返回。
    话说辐射鱼自己的文章里也没说这个cache,而且默认还是false……估计是自己调试的时候忘了~~

  2. 2009/07/07 at 19:39 | #102

    幸好我的主机有自带压缩功能,省得麻烦了.

  3. 2009/08/04 at 23:46 | #103

    用 PHP 压缩 JS 和 CSS 的第二种方法实现鸟,欧耶~

    另外,对于像你这样的 URL (xxx.com/post-name/)可以把
    RewriteCond %{REQUEST_FILENAME} ^.*\.(css|js|html|htm)$
    修改为
    RewriteCond %{REQUEST_FILENAME} ^.*\.(css|js|html|htm|/)$

    YSlow 说全部被 Gzip 鸟。

  4. 2009/08/04 at 23:47 | #104

    和LAONB一样 主机自带 哦也 很好很方便

  5. 2009/08/05 at 10:33 | #105

    @NetPuter 呵呵,这样啊!!不错不错!!

    @章鱼 自带就好,什么都不用管,而且压缩效率最好 !

  6. 2009/08/06 at 12:52 | #106

    如果启用gzip,会不会和wp super cache插件冲突,还有就是super cache的gzip是什么原理,作用有多大,谢谢

  7. 2009/08/06 at 14:35 | #107

    @klniu wp super cache我是没怎么用过,不过清楚噢!我文章中应该写的比较清楚了噢,wp super cache 就是将每篇文章都静态化,转为 HTML,然后再GZIP压缩。但不会对CSS和JS起作用的。

  8. 2009/08/06 at 17:06 | #108

    @xiaorszNotify 哦,谢谢,那如果我开一个gzip output插件和super cache插件会冲突吗

  9. 2009/08/06 at 17:14 | #109

    @klniu minify CSS and JavaScript?那应该不会冲突的,针对的对象不同的!!

  10. 2009/08/06 at 17:16 | #110

    哦,明白了,谢谢,提个建议,在你这里我找不到怎么回复你,是直接打@username?

  11. 2009/08/06 at 17:21 | #111

    @klniu 额,不是吧?!你把鼠标放到评论上去会出现一个绿色的小箭头呀?!没看到吗!?呵呵!!

  12. 2009/08/06 at 17:23 | #112

    @xiaorsz 哦,看到了,一直在闪,经常来的恐怕都知道,我第一次来,所以。。。我觉得可以在评论那里提醒下比较好

  13. 2009/09/20 at 23:45 | #113

    开启GZIP是对速度有帮助的呀,好多国外主机默认都是开启的呀

  14. 2009/09/23 at 00:43 | #114

    @美国主机评测 反正我以前用的几个是没有开的呢!!!

  15. 2010/02/12 at 18:07 | #115

    我的主机默认开启了Gzip就不用再对js和css进行压缩了吧?

Comment pages 1 2 3
8 Trackbacks
  1. [...] 笑傲人生 做网站,写blog 最新 Wordpress 提速之 Gzip 压缩 [...]

  2. [...] Wordpress 提速之 Gzip 压缩 [...]

  3. [...]      至此,在全站开启gzip功能的目标已经达成大半了,从Websiteoptimization这个站点的测试结果可以看出(这个站点我是从xiaorsz这里得知的),除了首页的文字内容以外,包括所有js脚本,css样式表, [...]

  4. [...]        Wordpress 提速之 Gzip 压缩 [...]

  5. [...] 功能,假如不用插件的话,可以用这几篇文章的方法完美启用Gzip压缩JS、CSSWordpress 提速之 Gzip 压缩Wordpress之终极Gzip兼容IE6给 Wordpress 开启 Gzip 功能======不但 CSS [...]

  6. [...] Xiaorsz’s Blog          Wordpress 提速之 Gzip 压缩 [...]

  7. [...] 转载自:http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/ (No Ratings Yet)  Loading … Related posts: WordPress 2.7 启用 GZip压缩输出页面Best Practices for Speeding Up Your Web Sitezlib压缩WordPressWordPress插件WP-PageNavi的使用和汉化包下载wordpress插件之All in One SEO Pack:整体优化你的wordpress博客升级WP旧模板,让它支持Widgets不用插件完美插入Google Adsense【原创】让Adsense Deluxe Plugin 用于 Wordpress 2.8.1 and UpWordpress插件WP-PostViews的调用方法总结:CSS在IE与Firefox下的兼容性 [...]

  8. [...] 来源:http://www.xiaorsz.com/wordpress-gzip-compression-improve-the-speed/ [...]

Post a Comment

(必填)

(必填,有回复时方便邮件通知)

(可不填,填了方便回访)

Sharing technology, recording life