8款前端性能分析工具，全都是神器

你可以拥有世界上最漂亮，最吸引人的网站，但如果该网站无法快速加载到浏览器中，人们往往会忽略它。尽管有许多性能规则，但归根结底，这全取决于加载时间。

据 Jakob Nielson 所说，这是构建网站时应记住的事。

小于 100 毫秒是瞬时的。

100 毫秒至 300 毫秒的延迟是可被感知的。

一秒内，用户能保持思绪不间断，虽然他们会感觉到延迟，但能自己控制住思绪。

47% 的用户期望网页在两秒或更短时间内被加载。

40% 的用户在等待网站渲染超过3秒后，就会离开网站。

10 秒是保持用户注意力的极限。大多数用户会在 10 秒后离开你的网站。

在这里和这里详细了解这些统计信息。

如你所见，很显然，即使在最差的网络连接上，也需要确保页面尽快加载。但说起来容易做起来难。

为了帮助你实现这一最终目标 —— 以下我为性能分析者推荐的工具清单。

1. PageSpeed Insights

这是一项分析网页内容的免费服务，生成能使网页更快的建议。为你提供了关键指标，例如 FCP(First Contentful Paint)、累积阻塞时长等。指标分为现场数据、原始摘要、实验室数据、因素、诊断与过审信息。它还为你提供了进一步带改进建议。

PageSpeed 完全致力于性能方面，结合实验室数据和实际数据来构建有关网站加载速度的综合报告。以下是我的作品集网站的 PageSpeed Insight 结果。如你所见，摘要中是没有足够的实际速度数据的。

只粘贴单个 URL 的方式在企业级网站上是不可行的。但这个问题可以通过使用 PageSpeedPlus 运行自动化的 Google PageSpeed 测试来解决。它每周为你扫描整个站点，并在人性化的报告中提供结果。你还可以在这里查看 PageSpeed API。

2. Lighthouse

Lighthouse 是一个自动化的开源工具，可帮助你通过多个角度分析网页，不仅有性能分析，还有其他项目，例如 SEO，可访问性，最佳实践（Best Practices）以及网站是否满足 PWA 的要求。

你只需在 Chrome 开发者工具中的命令行，或者甚至作为 Node 模块运行该工具即可。你所要做的只是提供一个 URL，Lighthouse 将进行一系列审查，然后告诉你网站的运行情况。每个审查都有一个参考说明，解释了此审查的重要性，以及如何解决它。

Lighthouse 的另一个重要运用是将 API 集成到你自己的系统中，从而以编程方式运行审查。例如，如果你要阻止不符合 SEO 和性能标准的发布，则可以按需使用 Lighthouse 运行测试。

3. WebPageTest

这是一个免费工具，可让你使用具有真实的用户连接速度的浏览器（例如 Chrome）测试网站加载速度。你可以选择诸如高级测试，简单测试，视觉比较（Visual Comparison）与路由跟踪等功能。你还有很多选择，例如多步骤交互（Multi-step Transactions）、视频捕获（Video Capture）、以及内容阻塞等。最终将产生丰富的诊断信息，包括资源加载瀑布图，页面速度优化检查以及改进建议。

网页测试还提供首屏页面渲染、重复页面渲染以及服务器响应的详细信息分析。

4. Pingdom

Pingdom 是另一项功能强大的分析服务，为你提供大量的功能。它提供了完整的摘要，包括页面请求、加载的时长、大小以及请求分析。你可以从全球各地分析你的站点。还为你提供了改善页面得分的建议。

我最喜欢的功能是过滤后的摘要，其中会有关网站内容和请求的总结。我发现这对了解网页上的总体信息非常有帮助。

5. SiteSpeed

SiteSpeed 是一套开源工具，可让你监控和检测网站的性能。你可以通过 Docker 镜像或者安装 NPM 包来使用。由于其提供了几种工具，因此你应该能够选择到最适合自己的。你还可以在其官网上找到更多这些工具的相关信息。

虽然 SiteSpeed 是免费的，但建立与维护服务器是需要额外的开销的。如果你没有自己的服务器，SiteSpeed 建议你使用拥有 2 个 vCPUs 的 Digital Ocean Optimized Droplets 方案，或者使用 AWS 的 c5.large 实例，并将数据存储在 S3(Amazon 的一种对象存储服务) 上。