WordPress

WordPress完美启用Gzip压缩JS、CSS提升访问速度

猴猴 · 3月6日 · 2011年 · 1777次已读

昨天安装了一个coolcode插件,然后今天用火狐YSlow测了一下,Compress components with gzip项目评分变成B了,然后提示一个js文件和一个css文件没有压缩。想了半天只能想起来个大概怎么改,但是具体忘了。然后就冒出来个想法,干脆把怎么优化博客的东西都写出来,以后用了也好找哈~

压缩CSS文件

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"); ?>

        现在再去测试一下,Compress components with gzip项目已经变成A了!这一项对网页的整体打开速度提升还是很明显的。只是在修改的时候要记得把原来的文件备份一下。省的出现悲剧就晚了。

11 条回应

取消回复

  1. 所谓刚子2012-4-29 · 16:47

    一直在尝试更好的简便方法!

    • 猴猴2012-4-30 · 21:33

      你的博客和我的一样,IE下面会错位,chrome下面没事。。。

  2. 社交媒体2011-10-10 · 10:34

    比较复杂,我还是安装插件吧。

    • 猴猴2011-10-13 · 14:12

      其实也不难啊,跟着教程很容易的,插件安装的多了也不好的。祝你成功哦~ :nuli

  3. Luckerme2011-10-3 · 19:10

    js文件 的最后还需要加上这句吗?

    • Luckerme2011-10-3 · 19:11

      在最后加上下面代码:

      • Luckerme2011-10-3 · 19:12

        代码显示不了…

        ?php if(extension_loaded(‘zlib’)) {ob_end_flush();} ?

  4. Luckerme2011-10-3 · 19:05

    学习下.. 正在找如何开启呢…

  5. 绿篱2011-3-11 · 23:32

    我的这一项木牛压缩也是A的飘过。。。 :daxiao

  6. 子夜星辰2011-3-6 · 14:02

    对于10K的CSS有明显的提升吗?
    有没有什么缺点?如果CCS里有CSS3代码。

    • 猴猴2011-3-6 · 14:19

      缺点应该是没什么。那当然是css文件越大压缩效果越明显。不过现在gzip使用已经很普遍了。你可以试验一下能压缩到多少。一般都能压缩70%以上的。具体意见你可以参考YSlow优化。