开启GZIP,提速WordPress

今天我用FireFox的YSlow组件对小站进行了评测,结果仅为Grade C,实在是差强人意。虽然自认为本站的速度已经算是很不错了,话说自从换了小张童鞋的息壤主机后,小站的速度也是突飞猛进,但是为了满足小小的虚容心和完美主义性格,Grade C的结果在我看来是不合格的,我的目标是Grade A!我需要优化、优化、再优化,提速、提速、再提速!

根据YSlow的要求,其中Compress components with gzip这项,我的得分仅为F,严重地影响了小站的整体评级。本文也就重点谈谈如何开启GZIP压缩网页从而给Wordpress提速。

三言两语先简单介绍下GZIP功能,我G来的。GZIP功能可以大幅度地压缩CSS、JS之类的文本型文件,压缩率达60%-90%,挺可观的。GZIP压缩功能在Wordpress2.3-2.5版本里都是自带的,之后就没有了,我现在用的是Wordpress2.7.1,就更没有这个功能了。那如何手动开启Wordpress2.7+的GZIP功能呢?

在开始之前,我们先做点准备工作,你也可以用YSlow查一下你的网站评级,然后登陆http://www.whatsmyip.org/mod_gzip_test/检测一下你的网站是否已经开启了GZIP,等事后可以作个比较。下面是我开启GZIP之前的测试截图。

wange.im

废话到此为止,进入正题。

1.开启GZIP功能。在根目录下的index.php找到

define(’WP_USE_THEMES’, true);

在其后插入如下代码:

if(ereg(’gzip’,$_SERVER['HTTP_ACCEPT_ENCODING'])){//判断浏览器是否支持Gizp
if(substr($_SERVER['REQUEST_URI'],0,10)!=’/download/’)//排除不需要Gzip压缩的目录
ob_start(’ob_gzhandler’);//打开Gzip压缩
}

2.在.htaccess里面加上RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

如果你那可怜的主机不支持.htaccess可写,很遗憾,你就不用往下看了。

3.压缩CSS和JS文件。你可以复制以下代码保存为gzip.php,或者点此下载我的gzip.php文件,下载解压之后上传至根目录即可。让所有的CSS和JS文件访问就以相对根目录的路径以GET变量传递到了gzip.php,交给gzip.php来全权处理了。

<?php
define('ABSPATH', dirname(__FILE__).'/');

$cache = true;//Gzip压缩开关
$cachedir = 'wp-cache/';//存放gz文件的目录,确保可写

$gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');
$deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');
$encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');

if(!isset($_SERVER['QUERY_STRING'])) exit();

$key=array_shift(explode('?', $_SERVER['QUERY_STRING']));
$key=str_replace('../','',$key);

$filename=ABSPATH.$key;

$symbol='^';

$rel_path=str_replace(ABSPATH,'',dirname($filename));
$namespace=str_replace('/',$symbol,$rel_path);

$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).'.gz';//生成gz文件路径

$type="Content-type: text/html"; //默认的类型信息

$ext = array_pop(explode('.', $filename));//根据后缀判断文件类型信息
switch ($ext){
  case 'css':
   $type="Content-type: text/css";
   break;
  case 'js':
   $type="Content-type: text/javascript";
   break;
  default:
   exit();
}

