三步让你在共享主机(比如Bluehost)的web服务提速50%?Gzip css/js !

作者:半瓶墨水 链接:http://www.2maomao.com/blog/bluehost-gzip-css-js/

由于Ajax的兴起,现在的web服务多数对css和javascript有很强的依赖,网页上的脚本多达几百K。
尤其是使用了比较肥大的ajax框架的网站,这些脚本和css文件在几乎所有网页上都会被使用,严重拖慢了网站的整体速度。

解决方法很简单,将你的文件传递方式搞成gzip即可,一个50K的脚本gzip压缩以后只需要传递15K左右,压缩率高达70%
如果你的网站大量使用了js和css,使用这种方法提速50%非常有可能!

怎么搞呢?参见这篇文章:[转贴] 配置IIS和Apache的HTTP压缩-Gzip (IIS 6.0配置Gzip Apache配置Gzip

但是,但是,但是,如果你是共享主机呢?像Bluehost这样的,怎么办?
别着急,后面介绍的三步曲非常简单,并且完全不用动以前写的代码,不会有人和的冲突问题!

先说说我面临的问题
————————————————————
近几天在学jQuery,使用以后应该会对代码发芽网(fayaa.com/code )的体验有所提升
原来由于js不熟悉导致的一些问题应该也可以避免了

但是,jQuery毕竟体积不小,min版也有54.5k,比代码发芽网的首页还大。
发芽网定位于小而精的产品,所有这样的大小肥了一点儿。
在jQuery网站上看到可以使用gzip压缩,但是实际上Shared host可能不直接提供gzip,比如Bluehost就没有。
上面那个链接中也提到一个简单的php脚本,但是在我看来还是有些复杂。

今天终于搜到一篇文章提到Bluehost上面如何搞定Gzip css/js,根据文章上的方法成功的解决了Bluehost上的css/js文件压缩的问题。

下面贴一下如何三步搞定Bluehost上gzip传输css/js,实现网站提速:
————————————————————
这里用css文件做例子,javascript(.js)文件照葫芦画瓢。
一般情况下css文件都存在一个单独的目录下,比如说是styles目录,进入这个目录
1. 建一个文件命名为.htaccess(包括那个点儿),里面写:

AddHandler application/x-httpd-php .css

2. 再建立一个文件命名为gzip-css.php,内容为:

<?php
ob_start ('ob_gzhandler');
header('Content-type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');
 
header('Expires: '.gmdate('D, d M Y H:i:s',time() + 2629743) . ' GMT');
?>

3. 再建立一个文件php.ini,里面内容为:

[PHP]

; Automatically add files before any PHP document.
auto_prepend_file = gzip-css.php

好啦,万事大吉了,对于css文件来说,所有这个目录及其子目录下的css文件都已经自动gzip了!

下一步就是重复上面的步骤,注意
* 在第一步把.css改为.js
* 在第二步文件名为get-js.php,并把text/css改为application/javascript
* 在第三步把get-css.php改为get-js.php

搞定了!就是这么简单!你完全不用动以前写的代码!

最后,如果你不相信,用curl或者firebug里面的”Net”小工具查查原本54K的jQuery现在有多大:
http://www.fayaa.com/static/scripts/jquery-1.2.6.min.js

好吧,我直接说答案好了,17K!,超过70%的提速!
怎么样,赶紧试试吧!

共 9 条评论

php? 呵呵。。
不会。

@cssrain 呵呵不需要会,只要按着要求操作就行,我也不大懂php
这里的方法是用让服务器处理css/js文件时候按照php处理,这样就可以加上gzip压缩了

暂时不会弄, 现在宽带还行,暂时不考虑 压缩js。

@cssrain 嗯,有速度限制的时候再考虑优化也可以。
不过优化网页不光是考虑服务器带宽,也同时影响了别人打开你的网站的速度。

  • Xiangee 七月 20th, 2008 5:48 pm

1.2.6的压缩版只有26kb啊 地址:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js

@Xiangjee
压缩版并不推荐使用,理由在这里:http://docs.jquery.com/Downloading_jQuery
“The minified version, while having a larger file size than the packed version, is generally the best version to use on production deployments. The packed version requires non-trivial client-side processing time to uncompress the code. ”

  • Xiangee 七月 20th, 2008 11:47 pm

@半瓶墨水
谢谢给出解释,我才下full学习测试,还有看细节呢。

  • 秋风 八月 2nd, 2008 7:41 pm

楼主
麻烦告诉一下你的apache 怎么怎么配置gzip的
谢谢了

@秋风 我没有配置它,是虚拟空间服务商(Bluehost)默认的配置

发表评论

  • :(
  • :)
  • :D
  • :X
  • :^
  • :d
  • :e
  • :h
  • :k
  • :l
  • :p
  • :q
  • :s
  • :v
  • :w
  • :x

注意:评论中需包含至少一个中文字,否则视为无效