完美启用Gzip压缩JS、CSS

标签： CSS , GZIP , JS , WordPress , YSlow , 优化 , 教程 | 作者：万戈 | 点击量1985次

　　这已经是我自《开启GZIP，提速Wordpress》和《给Wordpress开启Gzip功能》两篇文章后第三次介绍Wordpress中的Gzip功能，而这三篇中所涉及的Gzip又各有不同，可以结合实用。在《给Wordpress开启Gzip功能》中提到的Gzip功能很简单，但是只对Wordpress输出的html进行压缩，所以效果有限。而这篇文章提及的Gzip功能将对Wordpress中的重头戏JS和CSS进行压缩，这将使Wordpress的载入速度达到一个质的飞跃！

　　1、把模板目录下的style.css复制一份出来，命名为style.css.php，接着在style.css.php顶部加入这句：

<?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

　　在最后加上下面代码：

<?php if(extension_loaded('zlib')) {ob_end_flush();} ?>

　　 2、按照下面的方式修改header.php中的css连接

　　原来的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css"/>

　　修改后的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

　　这样，你的CSS就被Gzip压缩了，同样的方法可以压缩你的JS。只是在JS的顶部加入的是如下代码：

<?php if ( extension_loaded('zlib') ) {ob_start('ob_gzhandler');} header("Content-Type: text/javascript"); ?>

　　说说我自己使用Gzip压缩后的效果吧，在《开启GZIP，提速Wordpress》中我就提到，根据YSlow的要求，其中Compress components with gzip这项，我的得分仅为F，严重地影响了小站的整体评级。开启Gzip之后，我再用YSlow去检测，现在我的得分是Grade A！再贴个图让各位有个直观的理解，看看我的JS和CSS减了多少肥吧。JS和CSS的大小从102.1K直降到33.8K，足足减少了三分之二的文件大小，如果你有用prototype.js这样的大型JS，那压缩之后的效果就更可观了。！

　　开启此Gzip功能比《给Wordpress开启Gzip功能》中提到的Gzip要复杂的多，因为要对所有JS和CSS一一修改，且要找到并修改调用该JS和CSS的代码，如果你还是刚刚踏入Wordpress大家庭的小菜菜，那我还是建议你用《给Wordpress开启Gzip功能》中的插件或php.ini来实现Gzip。

　　最后友情提醒一下，因为使用此Gzip，需要修改比较多的文件和代码，所以记得备份哟，如果做错也好有个挽回的余地。

» 转载请注明来源：Life Studio » 《完美启用Gzip压缩JS、CSS》

» 本文链接地址：http://wange.im/compress-js-and-css-with-gzip.html

» 订阅本站：http://feed.wange.im

2009-06-8 19:27 分类: 电脑网络 , 精品推荐 24 条评论

相关日志

本文已盖 24 层楼

回复流年说：

2010年07月11日于1:37 下午

记录待用
回复老七说：

2010年07月3日于1:57 上午

想搞了再来看
回复蛋卷说：

2010年07月2日于1:56 上午

为什么这一段技术博这么多了
回复 zzy90 说：

2010年06月6日于10:17 上午

总是听到你们说YSlow，想问下YSlow是什么??
- 回复万戈说：
  
  2010年06月6日于11:00 上午
  
  yslow是firefox的一个插件，可以检测网站的载入速度和瓶颈
回复猪八戒说：

2010年06月3日于12:36 下午

老鸟啊。
回复 kc 说：

2010年01月21日于4:09 上午

为什么我一用把css改为css.php的办法就会css丢失呢
回复 evlos 说：

2009年12月3日于3:51 下午

话说谷歌管理员提供了网站加载速度评测的功能 ~

结果说我：
您网站的平均网页载入时间为 9.7 秒（更新时间：2009-11-30）。
该网站比 92% 的网站慢。

然后我就很纠结地问了百度然后就被传送过过来 ~
先踩一脚然后学习一下 ~
- 回复万戈说：
  
  2009年12月3日于4:12 下午
  
  我也测了，6.1 秒，比 80% 的网站慢
回复章鱼说：

2009年06月14日于9:16 上午

有些js压缩了但Yslow没有显示
- 回复万戈说：
  
  2009年06月14日于9:56 上午
  
  照理说应该不会的，你清除缓存再试试
回复 willin 说：

2009年06月10日于9:31 下午

Google 的 API 庫有 jQuery, Prototype, MooTools, SWFObject 可共用.
像你的主題是用自己的 js, 只能自己動手了.
- 回复万戈说：
  
  2009年06月10日于9:36 下午
  
  是啊，你说的这些JS我都没用到
  自己动手，丰衣足食，嘿嘿
回复 killfox 说：

2009年06月9日于2:17 下午

在INOVE主题的HEADER.PHP中找不到对应的字符号，暂时搁置！
- 回复万戈说：
  
  2009年06月9日于4:23 下午
  
  不会吧，css一般都是在头部加载的啊
  那你找找哪个文件调用style.css就是了
  没用过inove的主题，所以我也不是很清楚
- 回复 dboy365 说：
  
  2010年05月12日于1:11 上午
  
  INOVE中对应的代码是：
  @import url( );
  所以找不到，嘿嘿，只要将换成style.css.php的地址就OK了
回复 killfox 说：

2009年06月9日于2:10 下午

NB,我也来试试！
回复小沐说：

2009年06月9日于9:17 上午

先淡定！
回复老悦说：

2009年06月9日于12:06 上午

什么东东什么东东？
原版一般会比修改版好点，软件不都这样吗？呵呵
越是被人修改越是出现多多少少的麻烦……
但修改可以更能让自己满意咯……
回复一米说：

2009年06月8日于9:45 下午

好，有学一招。