Feed on
Posts
Comments

Gzip压缩css和js文件

前几天写了一篇合并css和js文件,加快浏览速度的文章,感觉上速度确实有点提高,而最后把速度仍然比较慢归因于国外服务器数据传输的速度慢 !后来在Storyday那里看到一篇wordpress提速的文章,压缩css文件和js来提速。其实很早看关于wp优化的文章的时候就看到过对css和js进行压缩来提速,但是一直都不以为然。因为我想css和js文件经过合并,然后使用CSS TweakShrinksafe分别压缩css和js文件,就可以把两者的总大小缩减至16K+3K,再使用Gzip压缩意义不大。现在发现我彻底错了!

我合并了css和js文件,只是减少了HTTP Requests。因为每个HTTP Requests都有一定的延时,所以较少HTTP Requests数量自然可以缩短一定的访问时间。但是需要下载的首页代码的大小也是一个重要的因素。使用Web Page Analyzer查看了下本站首页,其实html代码仅仅9K,而css和js一起却将近20K,也就是说其实大部分的时间都在下载css和js文件,而且它们是在head里载入的,下载完成之前,只能看到空白页,这样影响的访问速度非常明显!所以对css和js文件进行压缩是非常有必要的!

尝试使用wordpress提速这篇文章里提供的Gzip压缩css和js文件的代码,但是发现这样会导致整个style.css不起作用!也不知道为什么?以前在我的blog里使用Storyday的cos-html-cache插件里读取cookies代码也会出现一些问题!难道是RPWM?

现在使用阅微堂提供的Gzip压缩代码如下:
$file="all.js";
header("Expires:".gmdate("D, d M Y H:i:s", time()+15360000)."GMT");
header("Cache-Control: max-age=315360000");
$mtime = filemtime($file);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
header("Last-Modified:" . $gmt_mtime);
$ext = array_pop(explode('.', $file));
switch ($ext){
case 'css':
header("Content-type: text/css");
break;
case 'js' :
header("Content-type: text/javascript");
break;
case 'gif':
header("Content-type: image/gif");
break;
case 'jpg':
header("Content-type: image/jpeg");
break;
case 'png':
header("Content-type: image/png");
break;
default:
header("Content-type: text/plain");
}
if(extension_loaded('zlib')){ob_start('ob_gzhandler');}
echo implode('', file($file));
if(extension_loaded('zlib')){
ob_end_flush();
}
?>

上面代码的将本站20K左右的css和js代码压缩到了6k以下,而且它不仅压缩代码,还要求浏览器端Cache这个文件,这样不用每次浏览都下载这些文件。如果你没有进行css和js合并(强烈建议合并)的话,那么在echo处添加多个css或者js文件即可。

现在的访问速度真正有了一个质的飞跃,首页的访问时间至少提高了4s。

9 条评论

  • At 2007.06.28 20:54, king said:

    好像第一次还是比较慢,不过缓存了就好了,幸好这个代码有cache的功能
    但是cache导致测试不方便咯~

    • At 2007.06.29 08:47, cosbeta said:

      http://www.ksarea.com/articles/
      这个目录下没有html文件存在,所以你的缓存没有成功哦

      • At 2007.06.29 08:55, King said:

        我现在没有缓存所以该目录没有html文件呀
        等下我缓存了以后再看

        • At 2008.02.21 10:05, Sunxc said:

          您好 我的博客也是由于加载js速度慢了很多
          我现在首先想把所以js合并成为一个all.js.php
          可是不知道为什么好像是路径不对 求助

          • At 2008.02.21 14:21, Sunxc said:

            现在已经把那些js都加到all.js.php里 并在head.php里引用了 显示是正常了
            但速度还是慢
            我想问下你在http://www.ksarea.com/articles/20070626_gzip_compress_css_and_js_documents.html
            这里那个all.js是哪里的啊
            你的<?php $file=”all.js”;
            header(“Expires:”.gmdate(“D, d M Y H:i:s”, time()。。。
            这些东西应该是all.js.php文件里的内容吧
            那all.js 内容是什么啊

            • At 2008.02.21 14:29, Sunxc said:

              就是说你最先合并js和css文件是叫什么啊
              是all.js.php吗
              那么上面
              <?php
              $file=”all.js”;
              header(“Expires:”.gmdate(“D, d M Y H:i:s”, time()+15360000).”GMT”); 。。。。
              这些内容保存的叫什么名字呢
              求助啊

              • At 2008.02.22 11:49, king said:

                all.js 当然是你的web所要用的到js
                而all.js.php应该是php代码

                • [...] 最开始,要学习阅微堂的blog提速系列文章,看完他写的东西和给的链接,学到不少东西 1.合并和压缩css,js并放在合适的地方加载,合并用的是合并css和js文件,加快浏览速度的方法,简单压缩css用的是tweak,简单压缩js用的是JsMinGUI.exe 2.使用压缩传输和强制cookie:这个时候css和js已经确认修改好,不轻易动了,这里会给他们价格expire,用的阅微堂里压缩传输你的文件的方法,不过最好在redir.php里加个判断,不要把压缩传输的静态html类型也设置expire,要不然客户端不随页面更新 3.能不用的插件尽量不用,现在基本上没用什么插件,有也几乎都是后台的 4.css sprite,经过以上设置基本上,打开页面80%以上的时间几乎都用在了请求这个主题的图片上了,但由于css里的图片都用了background-position里的关键字,不能混合使用了放弃了。 5.使用cos-html-cache静态化网站,使用的时候需要注意除了按readme里说的,用2.5的还要按这里的方法,把cos-html-cache.php里的wordpressuser_改为wordpress_,否则登录状态也触发缓存。 6.分析wordpress,并优化代码。算了,没能力。 在阅微堂给的一个链接里推荐一本书,High Performance Web Sites,对提高网站性能有一个很好的认识,在emule里搜索可以吓到这本书。 由于主要是个人自娱的,除了这个有点重的主题,还有对javascript一窍不通,php仅能读简单的代码,没能力自由hack,对网站的捣鼓,暂时到此了。虽然学到了不少,但其间也方法不当做了不少无用功。 This entry was posted on Friday, April 4th, 2008 at 6:58 pm and is filed under 杂. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Filed under » 杂 [...]

                  • At 2008.11.13 06:28, Clarissa Thomas said:

                    3qmgegrikktjt526

                    压缩

                    (Required)
                    (Required, will not be published)