基金绩效衡量指标_衡量绩效

我就是我 2023-02-22 03:40 93阅读 0赞

基金绩效衡量指标

Clients care deeply about web performance and they depend on us to articulate and measure how well their website is performing. If you have a [service level agreement][] (SLA) with your client, and you should, then learning how to measure key metrics is crucial to you and your business. There are great paid products on the market that can keep track of a website's performance, but there are plenty of websites and JavaScript APIs that can help you measure these metrics free of charge.

客户非常关心网站的性能，他们依靠我们来阐明和评估其网站的性能。 如果您与客户已达成[服务水平协议][service level agreement] (SLA)，并且应该这样做，那么学习如何衡量关键指标对于您和您的业务至关重要。 市场上有很多付费产品可以跟踪网站的性能，但是有很多网站和JavaScript API可以帮助您免费测量这些指标。

### 真实用户监控(RUM) **(**Real User Monitoring (RUM)**)** ###

Real user monitoring is collected using data from...well, real users! It helps in identifying how long it takes actual users to process the request, render the DOM, and more. There are very good paid products that can measure and provide online dashboards for viewing RUM data, such as [New Relic's Browser Monitoring][New Relic_s Browser Monitoring] and [Soasta's mPulse][Soasta_s mPulse], but if you're on a budget it can be hard to afford those services. Luckily there are tools **built into most browsers** that can help us!

真实的用户监控是使用来自...真实用户的数据收集的！ 它有助于确定实际用户处理请求，呈现DOM等所需的时间。 有非常好的付费产品可以测量并提供用于查看RUM数据的在线仪表板，例如[New Relic的Browser Monitoring][New Relic_s Browser Monitoring]和[Soasta的mPulse][Soasta_s mPulse] ，但是如果您的预算有限，则很难负担得起这些服务。 幸运的是， **大多数浏览器**都**内置了**可以帮助我们的工具！

There are two Javascript APIs that, for the most part, collect the same data that many paid products collect and report. First up is the [Navigation Timing API][]. This API allows you to see what time different events fired off when loading a page. Let's check it out right now! If you're in Chrome or Firefox while reading this, open up the console by right clicking on the page and choosing Inspect Element. Then in the console paste *performance.timing* and hit enter/return. You should see something like this:

在大多数情况下，有两个Javascript API会收集许多付费产品收集和报告的相同数据。 首先是[Navigation Timing API][] 。 使用此API，您可以查看加载页面时何时触发不同的事件。 让我们现在检查一下！ 如果在阅读本文时使用的是Chrome或Firefox，请通过右键单击页面并选择“检查元素”来打开控制台。 然后在控制台中粘贴*performance.timing* ，然后按Enter / return。 您应该会看到以下内容：

![Navigation Timing API Photo][]

Each of these values is the time at which different events were fired when loading the page. You can [check out the specification][Navigation Timing API] to see a description for each event. To show an example, if you wanted to get the amount of time it takes to load the DOM you would use this equation: domComplete - domLoading. Note that the time is measured in milliseconds. The [Navigation Timing API is well supported][] with most browsers. Support starts in IE 9+, Chrome, Firefox, Safari 8+, Opera and Android. iOS Safari and Opera Mini are the only ones not on board.

每个值都是加载页面时触发不同事件的时间。 您可以[查看规范][Navigation Timing API]以查看每个事件的描述。 为了显示一个示例，如果要获取加载DOM所花费的时间，可以使用以下公式：domComplete-domLoading。 请注意，时间以毫秒为单位。 大多数浏览器[都很好地支持Navigation Timing API][Navigation Timing API is well supported] 。 支持从IE 9 +，Chrome，Firefox，Safari 8 +，Opera和Android开始。 iOS Safari和Opera Mini是唯一没有安装的。

The next Javascript API is the [Resource Timing API][]. This API allows you to see how long each resource (images, Javascript files, CSS files, etc.) took to be fetched. This can be helpful in pinpointing what files are taking the longest to load. Let's go back to the console and paste in *window.performance.getEntriesByType("resource")* to see an example.

下一个Javascript API是[Resource Timing API][] 。 通过此API，您可以了解每个资源(图像，Javascript文件，CSS文件等)的获取时间。 这有助于查明加载时间最长的文件。 让我们回到控制台并粘贴*window.performance.getEntriesByType(“ resource”)*来查看示例。

