网页性能工具分析（从原理到工具具体分析）

Google针对性能数据和性能工具提出了很多指导。此信息图的目标是为开发人员和营销人员整合一个指南，帮助他们了解如何去思考关于性能及Google所有性能工具产品。

---

关于性能的常见神话

神话1

使用单一指标就可以捕获用户体验。
良好的用户体验不是由一个单一的时间点捕获的。它是由用户使用的旅程中的一系列关键里程碑组成。了解并跟踪你用户不同指标下的用户体验是很重要的。

神话2

用户体验可以通过一个“代表性用户”来捕获。
由于用户设备，网络连接和其他因素的差异，实际性能变化很大。校准您的实验和开发环境，在一系列不同的条件下进行测试。依据现场数据进行设备类型（即，移动与桌面），网络连接（即3G或4G）和其他关键变量等测试参数的选择。

神话3

因为我的网站对于我来说加载速度很快，因此我网站的用户也应该快速加载。
开发人员测试负载性能的设备和网络通常比用户实际体验的速度快得多。使用现场数据来了解用户所使用的设备和网络，并在测试性能时适当地反映这些条件。

---

了解实验室与现场数据

实验室数据

实验室数据是在具有预定义设备和网络设置的受控环境中收集的性能数据。这提供了可重现的结果和调试功能，以帮助识别，隔离和修复性能问题。

优势

• 有助于调试性能问题
• 端到端和深入可见性的用户体验
• 可重复的测试和调试环境

局限

• 可能无法捕捉现真实世界的瓶颈
• 无法与实际页面关键绩效指标相关联

注意：Lighthouse和 WebPageTest等工具会收集此类数据。

---

现场数据

（也称为真实用户监控或RUM）
现场数据是从用户在自然环境下经历的实际页面加载中收集的性能数据。

优势

• 捕获真实的真实用户体验
• 启用与业务关键绩效指标的关联

局限

• 受限制的指标集
• 调试功能有限

**注意：**公共数据集（如Chrome用户体验报告）和性能工具（如 PageSpeed Insights速度得分）会报告此类数据。

---

有哪些不同的性能工具？

灯塔

为您提供有关如何在性能，可访问性，PWA，SEO（搜索引擎优化）和其他最佳实践中改进网站的个性化建议。

WebPageTest

允许您比较受控实验室环境中一个或多个页面的性能，并深入了解真实设备上的性能统计数据和测试性能。您还可以在WebPageTest上运行Lighthouse。

TestMySite

允许您诊断跨设备的网页性能，并提供一系列修复程序，以改善Webpagetest和PageSpeed Insights的体验。

PageSpeed见解

显示您网站的速度字段数据，以及常见优化建议以改进它。

速度记分卡

允许您将您的移动网站速度与超过10个国家/地区的同行进行比较。移动网站的速度取决于Chrome用户体验报告中的实际数据。

影响计算器

允许您根据Google Analytics的基准数据估算提高移动网站速度的潜在收入机会。

Chrome开发者工具

允许您分析页面的运行时，以及识别和调试性能瓶颈。

所以如果你是…

1. 营销人员或开发人员尝试构建业务案例以改善您网站的用户体验。您说美元和美分，并正在寻找可以帮助您量化机会成本和预期升力的货币数据。

• 使用速度记分卡 查看您的移动网站速度与超过10个国家/地区的同行的比较情况。分数基于Chrome用户体验报告中的实际数据。
• 使用影响力计算器 估算提高移动网站速度的潜在收入机会。影响力来自Google Analytics的基准数据。
• 使用TestMySite测试您的页面的移动加载时间以及行业基准测试，并了解简单修复如何加快您的网站速度并减少访问者流失; TestMySite目前由WebPageTest和PageSpeed Insights提供支持。

2. 开发人员尝试了解您网站的当前效果，正如真实Chrome用户所体验到的那样，并根据行业顶级趋势和指南寻找审核建议。

PageSpeed Insights可帮助您了解Chrome用户所体验的网站的实际效果，并建议优化机会。

3. 开发人员尝试根据现代Web性能最佳实践来理解和审核网站。

灯塔包含一整套表演机会; 它为您提供了页面中缺少的性能机会列表以及实施每个优化所节省的时间，这可以帮助您了解应该执行的操作。

开发人员正在寻找有关如何调试/深入了解您网站性能的技术指导。

Chrome开发者工具（CDT）包含一个性能面板，通过使用自定义配置对您的网站进行分析，您可以深入了解网站的性能问题，从而可以跟踪性能瓶颈。您可以在网站的生产或开发版本上使用CDT。

WebPageTest包含一套高级度量标准和跟踪查看器。它可以在具有网络条件的真实移动硬件上深入了解您网站的性能。

翻译来源：https://developers.google.cn/web/fundamentals/performance/speed-tools/?hl=zh-cn

关注公众号，回复： web，可以收到英文版原文pdf版

---

自己建了一个微信公众号，会分享自己的心得，技术问题，高效工具等，喜欢的可以关注交流。