这已经是我自《开启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顶部加入这句:
在最后加上下面代码:
2、按照下面的方式修改header.php中的css连接
原来的:
修改后的:
这样,你的CSS就被Gzip压缩了,同样的方法可以压缩你的JS。只是在JS的顶部加入的是如下代码:
说说我自己使用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,需要修改比较多的文件和代码,所以记得备份哟,如果做错也好有个挽回的余地。
发表回复