如何解读页面性能

如何解读页面性能

Transcript

1. 如何解读页面性能 heavenhuang
2. • 如何找到关键数据？ • 多快才算快？ • 想要更快要如何做？ • 怎么收集优化成果？
3. 问题总在前端
5. YSlow:buy.qq.com
6. 如何找到关键数据？ 工具：Firefox、 Chrome、测速系统…… 关键点： • 首屏展开时间 ◦ 首屏体积 • 主功能可交互时间 ◦ JS加载时间 ◦ JS执行时间 • 页面完成时间
7. 如何找到关键数据？ 间接数据 • 页面模块点击 • 运营重点模块 • 成交转化 • 用户访问频率
8. 多快才算快？ 页面体积 / 网速 = 基本访问时间 实际访问>基本访问时间 = 慢
9. 多快才算快？ JS加载时间 + 执行时间 = 主功能可交互时间 主功能可交互时间 > 主功能展示时间 + 1秒 = 慢
10. 想要更快如何做？ • 让访问速度更快 ◦ 合理cache配置 ◦ 文件GZIP ◦ 图片压缩 ◦ 按需加载 img、js
11. 想要更快如何做？ • 让用户觉得快 ◦ 消除阻塞 ◦ 以内容优先度展示 ◦ 收敛域名数量 ◦ ajax解耦 ◦ 交互解耦
12. 想要更快如何做？ • 让整个产品都快起来 ◦ 跨页面cache ◦ preLoad ◦ js模块复用 ◦ 交互优化
13. • 浏览器preLoad ◦ IE8+ Lookahead Downloader ◦ Firefox7+ prefetch（HTML5属性） ◦ Chrome14+ prerender（HTML5属性） 参考资料：https://developer.mozilla.org/en/link_prefetching_faq 新技术 <a href="xxx.xxx.xxx.js" rel = "prefetch">
14. 新技术 • SPDY ◦ SPDY 是 Google 开发的基于传输控制协议 (TCP) 的应用层协议 ，开 发组正在推动 SPDY 成为正式标准（现为互联网草案）。SPDY 协议旨 在通过压缩、多路复用和优先级来缩短网页的加载时间和提高安全性。 （SPDY 是 Speedy 的昵音，意思是更快） 参考资料：http://www.geekpark.net/read/view/158198
15. 怎么收集优化成果？ • 关键数据对比 ◦ CDN访问数据 ◦ TWS访问压力 ◦ 客户端测速 • 间接影响 ◦ 页面点击转化 ◦ 成交转化 ◦ 老用户回头率
18. Q & A