完美启用Gzip压缩JS、CSS

这已经是我自《开启 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 连接

原来的：

修改后的：

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

<?php if (extension_loaded(‘zlib’) ) {ob_start(‘ob_gzhandler’);}header(“Content-Type: text/javascript”); ?>

完美启用 Gzip 压缩 JS、CSS 说说我自己使用 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，需要修改比较多的文件和代码，所以记得备份哟，如果做错也好有个挽回的余地。

原文地址：http://wange.im/compress-js-and-css-with-gzip.html

正文完