![Resource Timing API Photo][]

You'll notice that this looks very similar to the Navigation Timing API with a few differences. This API gives you the type of resource, in this case an image, and also the name of the resource, in this case resource-timing-overview-1.png. It also helps you by calculating the duration for you, which is done by use the equation responseEnd - startTime. [This API has the same browser support][] as the Navigation Timing API, except that Safari doesn't support it.

您会注意到，这看起来与Navigation Timing API非常相似，但有一些区别。 该API为您提供资源的类型(在这种情况下为图像)，以及资源的名称(在这种情况下为resource-timing-overview-1.png)。 它还可以通过使用等式responseEnd-startTime来计算持续时间，从而为您提供帮助。 [该API具有与][This API has the same browser support] Navigation Timing API [相同的浏览器支持][This API has the same browser support] ，但Safari不支持。

There are other APIs available that don't have great browser support but are immensely helpful in determining more meaningful metrics. The first being the [User Timing API][] which can help you measure how long your AJAX requests are taking or help you in measuring other Javascript tasks. [Browser support][] isn't the best, but Chrome, IE 10+, and Android browsers are supported for the moment. Another API is the [Network Information API][]. One of the biggest drawbacks to collecting RUM data is not being able to determine what kind of network connection the user is using. This information is helpful because mobile networks take longer to fetch a website than cable networks. [Browser support is limited][] because Firefox OS and Chromium are the only browsers that currently support the API.

还有其他可用的API，它们没有强大的浏览器支持，但是在确定更有意义的指标时非常有用。 第一个是[用户计时API][User Timing API] ，它可以帮助您评估AJAX请求花费的时间或帮助您评估其他Javascript任务。 [浏览器支持][Browser support]并不是最好的，但是目前支持Chrome，IE 10+和Android浏览器。 另一个API是[网络信息API][Network Information API] 。 收集RUM数据的最大缺点之一是无法确定用户正在使用哪种网络连接。 此信息很有用，因为与有线网络相比，移动网络需要更长的时间来获取网站。 [浏览器支持受到限制，][Browser support is limited]因为Firefox OS和Chromium是当前唯一支持API的浏览器。

To start gathering RUM data you can create a Javascript script that runs onLoad, calculates the measurements, and uses AJAX to send the information to a server side script that will store that data in the database. We'll take a look at an example of this later.

要开始收集RUM数据，您可以创建一个运行onLoad，计算测量值并使用AJAX将信息发送到服务器端脚本的Javascript脚本，该脚本将数据存储在数据库中。 稍后我们将看一个例子。

### 综合测试 **(**Synthetic Testing**)** ###

Testing in the wild with RUM data is essential but it has its limitations. We need a way to control the variables such as connection speed, geographic location, and the user's browser. What's more, in order to really get meaningful data we need to be able to see how the website is loading for the user via video or images. There are great paid products that allow us to have this laboratory type setting, such as [New Relic's Synthetics][New Relic_s Synthetics] and [Catchpoint's Synthetic Testing & Monitoring][Catchpoint_s Synthetic Testing _ Monitoring], but let's take a look at one free tool that meets these needs: [WebPageTest.org][].

使用RUM数据进行野外测试是必不可少的，但这有其局限性。 我们需要一种方法来控制变量，例如连接速度，地理位置和用户的浏览器。 而且，为了真正获得有意义的数据，我们需要能够通过视频或图像查看网站如何为用户加载。 有很多付费产品可以让我们拥有这种实验室类型的设置，例如[New Relic的Synthetics][New Relic_s Synthetics]和[Catchpoint的Synthetic Testing＆Monitoring][Catchpoint_s Synthetic Testing _ Monitoring] ，但让我们看一个可以满足这些需求的免费工具： [WebPageTest.org][] 。

WebPageTest makes it very easy to synthetically test a website for free. Once you're on their website you enter the URL you'd like to test, select the location you want to test from, and select the browser you'd like to use for testing. In the advanced settings you can set connection speed, how many tests to run, whether to capture video of the page loading, and more. Once you run the test it will provide you with results like this:

WebPageTest使免费综合测试网站变得非常容易。 进入他们的网站后，输入要测试的URL，选择要从中测试的位置，然后选择要用于测试的浏览器。 在高级设置中，您可以设置连接速度，要运行的测试次数，是否捕获页面加载的视频等等。 一旦运行测试，它将为您提供如下结果：