if($cache){
if(file_exists($cache_filename)){//假如存在gz文件

  $mtime = filemtime($cache_filename);
  $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

  if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
        array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime)
   ){

   // 浏览器cache中的文件修改日期是否一致,将返回304
   header ("HTTP/1.1 304 Not Modified");
   header("Expires: ");
   header("Cache-Control: ");
   header("Pragma: ");
   header($type);
   header("Tips: Cache Not Modified (Gzip)");
   header ('Content-Length: 0');

  }else{

   //读取gz文件输出
   $content = file_get_contents($cache_filename);
   header("Last-Modified:" . $gmt_mtime);
   header("Expires: ");
   header("Cache-Control: ");
   header("Pragma: ");
   header($type);
   header("Tips: Normal Respond (Gzip)");
   header("Content-Encoding: gzip");
   echo $content;
  }

}else if(file_exists($filename)){ //没有对应的gz文件

  $mtime = mktime();
  $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

  $content = file_get_contents($filename);//读取文件
  $content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//压缩文件内容

  header("Last-Modified:" . $gmt_mtime);
  header("Expires: ");
  header("Cache-Control: ");
  header("Pragma: ");
  header($type);
  header("Tips: Build Gzip File (Gzip)");
  header ("Content-Encoding: " . $encoding);
        header ('Content-Length: ' . strlen($content));
  echo $content;

  if ($fp = fopen($cache_filename, 'w')) {//写入gz文件,供下次使用
                fwrite($fp, $content);
                fclose($fp);
            }

}else{
  header("HTTP/1.0 404 Not Found");
}
}else{ //处理不使用Gzip模式下的输出。原理基本同上
if(file_exists($filename)){
  $mtime = filemtime($filename);
  $gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

  if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
  array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) ==  $gmt_mtime)
  ){

  header ("HTTP/1.1 304 Not Modified");
  header("Expires: ");
  header("Cache-Control: ");
  header("Pragma: ");
  header($type);
  header("Tips: Cache Not Modified");
  header ('Content-Length: 0');

}else{

  header("Last-Modified:" . $gmt_mtime);
  header("Expires: ");
  header("Cache-Control: ");
  header("Pragma: ");
  header($type);
  header("Tips: Normal Respond");
  $content = readfile($filename);
  echo $content;

  }
}else{
  header("HTTP/1.0 404 Not Found");
}
}

?>

 搞定,再去http://www.whatsmyip.org/mod_gzip_test/检测一下你的网站是否已经开启了GZIP,如果上述步骤都操作正确,那测试结果应该如下图所示。

wange.im

既然已经对CSS和JS文件压缩了,那我们再用YSlow来评测一下等级。Oh耶!我的小站从Grade C上升到Grade B了,不过说实话,虽然把CSS和JS文件压缩了72%,但并没有很明显地提速,因为本来就已经够快的了,哈哈。

