Gzip压缩css和js文件
Jun 26th, 2007 by king
前几天写了一篇合并css和js文件，加快浏览速度的文章，感觉上速度确实有点提高，而最后把速度仍然比较慢归因于国外服务器数据传输的速度慢 ！后来在Storyday那里看到一篇wordpress提速的文章，压缩css文件和js来提速。其实很早看关于wp优化的文章的时候就看到过对css和js进行压缩来提速，但是一直都不以为然。因为我想css和js文件经过合并，然后使用CSS Tweak和Shrinksafe分别压缩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压缩代码如下：
- <?php
- $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。
好像第一次还是比较慢，不过缓存了就好了，幸好这个代码有cache的功能
但是cache导致测试不方便咯～
http://www.ksarea.com/articles/
这个目录下没有html文件存在，所以你的缓存没有成功哦
我现在没有缓存所以该目录没有html文件呀
等下我缓存了以后再看
您好 我的博客也是由于加载js速度慢了很多
我现在首先想把所以js合并成为一个all.js.php
可是不知道为什么好像是路径不对 求助
现在已经把那些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 内容是什么啊
就是说你最先合并js和css文件是叫什么啊
是all.js.php吗
那么上面
<?php
$file=”all.js”;
header(”Expires:”.gmdate(”D, d M Y H:i:s”, time()+15360000).”GMT”); 。。。。
这些内容保存的叫什么名字呢
求助啊
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 » 杂 […]