许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在6~8秒之间。这就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。
Google做过一个试验,显示10条搜索结果的页面载入需要0.4秒,显示30条搜索结果的页面载入需要0.9秒,结果后者使得Google总的流量和收入减少了20%。
Amazon的统计也显示了相近的结果,首页打开时间每增加100毫秒,网站销售量会减少1%。
由此可见,网页的打开速度,对于一个站长,尤其是对于营利性网站来说,是多么重要。但是,从输入网址到网页全部打开,这段时间内,浏览器与服务器之间都发生了什么?时间都消耗在哪里的呢?
雅虎实验室的研究表明,对于大多数网站来说,只有不到10%-20%的响应时间是消耗在从Web服务器上下载HTML文档到浏览器中的。哪另外的80%到90%的时间,消耗到哪里去了呢?
雅虎的前首席性能专家、著名网页性能分析YSlow的创建者Steve Souders的《High Performance Web Sites》(国内翻译为:《高性能网站建设指南》)给大家揭开另外80%-90%的秘密。书中,Souders简要地提出来关于Web前段性能的十四条黄金法则。如下:
- Make Fewer HTTP Requests(尽量减少HTTP请求)
- Use a Content Delivery Network (使用内容分发网络(即CDN))。我前面写过一篇文章,来介绍CDN网络的使用。请看“使用Microsoft Ajax Content Delivery Network(CDN)优化WordPress加载速度”。
- Add an Expires Header(添加Expires头)
- Gzip Components (压缩组件)
- Put Stylesheets at the Top(把CSS放在HTML最上面)
- Put Scripts to the Bottom (把脚本(比如JavaScript)放到HTML最下面)
- Avoid CSS Expressions(避免使用CSS表达式)
- Make JavaScript and CSS External(使用外部的JavaScript和CSS)
- Reduce DNS Lookups (减少DNS查询次数)
- Minify JavaScript(精简JavaScript)
- Avoid Redirects (避免重定向)
- Remove Duplicate Scripts(删除重复代码)
- Configure ETags (配置ETag)
- Make Ajax Cacheable(使用Ajax缓存)
从十四条黄金法则扩展开来 ,每一条都是一支学习树,看完了解简单,一条一条掌握就来日方长了。这十四条黄金法则让你明白前端优化的准则,自己动手处理的时候有明确目标方向。同时,从这本书里,让我意识到,除了标准的xHTML/CSS/JavaScript,一个优秀的Web开发工程师还应该具备其他几种技能:
- 精通浏览器工作原理及不同浏览器间的差异
- 理解HTTP协议
- 掌握服务器端编程
- 了解网络环境配置
作为一个开发人员,不能再满足于能实现,而要向更优的实现进军。不满足于言简意赅的操作指南,而要向对内部原理的融会贯通进军!所以,我计划针对每一条写一篇原理介绍以及一个实践日志。关于CDN的实践前段时间已经发出来了,请看“使用Microsoft Ajax Content Delivery Network(CDN)优化WordPress加载速度”。
注:
- 十四条黄金法则的翻译,是我自己翻译的。本人水平有限,翻译的难免有些不妥。如果有不正确的地方,请留言指正。谢谢!
参考资料
- 百度百科:内容分发网络
- 网页打开速度的心理学
- Google的实验(需要翻×墙)
- 部分文字参考了一下几人的书评
特别声明:
本文章,发表在博客园的同时,也发布到我的个人博客地瓜哥上。转载请注明作者和原文网址。
地瓜哥:http://www.diguage.com/archives/34.html
博客园:http://www.cnblogs.com/diguage/archive/2012/07/24/2605913.html