乐趣区

关于性能工具

jiezi

引子

在 Performance Metrics 中讲了性能指标，还介绍了关于测量的内容，除了使用浏览器提供的 API 进行测量，还可以借助一些工具进行测量。这次就来看看关于工具的介绍。以下是个人理解的部分翻译。

翻译时 How To Think About Speed Tools 原文 Last updated 2019-02-12。

  • Origin
  • My GitHub

正文

谷歌已经发布了很多关于性能数据和性能工具的指导。本文的目的是为开发人员和营销人员整合这一指导，帮助他们了解如何考虑性能，并了解谷歌提供的所有性能工具。

关于性能的常见误区

误区 1

用户体验可以通过单一指标捕获 。

好的用户体验不是靠单一的点就能捕获，它是由你的用户使用过程中，一系列关键的事件组成。明白不同的衡量标准并跟踪它们，对于用户体验来说十分重要。

误区 2

用户体验可以通过单个“代表性用户”捕获 。

由于用户设备、网络连接和其它因素的差异，真实世界的性能差别很大。校准你的实验室和开发环境以测试类似各种不同的条件。使用现场数据告知不同的测试参数，例如设备类型（即移动设备与台式机）、网络连接（即 3G 或 4G）和其他关键变量。

误区 3

我的网站加载速度对我来说很快，所以对我的用户来说加载速度应该也很快 。

开发人员测试加载性能的设备和网络通常比用户实际体验的速度快得多。使用现场数据了解用户使用的设备和网络，并在测试性能时适当地模拟这些条件。

理解实验室和现场数据

实验室数据

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

优势

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

限制

  • 可能无法捕捉现实世界的障碍
  • 无法与实际页面 KPI 关联

注意： 像 Lighthouse 和 WebPageTest 这样的工具收集的就是这种类型的数据。

现场数据

现场数据是你的用户在户外体验页面加载时，收集到的性能数据。

优势

  • 捕获真实世界的用户体验
  • 实现与业务关键性能指标的关联

限制

  • 度量指标受限
  • 调试能力有限

注意： 像 Chrome User Experience Report 中公共数据设置 和 PageSpeed Insights 性能工具中速度得分报告就是这种类型的数据。

有哪些不同的性能工具?

  • Lighthouse : 为你的网站提供个性化建议，包含性能、可访问性、PWA、SEO、和其它最佳实践。
  • WebPageTest : 允许你在受控的实验室环境中比较一个或多个页面的性能，深入了解性能统计信息并在实际设备上测试性能。你可以在 WebPageTest 中运行 Lighthouse。
  • TestMySite : 允许将你的移动站点速度与超过 10 个国家 / 地区的同行进行比较。移动站点速度是基于 Chrome 用户体验报告中的真实数据。允许你根据谷歌分析的基准数据，评估提高移动网站速度的潜在收入机会。允许你跨设备诊断网页性能，并提供一个从 WebPageTest 和 PageSpeed Insights 中得出用于提升体验的修复列表。
  • PageSpeed Insights : 显示站点关于速度的数据，以及提供常见优化提升建议。
  • Chrome Developer Tools : 允许你分析页面的运行时，以及确定和调试性能瓶颈。

备注： 在原文中还有提到工具 Speed Scorecard 和 Impact Calculator，点击跳转到的都是 TestMySite 网址。去试了一下，检测的结果都包含了对工具 Speed Scorecard 和 Impact Calculator 的描述，猜测是后来功能统一合并到 TestMySite 工具上，因此将原文中相关的描述都合并到了 TestMySite 的描述中。

因此你是…

开发者试图理解你网站当前的性能，如真实世界 Chrome 用户的体验，并寻找针对行业顶级趋势的审查建议和指导方针。

PageSpeed Insights 让你知道在真实世界中 Chrome 用户体验你站点的性能，并推荐优化的机会。

开发人员试图根据现代 web 性能最佳实践来理解和审查网站。

Lighthouse 包含详细性能评估。它为你提供页面中缺少的性能优化列表，以及通过实施每个优化所节省的时间，这可以帮你了解应该做什么。

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

Chrome Developer Tools（CDT）包含一个性能面板，允许你通过使用自定义配置分析站点来深入研究站点的性能问题，从而跟踪性能瓶颈。你可以在网站的生产或开发版本上使用 CDT。

WebPageTest 包含一套高级的度量和跟踪查看器。它能够深入了解你的网站在真实的移动硬件和网络条件下的性能。

参考资料

  • How To Think About Speed Tools
退出移动版