标题:GZIP压缩js html css文件提高网站访问速度

-------------------------------------------------------------------------------------------------------------------------------

时间:2010/2/23 15:28:21

-------------------------------------------------------------------------------------------------------------------------------

内容:

加速blog:GZIP压缩传输你的文件

zhiqiang十一月 29, 2007 IT技术

在浏览网页的时候,浏览器需要把网页上的内容,包括网页HTML,CSS,JS,FLASH和图片等下载到本地,然后把它们显示出来。如果网页上的内容是固定的,下载速度也不是你我能控制的,但下载的大小则是可以控制的,只需要你再传送的过程中先把内容压缩一下即可。

对于一般的HTML,CSS和JS文件,GZIP的压缩比率达50%到80%,节约的流量是非常惊人的。下图是阅微堂上的GZIP结果:

动态内容压缩

动态内容指动态脚本比如PHP生成的内容,比如WordPress产生的内容均为动态脚本内容。对于动态脚本的压缩方式有两种,一种是ob_gzhandler,一种是zlib.output_compression。前者几乎所有服务器都支持,只需要在WordPress后台options->Reading->WordPress should compress articles (gzip) if browsers ask for them打开GZIP传输即可。而后者是一个PHP模块,效果更佳,因为它是边生成,边压缩,边传输的,效率和速度都更好。但这个是PHP的一个模块,不是所有服务器上的有这个模块。

静态文本压缩

但对于另外一些需要压缩的静态文本,比如html, css, javascript文件等。相应的静态文本压缩的Apache模块有两种,GZIP和DEFLATE,后者更好,不过这都没啥选择,完全看服务器是否提供,个人无法配置,比如使用最多的Bluehost和Dreamhost都不支持。

静态文本调用PHP压缩模块实现GZIP压缩效果

如果服务器不提供对于静态文本的GZIP压缩模块,唯一的出路是通过调用PHP。有好几种方法调用PHP达到这个效果,下面介绍一种方法,好处是除了在目录下添加一个文件和修改.htaccess之外,不需要对别的代码作任何修改,所有的js,javascript的压缩都自动生效。(不过,如果你看不懂下面这些代码为什么能起作用,就不要使用这个方法)

首先,修改你的blog目录下的.htaccess文件,加入下面几行代码(注意修改你的blog的目录,这里默认是/blog/)

# to gzip your css, javascript, html file automatically
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/ #directory of your blog, change it to yours
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)(js|css|html|htm)$ /blog/redir.php?file=$1$2&type=$2 [L]
</IfModule>

其次,将下面代码保存在文件redir.php里,放到blog的根目录

<?php # this is the file redir.php, to gzip javascript and css
# set the request file name
$file=$_REQUEST['file'];

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
switch ($_REQUEST['type']){
  case 'css':
    header("Content-type: text/css");
    break;
  case 'js' :
    header("Content-type: text/javascript");
    break;
  case 'html':
    header("Content-type: text/html");
    break;
  default:
    header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
  ob_end_flush();
  # set header the content's length;
  # header("Content-Length: ".ob_get_length()); # (It doesn't work? )
  ob_end_flush();
}
?>

大致解释一下原理,那段.htaccess代码把所有的css,js,html,htm文档自动转向到redir.php,redir.php则读取真实的文件内容,调用PHP压缩模块ob_gzhandler压缩后输出。

关于, , »

加速blog:GZIP压缩传输你的文件

zhiqiang十一月 29, 2007 IT技术

在浏览网页的时候,浏览器需要把网页上的内容,包括网页HTML,CSS,JS,FLASH和图片等下载到本地,然后把它们显示出来。如果网页上的内容是固定的,下载速度也不是你我能控制的,但下载的大小则是可以控制的,只需要你再传送的过程中先把内容压缩一下即可。

对于一般的HTML,CSS和JS文件,GZIP的压缩比率达50%到80%,节约的流量是非常惊人的。下图是阅微堂上的GZIP结果:

动态内容压缩

动态内容指动态脚本比如PHP生成的内容,比如WordPress产生的内容均为动态脚本内容。对于动态脚本的压缩方式有两种,一种是ob_gzhandler,一种是zlib.output_compression。前者几乎所有服务器都支持,只需要在WordPress后台options->Reading->WordPress should compress articles (gzip) if browsers ask for them打开GZIP传输即可。而后者是一个PHP模块,效果更佳,因为它是边生成,边压缩,边传输的,效率和速度都更好。但这个是PHP的一个模块,不是所有服务器上的有这个模块。

静态文本压缩

但对于另外一些需要压缩的静态文本,比如html, css, javascript文件等。相应的静态文本压缩的Apache模块有两种,GZIP和DEFLATE,后者更好,不过这都没啥选择,完全看服务器是否提供,个人无法配置,比如使用最多的Bluehost和Dreamhost都不支持。

静态文本调用PHP压缩模块实现GZIP压缩效果

如果服务器不提供对于静态文本的GZIP压缩模块,唯一的出路是通过调用PHP。有好几种方法调用PHP达到这个效果,下面介绍一种方法,好处是除了在目录下添加一个文件和修改.htaccess之外,不需要对别的代码作任何修改,所有的js,javascript的压缩都自动生效。(不过,如果你看不懂下面这些代码为什么能起作用,就不要使用这个方法)

首先,修改你的blog目录下的.htaccess文件,加入下面几行代码(注意修改你的blog的目录,这里默认是/blog/)

# to gzip your css, javascript, html file automatically
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/ #directory of your blog, change it to yours
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)(js|css|html|htm)$ /blog/redir.php?file=$1$2&type=$2 [L]
</IfModule>

其次,将下面代码保存在文件redir.php里,放到blog的根目录

<?php # this is the file redir.php, to gzip javascript and css
# set the request file name
$file=$_REQUEST['file'];

# Set Expires, cache the file on the browse
# Delete it if you don't want it
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");

# set the last modified time
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);

# output a mediatype header
switch ($_REQUEST['type']){
  case 'css':
    header("Content-type: text/css");
    break;
  case 'js' :
    header("Content-type: text/javascript");
    break;
  case 'html':
    header("Content-type: text/html");
    break;
  default:
    header("Content-type: text/plain");
}

# GZIP the content
if(extension_loaded('zlib')){ob_start();ob_start('ob_gzhandler');}

# echo the file's contents
echo implode('', file($file));

if(extension_loaded('zlib')){
  ob_end_flush();
  # set header the content's length;
  # header("Content-Length: ".ob_get_length()); # (It doesn't work? )
  ob_end_flush();
}
?>

大致解释一下原理,那段.htaccess代码把所有的css,js,html,htm文档自动转向到redir.php,redir.php则读取真实的文件内容,调用PHP压缩模块ob_gzhandler压缩后输出。

关于, , »