2019前端性能优化 一

---

• 起步：计划与指标 1.建立性能评估规范 2.目标：比你的对手快至少20%] 3.选择合适的指标 4.在目标用户的典型设备上收集数据 5.为测试设立“纯净”、“接近真实用户”的浏览器配置 6.与团队其他成员分享这份清单

1.建立性能评估规范

需要开发、设计与业务、市场团队的共同合作，从而确定页面速度会如何影响业务指标和大家多关心的KPI。 接着需要确定性能优化的指标，研究用户抱怨的常见问题，再看如何通过性能优化，接近这些问题。

2.目标：比你的对手快至少20%

如果你想比你的竞争对手快，至少要快20%。 你可以通过Chrome UX Report来了解对手的性能，并为具体的页面设置性能目标。 还有一点非常重要，那就是规划好加载的顺序和取舍。如果你预先规划好哪些部分更重要，并确定每部分的出现顺序，那么同事你也会知道哪些部分可以延迟加载。

3.选择合适的指标

这里有一些指标，首次绘制（First Paint）、首次有内容绘制（First Contentful Paint）、首次有意义绘制（First Meaning Paint）、视觉完备（Visual Complete）、首次可交互时间（Time To interactive）（ps：区别 (opens new window)） 通常情况被选用的，相对重要的指标有

• 首次有效绘制 First Meaning Paint FMP
• 首次可交互时间 Time to interactive TII
• 首次输入延迟 First Input Delay FID
• 速度指数 Speed Index
• CPU耗时
• 广告的影响 Ad Weight Impact
• 偏离度指标 Deviation metrics
• 自定义指标 Custom metrics

4.在目标用户的典型设备上收集数据

移动设备上的解析时间通常要比桌面设备长 36%。因此，一定要在一部平均水准的设备上进行测试 — 一部你的用户中最具代表性的设备。

• 集成测试工具可以在预先规定了设备和网络配置的可复制环境中手机实验数据。例如 Lighthouse、WebPageTest
• 真是用户监测（RUM）工具可以持续评估用户交互，收集实际数据。例如，SpeedCurve、New Relic，两者也都提供集成测试工具。

####5.为测试设立“纯净”、“接近真实用户”的浏览器配置（Profile） 使用被动测试监控工具时，可以关闭反病毒软件和CPU后台任务，关闭后台网络连接，使用没有安装任何插件的“干净的”浏览器配置，以避免结果失真。 当然了解你的用户会使用哪些插件也是个不错的主意。

####6.与团队其他成员共享这份清单 使每个人熟悉，从而根据性能预算和清单中定义的优先级来制定设计决策。