说些题外话,根据YSlow的要求,我的小站要从Grade B上升到Grade A怕是有些难度了。因为首页上加载了两个Flash,还有5个JS,拖慢了不少速度,等会有时间我研究下把这5个JS合并,或许会好些吧。我又查了下新浪、网易、搜狐这样的大型门户网站,也不过Grade B甚至Grade C,我心理平衡一下,嘿嘿。

  1. Pingback: wordpress使用gzip | 行畔博客

  2. Pingback: 如何幫Wordpress加入gzip壓縮,並做一些網路優化 | 到處閒晃

  3. 这个方法试了也不行,没有任何效果.
    这是我的空间上的资料
    - mod_rewrite enabled (apache 2.2); full dot files support (.htpasswd, .htaccess - posibility to set custom error pages, to block unwanted ips/sites, to turn on/off indexes etc. etc.);

  4. 不知道为什么,我的站点默认已经开启了Gzip,按你在本文的方法做了一遍,压缩率和以前一样,我再学习一下你的其他文章,谢谢了~

  5. 对了 我的头像早已更新,在你这个还是显示我以前的头像,不知道你是不是也把头像缓存了
    :mrgreen: 这个我也早研究过了 哇哈哈,可惜没成功,我安装了三个WP +MU :eek:

  6. Pingback: 开启GZIP,提速Wordpress

  7. Pingback: 轩邈阁 » WordPress站点速度优化攻略

  8. 用YSlow选好对应的规则也是很重要的,因为有些功能个人根本没办法实现(比如CDN)。按照Small Site or Blog的规则,这个站点已经是Grade A了。用我自己定义的规则看是B,主要是过期时间上设置得不太好,没能充分利用缓存功能。

  9. Pingback: Wordpress 之終極 Gzip 兼容 IE6 - Willin Kan 的博客

  10. 有没有插件可以实现呢?
    奇怪了,我自己从没设置过,但是检测结果显示我的网站开启了Gzip,压缩率75.9%。

  11. :mrgreen: :mrgreen: 如果像你文中说的药达到A ,可能性只有10% 别 的不说
    就一条CDN技术 就无法实现。要是你资金雄厚的话就 另当别论了
    其他的 技术性操作就好办了,手工就可以了
    如JS 整合为一个调用 CSS整合背景图片为一个 然后定义坐标 引用到CSS里 wp模板里 能改为HYML形式的PHP函数 全改了 ,基本就不错了 ,另加些缓存插件什么的, :mrgreen: 过去我 把 所有调用 全都在 国内某朋友的CDN主机里 只有 WP文件在自己的服务器里 哇哈哈,谁叫俺是m国主机。。。。

  12. 不过这种缓存技术不适用空间下安装了多个 WordPress,可能导致二级目录下的某些 WordPress 无法加载 CSS 样式,这个我已经预先体验过了。
    还有 当 CSS 和 JS 有更新时要手动清除缓存才行

  13. 唔,谢谢分享你的经验。
    我是修改PHP.INI来开启GZIP的
    也用了GZIP.PHP 形式来压缩JS CSS 文件
    但是 我的GZIP.PHP代码有一句却与你不同
    $cache = false;
    $cachedir = 'wp-cache/';
    你的是true ,我想你是不是使用了缓存 技术。这个 不是太理解!

    • 还有,写为false 也是可以正常压缩的, 我想你那个 true 很可能就是缓存文件到WP-CACHE里 下次读取直接到这个目录来读取本地的缓存。唔,观察下吧 。。最近有些问题
      其他 GZIP.PHP代码基本吻合。交流下! :wink:

      • 唔 确实是 把那些 JS CSS 缓存到 WP-CACHE 目录里了
        但是 我使用了你 的代码后 却出现错误 。CSS JS 都没加载 不知道 怎么回事。。下班 研究下!

  14. 我今天搞了一下发现CSS文件加载有问题,博客裸奔了!!看来我需要把多个CSS文件写在一起才行啊。

  15. 下载万戈提供的那个PHP直接用就可以了么?需要修改些什么不?…我的美国主机,还是想提提速比较好……

      • 呵呵,N久没来是因为以前没加友链的缘故吧,我一般就在自己友链跟论坛里新帖子那边走走···话说我这么晚了睡不着,起来上网看看··昨天跟GF吵架了,今天空气很奇怪,刚刚12点半了她也没睡着,但估计大家心情都是一样的,同样倔强却同样向着对方,但同样也不肯让对方···
        PS:自己站点不喜欢写这类感情什么什么的东西,也不想让别人看见··只能借个地方发下牢骚发泄出来,万戈莫怪哈,就当午夜某猪乱入胡言乱语··

        • 我的小站永远欢迎你,我也不喜欢在自己的网站上秀感情,以后有需要的时候我也会去你的网站谈谈感情心声,呵呵 :grin:

  16. 我實驗一下發現幾個問題:
    1. copy 這頁藍色字, 發現很多全角符號, php 不認得. -- 需用 Quotmarks Replacer 插件.
    2. "点此下载gzip.php文件" 被保護了, 下的內容不是你所貼的內容.
    3. php 第一行沒有 "<.? php"

      • 魔羯座的男性很少表露自己真正的感情,基本上是一個孤獨的人。你的生活是在一絲不苟的精神、高度的責任感和邏輯頭腦的嚴格控制下進行的。激情一般是由雄心和權力慾望調動起來的。你總是在辛勤地耕耘,有無懈可擊的工作態度。你容易認為別人所做的一切都不理想,一定要自己親自動手。時間將會證明你的成功。
        參考:http://astro.sina.com.cn/jian/59.shtml