在不耐烦的时代监控前端应用性能

作者：Margo Schaedel / 产品，用例，开发者
2018年2月20日

让您的用户满意并监控您的性能

在浏览器中监控应用性能往往被忽视或忽略，直到真正的问题出现。我们优先考虑服务器端监控和收集所有不同数据库的指标，但常常让网站性能跟踪被忽略。然而，现在的互联网用户比以往任何时候都更加不耐烦，除了快速的加载时间外，还期待独特的交互式设计。我们期望在全球范围内为各种日益多样化的设备提供一致的用户体验。

随着我们继续为我们的Web应用程序添加更复杂的设计，并增加事情在某处出错的可能性（对不起，我是悲观主义者），跟踪特定的性能指标以更好地诊断和解决问题（我们可以肯定它们最有可能出现）符合我们的最佳利益。

<figcaption> 耐不耐烦的时代</figcaption>

优化您的性能

理想情况下，人们会在规划和构建应用程序时考虑到性能因素，采取更主动的方法，并在应用程序变得太大和复杂、因此更难重构之前进行。通过减少渲染阻塞的资产和网络请求、图像优化和懒加载、HTML、CSS和JS文件的最小化、缓存、延迟非关键资产以及使用内容分发网络（CDN）等方法，我们可以从一开始就使我们的应用程序更高效。尽管如此，我们仍然应该继续跟踪前端代码的演变和增长。

有许多工具可以帮助您监控浏览器性能，包括Google的Page Speed和Analytics、Yahoo的YSlow、WebPagesTest、Chrome DevTools中的审核、Firefox的性能以及Safari的Timeline。这些工具很棒，绝对不是缺陷，但鉴于我们将要跟踪性能随时间的变化，为什么不用时序数据库来收集和存储长期性能指标呢？这样做，您将能够比较和分析随时间变化的性能数据，并具备在问题发生时或快速确定错误原因的能力。

<figcaption> TICK堆栈</figcaption>

我们的方法

在InfluxData，我们最近开始收集和跟踪我们自己的网页指标，并在Chronograf中可视化它们。Chronograf是TICK Stack的用户界面组件，使我们能够快速有效地可视化数据。有关Chronograf的入门信息，请参阅Chronograf入门指南。在这个例子中，我们收集用户访问网站时抛出的任何JavaScript错误，并将它们存储在InfluxDB中。

<figcaption>JS错误随时间变化数</figcaption>

随着时间的推移跟踪错误，我们可以监控错误抛出的波动和峰值，可以确定基于不同浏览器的性能评分，并可以具体查看哪些错误最频繁地被抛出，从而努力寻找和修复这些错误。当然，还有许多其他指标需要收集和关注，如下面的列表所示

• 标题加载时间
• 开始渲染时间
• 交互时间
• DNS查询时间
• 连接时间
• 第一次和最后一次字节数
• 总体重量和资产数量
• 错误率和跳出率

总结

性能对于用户从您的网站获得的体验至关重要，并且会强烈影响用户感知。有许多工具和技术可用于测量、收集和管理性能指标，从开发过程的初始阶段到整个过程。我们喜欢并使用InfluxDB进行监控，但无论您选择哪种工具，通过监控和改进Web应用的客户端性能，对用户体验产生积极影响都是非常重要的。