如何节约网站带宽

路由器

本来这个问题我不用关注,但是又不得不开始关注,挺早之前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等代码。

http-zip

我之前使用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代码以方便阅读。

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

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

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

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

One Comment:

  1. Good post. I learn something totally new and challenging on sites I stumbleupon every day.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据