衡量绩效
客户非常关心网站的性能，他们依靠我们来阐明和评估其网站的性能。 如果您与客户已达成服务水平协议 （SLA），并且应该这样做，那么学习如何衡量关键指标对于您和您的业务至关重要。 市场上有很多付费产品可以跟踪网站的性能，但是有很多网站和JavaScript API可以帮助您免费测量这些指标。
真实用户监控（RUM）
真实用户监视是使用来自...真实用户的数据收集的！ 它有助于确定实际用户处理请求，呈现DOM等所需的时间。 有非常好的付费产品可以测量并提供用于查看RUM数据的在线仪表板，例如New Relic的Browser Monitoring和Soasta的mPulse ，但是如果您的预算有限，则很难负担这些服务。 幸运的是， 大多数浏览器都内置了可以帮助我们的工具！
在大多数情况下，有两个Javascript API会收集许多付费产品收集和报告的相同数据。 首先是Navigation Timing API 。 使用此API，您可以查看加载页面时何时触发不同的事件。 让我们现在检查一下！ 如果在阅读本文时使用的是Chrome或Firefox，请通过右键单击页面并选择“检查元素”来打开控制台。 然后在控制台中粘贴performance.timing ，然后按Enter / return。 您应该会看到以下内容：
每个值都是加载页面时触发不同事件的时间。 您可以查看规范以查看每个事件的描述。 为了显示一个示例，如果要获取加载DOM所花费的时间，可以使用以下公式：domComplete-domLoading。 请注意，时间以毫秒为单位。 大多数浏览器都很好地支持Navigation Timing API 。 支持从IE 9 +，Chrome，Firefox，Safari 8 +，Opera和Android开始。 iOS Safari和Opera Mini是唯一没有安装的。
下一个Javascript API是Resource Timing API 。 通过此API，您可以了解每个资源（图像，Javascript文件，CSS文件等）的获取时间。 这有助于查明加载时间最长的文件。 让我们回到控制台并粘贴window.performance.getEntriesByType（“ resource”）来查看示例。
您会注意到，这看起来与Navigation Timing API非常相似，但有一些区别。 该API为您提供资源的类型（在这种情况下为图像），以及资源的名称（在这种情况下为resource-timing-overview-1.png）。 它还可以通过使用等式responseEnd-startTime来计算持续时间，从而为您提供帮助。 该API具有与 Navigation Timing API 相同的浏览器支持 ，但Safari不支持。
还有其他可用的API，它们没有强大的浏览器支持，但是在确定更有意义的指标时非常有用。 第一个是用户计时API ，可以帮助您评估AJAX请求花费的时间或帮助您评估其他Javascript任务。 浏览器支持不是最好的，但是目前支持Chrome，IE 10+和Android浏览器。 另一个API是网络信息API 。 收集RUM数据的最大缺点之一是无法确定用户正在使用哪种网络连接。 此信息很有用，因为与有线网络相比，移动网络需要更长的时间来获取网站。 浏览器支持受到限制，因为Firefox OS和Chromium是当前唯一支持API的浏览器。
要开始收集RUM数据，您可以创建一个运行onLoad的Javascript脚本，计算测量值，然后使用AJAX将信息发送到服务器端脚本，该脚本将数据存储在数据库中。 稍后我们将看一个例子。
综合测试
使用RUM数据进行野外测试是必不可少的，但它有其局限性。 我们需要一种方法来控制变量，例如连接速度，地理位置和用户的浏览器。 此外，为了真正获得有意义的数据，我们需要能够通过视频或图像查看网站如何为用户加载。 有很多付费产品可以让我们拥有这种实验室类型的设置，例如New Relic的Synthetics和Catchpoint的Synthetic Testing＆Monitoring ，但是让我们看一个可以满足这些需求的免费工具： WebPageTest.org 。
WebPageTest使免费综合测试网站变得非常容易。 进入他们的网站后，输入要测试的URL，选择要从中测试的位置，然后选择要用于测试的浏览器。 在高级设置中，您可以设置连接速度，要运行的测试次数，是否捕获页面加载的视频等等。 一旦运行测试，它将为您提供如下结果：
WebPageTest为您提供不同指标的字母等级，并为您提供有关页面加载方式的详细信息，甚至为您提供CPU和带宽利用率。 可以通过三个指标为您提供有意义的数据：“第一字节”，“速度索引”和“字节数”。 第一个字节是发出网站请求并使服务器将第一个字节发送回浏览器所花费的时间。 此度量标准还提供了字母等级。 如果此度量标准很高，则意味着它获得C或更差的成绩，这可能意味着服务器在将信息发送回浏览器之前需要花费很长时间来处理信息。 这也可能意味着浏览器需要很长时间才能连接到域。
第二个有意义的指标是速度指数。 速度索引是由WebPageTest开发的，用于计算上述折叠内容为用户加载所需的时间。 这很有意义，因为它为我们提供了您网站感知速度的指标。 如果以上折叠内容正在快速加载，则用户会更快乐。 如果很慢，那么用户可能会变得不感兴趣而离开。 一个好的经验法则是将Speed Index保持为1000，即1秒。
字节输入是下载页面内容所花费的千字节数。 多年来的趋势表明，页面大小逐年增加。 这是一个问题，因为较大的网页需要更长的时间才能在移动网络上加载，并且Internet上的大部分流量都来自移动设备。 移动浏览器在移动设备上接收到第一个字节可能需要花费几秒钟的时间，而在最多40％的用户放弃请求之前 ， 我们只有3秒的时间将内容获取给用户 。 这就是为什么最好将页面大小保持为1000 KB。 您可以通过以下方法实现此目的： 优化图像 ，将内容懒散地加载到首屏之下，串联和最小化CSS和Javascript文件以及使用其他优化技术 。
另一个很棒的工具是逐帧细分网站，以了解如何使用Filmstrip View加载网站。 这使我们能够查看实际用户的体验，并确定在折叠内容上方最重要的区域，哪些区域可以改善。 瀑布图还可以很好地确定哪些资源需要最长的加载时间以及加载的顺序。 最近，WebPageTest添加了一项名为“费用”的新功能，该功能使您可以查看在不同国家/地区的移动设备上查看网站需要多少费用。 此功能有助于显示保持页面尺寸较小的重要性。 您甚至可以使用免费的WebPageTest API ，通过AJAX调用和响应将其纳入测试。 这使您可以将综合数据与RUM数据发送到同一数据库，然后显示所有数据以查看如何改进网站。 请联系Patrick Meenan获取API**。
速度需求
在过去的几年中，我注意到客户一直在询问绩效，但他们只是不知道要问什么问题或如何衡量绩效。 这对他们来说是黑白的：网站速度快还是网站速度慢。 出色的公司和自由职业者是具有标准和最佳实践的绩效SLA，并且对客户站点的绩效透明的公司。 使用开源工具和Nines Performance Tool等仪表板跟踪性能数据从未如此简单。 它使您可以通过网站上的小工具栏查看信息，也可以使用Google图表通过仪表板查看数据。 无论您使用付费服务还是使用开源工具，今天就开始测试！ 记住#perfmatters！
