原雅虎首席性能官、现任 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. 最后感言:网页速度是下一个竞争激烈的目标,必须在别人动手之前先优化自己!(否则会死得很难看,信不信?)
谢谢大家!