完美启用Gzip压缩JS、CSS « 老薛主机帮助中心

完美启用Gzip压缩JS、CSS

25 10 月, 2011 | 老薛主机 | 15,934 views | 评论(2)

这已经是我自《开启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压缩后的效果吧，在《开启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，需要修改比较多的文件和代码，所以记得备份哟，如果做错也好有个挽回的余地。

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