随着网站功能的日益增强,网站的代码量也会越来越大,而且进入Web2.0富客户端以后,网站主更加关注网站的美观和用户的体验,可是要产生这样的 视觉效果,图片CSS和JS就是担负起很大的责任,这样就使网站的页面变的很大,从而影响网站的访问速度。试想一下,一个只有10K的页面和一个100K 的页面哪一个能更快的展现出来,答案当然是10K的页面,许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间大约在 6~8秒之间。也就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。
既然网站页面的大小如此重要,我们应该如何来优化自己的页面呢?
当然首先要保证你的HTML代码书写要规范,要知道DIV要比TABLE展示的快,所以布局尽量用DIV和CSS。JS和CSS代码都写在外部文件,可以 分模块来减小他们的大小,每个模块引用各自模块的JS和CSS,然后对每个CSS和JS文件进行压缩。图片没有办法压缩,但是我们可以通过工具来查看页面 引用的所有图片的大小来进行优化。
下面我来介绍一下分析网站和压缩代码的工具:
分析网站的工具:YSlow
YSlow是Yahoo开发的一个用于测试分析网站优化的Firefox工具插件,安装时还必须依赖于Firebug。YSlow针对网站速度体验上的优 化,将其总结为13条,分别用F到A的指标来对你的网站速度做出评价并给出数据,F代表最差,A代表最好。我们可以通过分析得到的数据对自己的网站和服务 器做相应的优化。不仅如此,YSlow还为我们统计了页面发起的HTTP请求和页面的大小,下面是统计的示例:
有了这个统计,也可以很好的引导我们对代码和媒体进行优化。
压缩代码的工具也是Yahoo公司提供的一个在线的压缩器:Online YUI Compressor,这个压缩器可以对所有的JS和CSS进行压缩,压缩完以后会提示 压缩的比例,使用起来也是非常方便。