如何节约网站带宽

本来这个问题我不用关注，但是又不得不开始关注，挺早之前yskin用的站点控制每月10GB流量，而yskin的流量已经达到7GB左右。我之前用DreamHost上yskin朋友分的空间，一直以来也不注意流量—

—毕竟访问量很小。但是换到CPH来以后可以方便地看到统计流量，发现每天的流量接近150MB——而访问量也不过300罢了。很奇怪，还以为是被盗链之类，但是查了再查也没发现。看了看这篇“节约你的网站带宽”，原文应当是英文的，它原作者的一个网页居然可以每天流量9GB！怎么受得了——如今的带宽比空间贵！

好，现在让我们清除浏览器的Cache，登陆自己的一个网页，待完全显示后，经入Cache目录（IE为windows目录下的Temporary Internet Files目录），按Internet地址排序，然后把自己网站的所有文件拷贝出来。统计数据如下（当然，其中有一些文件事实上是浏览器自动生成的相关文件，可以刨除）：

属于本站的文件：37个；
主页面大小：64Kb；
文本文件（包括主页面、JS、CSS和其他临时非媒体文件）：11个，143Kb；
图片文件：25个，185Kb；

虽然，我的这个页面数据没有那位外国博友的对比度大（他的90%是图片），但是或许也反映了现在中国博客的一些通病。其实以上的统计并不太真实，IE的确自己做了很多“默默无闻”的工作，我们可以查看服务器记录，比如Apache服务器有Apache Usage Log，可以很清楚地看出相隔时间和相应数据，其中每一段记录中有“200 ****”之类的字样，前面的200表示正常传输，****指这一次传输的字节数。我们常会使用插件、JS调用等东西，这很容易带来大量的JS和CSS代码的下载（虽然一些时候是其他网站的，但如果该网站速度慢，就会拖累你的页面速度），还有那要命的图片，十分拖累页面。

所以我们需要三步走：

第一，简化页面。反正国内总是习惯于“热闹”、“繁杂”，看看那些大陆比较流行的博客程序，很多都是靠极其多的所谓“功能”来吸引用户，而且追求“集成”，自己想该都麻烦。所以博客还是推荐WordPress之类的基础性博客系统（现在国内的WP用户越来越多了），制作网站如果用别人的系统也要挑选使用者多的基础性系统，这样一方面可以有很大扩展空间，一方面本身结构简洁、性能突出。而对于页面，要首先有一个主题思想，不要什么都往上放，不要贪多求全，特别是不能把看到的所有好玩的JS、框架都堆积到一个页面上。对于一些东西使用的一个突出指标就是文件大小和速度。简化页面不仅让页面文件总大小减小，还让整体简化，方便网络和浏览器处理，提高速度。

第二，统筹Html、JS、CSS等代码。

我之前使用WP下的K2模版的TrueBlue风格，WP本身有一些JS代码，K2突出的缺点就是存在大量的JS和Css，而TrueBlue风格本身一个Css文件，外加一个IE下的ie6win.css文件和一个用于自定一个custom.css文件，加之的确需要一些插件，它们也都带许多css和js。举例子，Date-stamp插件其实可以很容易用几行代码就实现了，但它偏偏做了一个插件，还加入一个很短的css文件，要知道每个文件都需要一次GET，甚至有时候需要一些域名解析，所以我把需要加入的部分直接写入模版，再把需要的css加入TrueBlue的css中。而另一个极端是coolcode和pagepost等一些插件（这两个插件似乎都是一个人写的，怪不得那么邪～），很多时候一篇文章并不需要调用它的css和js，但偏偏要把它的几十乃至上百Kb的js和css文件加入每个页面之中，而且我们很多时候只用它的一部分，却需要每次下载它的全部内容。

对于没有必要的（很多人的确会这样，似乎插件是能力的象征）插件应当简化，一些复杂的插件可以只把需要的部分留下，而js代码要毫不留情地能删就删，css代码要合并。由于K2模版的确是一个比较优秀的模版，我需要经常升级，而TrueBlue最近一些过火的举动让我决定抛弃它，把原来TB的那些css文件全都合并（如果你熟悉css的性质，应当明白“合并”不只是物理合并），加以改造，从而形成了自己的风格。

