原文链接：https://blog.bitsrc.io/performance-analysis-tools-for-front-end-development-a7b3c1488876，作者：Mahdhi Rezvi

如有翻译不准确，请多指正。

你可以拥有世界上最漂亮、最吸引人的网站，但如果它不能在浏览器上快速加载，人们往往会跳过它。尽管存在许多性能规则，但归根结底，一切都取决于加载时间。

JakobNielson认为，在建立网站时，大家应该记住以下几点。

1.低于100毫秒被认为是瞬时的。

2.用户可以察觉到10oms到3oms的延迟。

3一秒钟是用户思想流不受干扰的极限。他们会感觉到延迟，但他们可以应付。

4.47%的用户希望在两秒或更短时间内加载网页

5.40%的用户会等待不到三秒的网页渲染时间就放弃该网站。

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

正如大家所看到的，我们需要确保页面加载速度尽可能快，即使是在最糟糕的网络连接上。说起来容易做起来难，为了帮助大家实现这个最终目标——这里有我为性能分析师推荐的工具列表。

另外不要忘记共享和重用你的JS组件，以保持高质量和高性能代码(生产需要时间和合理交付时间)之间的平衡。您可以使用像Bit(Github)这样的流行工具，将任何项目中的组件(普通的JS、TS、React、Vue等)发布到Bit的组件中心，而不至于浪费太多时间。

1.PageSpeedInsights

这是一项免费的服务，可以分析网页内容，然后提出建议，使网页更快。它为大家提供了关键指标，如内容绘制，总阻塞时间等，同时还将指标分为现场数据，原始摘要，实验室数据，机会，诊断和通过审核等等。并进一步为大家提供改进的意见。

PageSpeed的工作完全取决于性能，它混合使用实验室和现实世界的数据来构建一个关于网站速度的综合报告。以下是我的网页使用PageSpeedInsights的效果。

但在企业级别粘贴单个URL是不可行的，但这个问题可以通过运行带有PageSpeedPlus的自动GooglePageSpeed测试来解决。每周都会为你扫描整个站点，并在用户友好的报告中提供结果。你也可以在此处检查PageSpeedAPI。

2.Lighthouse

这是一个自动化的开源工具，它可以帮助你分析网页的各个方面，比如性能、搜索引擎优化、可访问性，最佳实践以及网站是否符合PWA的要求。你可以简单地在Chrome开发者工具中运行这个工具命令行甚至节点模块。而你所要做的就是提供一个URL，Lighthouse会运行一系列审计，告诉你网站的运行情况。每次审核都有一个参考文档，解释为什么审核是重要的，以及如何修复它。

Lighthouse的另一个重要用途是将API集成到您自己的系统中，以编程的方式运行审计。当你想阻止不符合SEO和性能标准的发布，就可以使用Lighthouse按需运行测试。

3.WebPageTest

这是一个免费工具，可让您使用来测试您的网站速度(具有真正用户连接速度的Chrome之类的浏览器)。你可以选择诸如高级测试，简单测试，视觉比较和跟踪路由等选项。同时还有很多选择，例如多步骤交易，视频捕获，内容阻塞等等。最终结果还将产生丰富的诊断信息，包括资源加载瀑布图，PageSpeed优化检查以及有关建议改进。网页测试还提供第一个视图和重复视图上的页面统计信息以及服务器响应的详细信息。

4.Pingdom

Pingdom是另一个强大的分析服务，它为你提供了大量的功能比如一个全面的服务器摘要、页面请求的响应，页面加载时间，大小和请求分析。你可以从世界各不同站点来分析你的网站，同时得到一些建议来提高页面分数。

我最喜欢的功能是过滤后有关网站内容和请求的摘要。我发现这个可以帮助自己对网页上投放的内容的全面了解。

5.SiteSpeed

SiteSpeed是一组开源工具，可让你监视和评估网站的性能。你可以通过docker映像或者是安装NPM软件包来进行使用。提供的工具很多，大家可以在网页上浏览更多相关信息进行按需选择。

但有一点需要注意，虽然SiteSpeed是免费的，但设置服务器并使其保持运行状态将还是需要我们有一定的花费。如果您没有服务器，SiteSpeed建议您使用2个vCPU或在AWSc5.large上获得DigitalOcean优化的Droplet，将数据存储在S3。

6.Caliber

这是一款多功能性能监视套件，可帮助大家监视和审核网站的性能。它还允许大家通过指定测试服务器的位置来模拟现实条件，管理模拟广告的偏好设置，甚至模仿移动设备。同时，你还可以设置预算，而它还能够以性能优化来帮助你控制预算。

当然它的功能远不止这些，想要了解更多可以通过网站查询。

7.SpeedCurve

SpeedCurve捕获真实的用户数据，并反映出我们网站的实际客户体验。它还提供了一个基准特征便于你和你的竞争对手网站进行对比，这使得你可以不断优化网站性能来保障自己在竞争对手面前的领先地位。你还可以生成网站实际加载过程的幻灯片。

SpeedCurve还为你提供了综合监控。综合监控是在受控环境中模拟你的网站。你可以自定义选项，比如网络速度、设备、操作系统等等。

8.SpeedTracker

SpeedTracker是一个运行在WebPageTest之上的工具，它定期对你的网站进行性能测试，并显示各种性能指标随时间的变化情况。这可以让你持续评估你的网站，看看你的新功能如何影响你网站的性能。

你还可以定义预算，并通过电子邮件和Slack获得提醒。英国广播公司(BBC)、康涅狄格大学(Universityof Connecticut)和红牛电视台(RedBull TV)等知名机构都在使用这一工具。

在上述工具的帮助下，你可以做很多事情，但要使你的网站达到更高的标准，你可能需要付出更多的努力。

更多翻译干货，可以点击关注，小渡陆续更新中！