完美启用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连接

原来的:

<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,需要修改比较多的文件和代码,所以记得备份哟,如果做错也好有个挽回的余地。

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

1 Star2 Stars3 Stars4 Stars5 Stars (无评分)
Loading...

分类:WordPress | 标签:

已有 2 人 对 ”完美启用Gzip压缩JS、CSS” 进行了评论

  1. itoldme.net说道:

    没用这种方法,在那个网站检测就是启用gzip了,汗

  2. itoldme.net说道:

    补充一些,我用了cPanel的优化网站,不知道是不是这个原因