加速网站的最佳实战
本文译自http://developer.yahoo.com/performance/rules.html
为使网站的浏览速度更快,本文的34个优化手段分为7类:
Content/Server/Cookie/CSS/Javascript/Images/Mobile/
1.最少化HTTP请求
前端花费了终端用户80%的请求时间,而这大部分时间用于下载页面中的组件:例如图片、样式列表、脚本、Flash等等。减少回应的
组件数量即可减少需要实现页面的HTTP请求数量,这种技术是加速调入页面的关键。
减少页面中组建数量的一种方式就是简化页面设计。但是是否存在一种实现美化页面内容同时又能实现快速响应时间的方法呢?这里
就有些技术在保证美化页面设计的同时,减少HTTP请求的数量。
合并文件:通过将所有脚本合并为一个脚本文件或者将所有的CSS并成单个样式列表可以有效减少HTTP请求数量。页面之间的脚本或样
式的不同给合并文件带来了很多难题,但是在设计中按照这种方法可显著提高响应时间。
CSS Sprite:这是更好实现减少图符请求数量的方法。这种方法将背景图片合并为单张图片,通过使用CSS 的background-image 和
background-position属性来显示预期图片段。
Image map:这种方式是将多张图片合并为一张图片。图片的总大小不变,但减少了HTTP的请求数量达到加速页面显示的目的。这种方
式主要用于只有当页面中的图片是连续显示(例如:导航栏)时的情况。定义图片地图的坐标是一种效率不高的方式,而且将这种方
式用于导航也不太合适宜,所以这种方法不推荐使用。
Inline Images:这种方式使用data:URL scheme将图片嵌入到实际页面中,代价是增加了HTML文档的大小。将内联图片合并到可缓存
的样式列表中也是一种减少HTTP请求数量的方法,而且不增加页面的大小。但主流浏览器对这种方式并不支持。
减少页面的HTTP请求数量仅仅是加快浏览页面的开始,对于提高首次浏览者的访问这是首要准则。就像Tenni Theurer's blog post
Browser Cache Usage - Exposed!中分析的一样,日常网站40%~60%的浏览者在缓存中并不存在要访问的页面。加速首次浏览者的访问
速度是实现用户更佳体验的关键。
使用内容传送网络
用户对Web服务器的访问对响应时间存在影响。通过在多点地域分布的服务器存储页面从用户角度来讲能够使页面显示更快,但如何切入呢?
实现物理布式存储页面的第一步就是在设计Web程序时避免分布式架构。
<待续>