![WebPageTest.org Photo][]

WebPageTest gives you a letter grade for different metrics and provides you with detailed information of how the page loaded, even providing you with CPU and Bandwidth utilization. There are three metrics that can provide you with meaningful data: First Byte, Speed Index, and Bytes In. First Byte is the amount of time it took to make the website request and have the server send the first byte back to the browser. This metric also has a letter grade provided. If this metric is high, meaning it receives a C or worse as a grade, it could mean that the server is taking a long time to process information before sending it back to the browser. It could also mean that it takes a long time for the browser to connect to the domain.

WebPageTest为您提供针对不同指标的字母等级，并为您提供有关页面加载方式的详细信息，甚至为您提供CPU和带宽利用率。 可以通过三个指标为您提供有意义的数据：“第一字节”，“速度索引”和“字节数”。 第一个字节是发出网站请求并使服务器将第一个字节发送回浏览器所花费的时间。 此度量标准还提供了字母等级。 如果此度量标准很高，则意味着它的等级达到C或更差，这意味着服务器在将信息发送回浏览器之前需要花费很长时间来处理信息。 这也可能意味着浏览器需要很长时间才能连接到域。

The second meaningful metric is Speed Index. Speed Index was developed by WebPageTest to calculate the amount of time it takes for the above the fold content to load for the user. This is meaningful because it provides us with a metric of the perceived speed of your website. If the above the fold content is loading fast then the user is happier. If it's slow then the user can become uninterested and leave. A good rule of thumb is to keep Speed Index to 1000, which translates to 1 second.

第二个有意义的指标是速度指数。 速度索引是由WebPageTest开发的，用于计算上述折叠内容为用户加载所需的时间。 这很有意义，因为它为我们提供了您网站感知速度的指标。 如果以上折叠内容正在快速加载，则用户会更快乐。 如果很慢，那么用户可能会变得不感兴趣而离开。 一个好的经验法则是将Speed Index保持在1000，即1秒。

Bytes In is the amount of kilobytes it took to download the content of the page. [The trend over the years][] shows that page sizes are increasing year after year. This is a problem because larger web pages take longer to load on mobile networks and the majority of traffic on the Internet comes from mobile devices. It can take several seconds for a mobile browser to receive the first byte on a mobile device and [we only have 3 seconds to get the content to the user before up to 40% of them abandon the request][we only have 3 seconds to get the content to the user before up to 40_ of them abandon the request]. That's why it's best to keep the page size to 1000 kilobytes. You can achieve this by [optimizing images][], lazy loading content below the fold, concatenating and minifying CSS and Javascript files, and using [other optimization techniques][].

字节输入是下载页面内容所花费的千字节数。 [多年来的趋势][The trend over the years]表明，页面大小逐年增加。 这是一个问题，因为较大的网页需要较长时间才能在移动网络上加载，并且Internet上的大部分流量都来自移动设备。 移动浏览器在移动设备上接收到第一个字节可能需要花费几秒钟的时间，而[在最多40％的用户放弃请求之前][we only have 3 seconds to get the content to the user before up to 40_ of them abandon the request] ， [我们只有3秒的时间将内容获取给用户][we only have 3 seconds to get the content to the user before up to 40_ of them abandon the request] 。 这就是为什么最好将页面大小保持为1000 KB。 您可以通过以下方法实现此目的： [优化图像][optimizing images] ，将内容懒散地加载到首屏之下，串联和最小化CSS和Javascript文件以及使用[其他优化技术][other optimization techniques] 。

Another great tool is the frame by frame breakdown of how the website loaded using the Filmstrip View. This allows us to see the actual user's experience and identify what areas could improve in terms of loading the most important, above the fold content. The waterfall chart is also great in identifying what resources are taking the longest to load and in what order they are loading. Recently WebPageTest added a new feature called Cost which allows you to see how much it would cost to view a website on a mobile device in different countries. This feature helps to show the importance of keeping the page size low. There's even a [free WebPageTest API][] you can use to incorporate in your testing through AJAX calls and responses. This allows you to send the synthetic data to the same database as your RUM data, and then display all the data to see how to improve a website. Contact [Patrick Meenan][] for an API key.