许多人会使用一些在线css压缩工具或者在线JavaScript压缩工具来进行压缩，或者也可以对HTML进行压缩，总体来说我比较怀疑这些工具的实际效果，它们只不过做了去除空格、重构等的工作，有人说css和js压缩可以达到30%的压缩率，html可能只有10%左右。而主要问题是这对修改极其不利，当然你可以保留原始文件。

不过一般来说，http压缩就已经能够达到很理想的程度（上面的图片就是一个测试结果），况且进行js和css压缩与未压缩两种情况再经过http压缩后就大小基本差不多了，这也是我不太赞成js和css压缩的一个原因，http压缩有许多种，通过http压缩测试可以查看一些文件的压缩方式和比例，像我的主页原始大小是25071b，gzip压缩之后只有6170b，压缩比例达到了76%！而IIS和Apache都很容易实现http压缩，WordPress更是很“直接”，在设置里就有gzip压缩的选项。

JS压缩也可以使用ESC的程序，点击其中的download即可。压缩级别分为5种，从0到4。Level 0 :: No compression；Level 1 :: Comment removal；Level 2 :: Whitespace removal；Level 3 :: Newline removal；Level 4 :: Variable substitution。在WINDOWS命令行下执行：

cscript ESC.wsf -ow menu2.js menu.js 将会把menu.js按照级别2来压缩（默认级别为2）为menu2.js

cscript ESC.wsf -l 3 -ow menu3.js menu.js 将会把menu.js按照级别3来压缩为menu3.js

需要注意的是，级别4会把变量名修改，如果你的js中用到了全局变量或者类的话，就不能使用该级别了，否则其它使用你的js的文件可能会无法正常运行。所以一般建议可以使用级别3。

对比一下上面的几种方案，我使用相当多站点都会默认采用的prototype.js文件，它是一个基础性的js文件，由于使用的机会比较多，所以很多时候不需要重新下载，但也不管那么多了，就拿它开刀。

prototype.js文件：71260 bytes
Gzip压缩后：16311 bytes（压缩率78.0%）
js压缩（级别3）：53,948 bytes（压缩率24.3%）
js压缩后再Gzip压缩：13501 bytes（总压缩率81.1%，相对于未js压缩时压缩率为17.2%）

相信css代码压缩情况也差不多，所以总得来说，在有了Gzip压缩时没有太大必要去进行JS压缩。如果有一些js比较杂乱而且注释比较多的时候，可以使用一下JS压缩。

警告：在进行任何压缩的时候一定要有备份，为了以后的修改，也需要留有备份。JavaScript Code Improver软件可以用来格式化JS代码以方便阅读。

第三，外部图片托管。这一点最近几年逐渐流行开来，毕竟宽带时代我们需要图片和各种媒体。

上文提到的那位外国博友提到了Imageshack、Flickr、Photobucket、Amazon S3四个网站，但当然都是外国的，整体来看四个网站速度都还能够接受(ping 370+ms)。Imageshack提供免费无限制的存储空间，但是每张图片每小时的流量不超过100MB（应该足够用，除非某个图片太滥用）。Flickr是国内用户比较推崇的，每月可以上传100Mb的图片，空间无限，不过一般要求必须有链接到Flickr的链接，最近Flickr被封了，这也是国内网民最担心的事了，当然，我们有很多办法突破。Photobucket免费帐户的流量限制为10GB/月（约14MB/小时）。Amazon S3空间费用15美分/GB，流量费用20美分/GB。

作为国内用户，可以用Yahoo相册，网站速度应当说不错（ping 60+ms），空间似乎没说，也就是无限了。还有网易相册等等的门户网站都有。专业的图片托管网站似乎都还不够专业……一般来说还是强烈推荐Flickr，速度也是可以的，不过得注意整理好衣服，带好武器，去突破。

当然，还有RSS的问题，访客读取RSS照样占用带宽，而且占用量是相当大，一些比较有名的博客中RSS占用带宽可能超过一半。现在国人也都知道了，使用feedburner托管RSS能够很好地解决这一问题。