Steve Souders: In Search of Speed 学习笔记

原雅虎首席性能官、现任 Google Web 性能专家 Steve Souders，近期在 LA 隆重举行的 SpeedGeeks 会议上发表重要讲话：In Search of Speed（slides, video)，以下为学习笔记：

1. 以 iGoogle 为例，前端页面组件渲染的时间占了整个页面打开时间的 91%，前端优化的重要性不言而喻。

2. 前端优化十四条原则，是个人都知道，不必多说了。

3. 如果想要更快一点，可以参考新书 Even Faster Web Sites。

4. Google 页面延时增加 0.4 秒，搜索量会下降 0.6%；雅虎页面延时增加 0.4 秒，访问量会下降 5-9%；Bing 页面延时增加 2 秒，收入会下降 4.3%。

5. 高性能 = 更好的用户体验 + 更多访问量 + 更多收入 + 成本节约

6. 为什么没有那么多人来做 性 能 优 化 这么有前途的事呢？因为这他妈的太难了！

7. 当然，如果这事没那么难的话，是个人都能做了！

8. 我们今年的口号是：本来就快！（Fast by Default）

9. Aptimize 公司的性能优化神油：整合 JS、整合 CSS、Sprites、Data: URIs、更长的过期时间、精简 JS 和 CSS、automatically in real time。

10. 在 http://sharepoint.microsoft.com 上抹了点神油，果然有奇效：Empty Cache 的 requests 从 96 降到 35，Primed Cache 的 requests 从 50 降到 9。JS 减少了 7 个，CSS 减少了 12 个，图片减少了 25 张。页面性能提升：Empty Cache - 46-64%；Primed Cache - 15-53%。 详见： http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx

11. 有家“典型电子商务网站”，名叫 StrangeLoop Networks，自打抹了神油：每次访问页面数由 11 提升到 16，浏览网站平均时间由 24 分钟提升到 30 分钟，转化率上升了 16%，订单价值上升了 5.5%。

12. 为啥某些网站比较慢？“某些”包括但不限于：Google Mail、Google Docs、AOL、Twitter、ESPN、Best Buy、IKEA、CNN...（这些网站钱多人傻，快去推销优化服务！）

13. 原因是由于缺乏 Progressive Rendering（渐进渲染）！

14. 对比五家搜索引擎：Google Search、Yahoo Search、Bing、Ask 和 AOL Search，页面打开 0.5 秒时，没有一个显示内容，等到 1 秒时，Google Search 和 Bing 显示了主要内容，直到 2 秒时，Ask 还是没有显示任何内容。

15. 快使用双截棍： WebPagetest.org

16. 对比六家新闻网站：Yahoo News、CNN、CNET、Google News、NY Times 和 MSNBC，页面打开 1 秒时，Google News 率先显示了 Logo，直到 4 秒时，CNN 还是空白一片。

17. Progressive Enhancement：deliver HTML、defer JS、avoid DOM、decorate later。

18. 先做 Progressive Enhancement，再做 Progressive Rendering。

19. 最近新闻：http://spriteme.org 帮助优化 sprites，http://www.browserscope.org 用于对比不同的浏览器访问，HTTP Watch Studio 支持 HTTP 存档格式（HAR），@font-face 标记如果放在SCRIPT 标签下方则将导致 IE 浏览器阻止渲染。

20. 讲话要点，必须掌握：关注前端！使用 YSlow 和 PageSpeed 工具！ Progressive enhancement -> progressive rendering!

21. 最后感言：网页速度是下一个竞争激烈的目标，必须在别人动手之前先优化自己！（否则会死得很难看，信不信？）

谢谢大家！