另一个很棒的工具是逐帧细分网站，以了解如何使用Filmstrip View加载网站。 这使我们能够查看实际用户的体验，并确定在折叠内容上方最重要的区域，哪些区域可以改进。 瀑布图还可以很好地确定哪些资源需要最长的加载时间以及加载的顺序。 最近，WebPageTest添加了一项名为“费用”的新功能，该功能使您可以查看在不同国家/地区的移动设备上查看网站需要多少费用。 此功能有助于说明保持页面尺寸较小的重要性。 您甚至可以使用[免费的WebPageTest API][free WebPageTest API] ，通过AJAX调用和响应将其纳入测试。 这使您可以将综合数据与RUM数据发送到同一数据库，然后显示所有数据以查看如何改进网站。 请联系[Patrick Meenan][]获取API密钥。

### 速度需求 **(**The Need for Speed**)** ###

I've noticed over the last couple of years that clients are always asking about performance, but they just don't know exactly what questions to ask or how to measure performance. It's black and white to them: either the website is fast or the website is slow. The companies and freelancers that stand out are those that have a performance SLA with standards and best practices and are transparent about the performance of their client's sites. It's never been easier to keep track of performance data using open source tools and dashboards like [Nines Performance Tool][]. It allows you to see information via a [small toolbar on a website][] or look at the data via a [dashboard using Google charts][]. Whether you use a paid service or use an open source tool, just start testing today! Remember that \#perfmatters!

在过去的几年中，我注意到客户一直在询问绩效，但他们只是不知道要问什么问题或如何衡量绩效。 这对他们来说是黑白的：网站速度快还是网站速度慢。 出色的公司和自由职业者是具有标准和最佳实践的绩效SLA，并且对客户站点的绩效透明的公司。 使用开源工具和[Nines Performance Tool][]等仪表板跟踪性能数据从未如此简单。 它使您可以通过[网站][small toolbar on a website]上的[小工具栏][small toolbar on a website]查看信息，也可以[使用Google图表][dashboard using Google charts]通过[仪表板][dashboard using Google charts]查看数据。 无论您使用付费服务还是使用开源工具，今天就开始测试！ 记住\#perfmatters！

> 翻译自: [https://davidwalsh.name/measuring-performance][https_davidwalsh.name_measuring-performance]

基金绩效衡量指标

[service level agreement]: https://www.paloaltonetworks.com/resources/learning-center/what-is-a-service-level-agreement-sla.html
[New Relic_s Browser Monitoring]: http://newrelic.com/browser-monitoring
[Soasta_s mPulse]: http://www.soasta.com/products/mpulse/
[Navigation Timing API]: https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
[Navigation Timing API Photo]: http://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5tYXR0c2h1bGwuY29tL05hdi1UaW1pbmcucG5n?x-oss-process=image/format,png
[Navigation Timing API is well supported]: http://caniuse.com/#search=navigation
[Resource Timing API]: http://www.w3.org/TR/resource-timing/
[Resource Timing API Photo]: http://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5tYXR0c2h1bGwuY29tL1Jlc291cmNlLVRpbWluZy5wbmc?x-oss-process=image/format,png
[This API has the same browser support]: http://caniuse.com/#search=resource%20timing
[User Timing API]: http://www.w3.org/TR/user-timing/
[Browser support]: http://caniuse.com/#search=user%20timing
[Network Information API]: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
[Browser support is limited]: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/connection
[New Relic_s Synthetics]: http://newrelic.com/synthetics
[Catchpoint_s Synthetic Testing _ Monitoring]: http://www.catchpoint.com/products/synthetic/
[WebPageTest.org]: http://www.webpagetest.org/
[WebPageTest.org Photo]: http://www.mattshull.com/testWPT.png
[The trend over the years]: http://httparchive.org/trends.php#bytesTotal&reqTotal
[we only have 3 seconds to get the content to the user before up to 40_ of them abandon the request]: http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf
[optimizing images]: http://blog.thinkful.com/post/103650638583/optimizing-your-images-make-your-website-load
[other optimization techniques]: https://davidwalsh.name/site-speed
[free WebPageTest API]: https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis
[Patrick Meenan]: https://twitter.com/patmeenan
[Nines Performance Tool]: https://github.com/derekshull/nines
[small toolbar on a website]: http://mattshull.com/perf/
[dashboard using Google charts]: http://mattshull.com/perf/report.html
[https_davidwalsh.name_measuring-performance]: https://davidwalsh.name/measuring-performance