优化WordPress心得(1) Gzip压缩CSS和JS

Author: cbm

29 五 2008

提前完成手上的事情，来总结一下前不久给自己小站优化心得。

gzip压缩功能在wordpress 2.3时代已经使用得普及了，好处很明显，而且99%的浏览器都支持以gzip模式压缩的网页。压缩率也非常的高，可达60%~90%，对于优化网页下载速度是非常见效的。（但是2.5版本开始没有这项功能了，如何手动开启?）

但是，由于是压缩就会耗费服务器的CPU资源，所以在CPU使用高的时期，Gzip压缩模式下的网页访问速度可能比没有压缩的网页还要慢。

这个就是所谓的时间换空间的概念了。我想，要是能解决了每次访问都要CPU来压缩的问题，直接从压缩文件来输出那就可以弥补这一矛盾的问题了。

我想到了先对页面引用的css和js文件。这些文件在页面引用时默认就是以静态文本文件传输。没有Gzip过。对于这样的文本型文件，如果做了压缩了，将有极大的压缩空间，极大减少流量，明显的减少传输时间。

来实际的了，在根目录的.htaccess里面加上RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

这样可以让所有的css和js文件访问就以相对根目录的路径以GET变量传递到了gzip.php，交给gzip.php来全权处理了。(这里实在是很感激rewrite的强大！无须改动其他的主题文件来实现功能。)

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");
	}
}

?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<?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");

}

Download: gzip.php gzip.php (1.3 KiB, 380 hits)
启用gzip压缩模式传输

现在我这种Gizp处理也算是静态化处理，对于静态的问题。会带来好处，也有坏处，对于一些文章的访问统计和评论页面如果静态化了貌似就不能正常工作了。对与js和css文件的Gzip压缩方面，用了这段时间觉得还满意。

还有些其他的需要总结，现在想到的有：
WordPress中的一些常用函数的输出如何cache到文件，使其不再每次都请求数据库的查询、耗费CPU计算，也是直接从cache中读取，还有清理cache的管理页面，这些下次再写。

29 Comments , 78,777 Hits
Filed under: 前端技术, 服务器相关
Tags: php, WordPress

RSS feed for comments on this post

29 Responses for "优化WordPress心得(1) Gzip压缩CSS和JS"

mycya
2012-05-08 02:05 回复

上传到服务器之后如何在模板里面压缩呢。
完整的URL应该怎么写
分享互联网
2012-09-12 21:09 回复

同服务器的朋友！最近百度抽风，检查下怎么回事，走到邻居这，打个招呼！

cbm's land

优化WordPress心得(1) Gzip压缩CSS和JS

29 Responses for "优化WordPress心得(1) Gzip压缩CSS和JS"

Leave a Reply 点击这里取消回复。

Connect Me

Top Comments

Top View

Pages

Friends

Shortcut

Archives

Meta