The web has become an integral part of our daily lives. According to CreditLoan, an average user would spend 7.6 hours online and spend around 20% of their time surfing the web. You can only imagine the extent of the numbers right now, when everyone is at home, during this devastating year of 2020.

网络已经成为我们日常生活不可或缺的一部分。 根据CreditLoan的说法 ，普通用户将在网上花费7.6个小时，并花费其上网时间的20％左右。 您只能想象在2020年这个灾难性的一年里，当每个人都在家时，数字的数量。

These numbers show how much of am impact the mighty web has on us. To fully utilize this huge opportunity, websites should be of a very high standard. It is easy for someone to build a good-looking website. But it is quite tricky for it to be of great performance. This is because of the numerous bottlenecks present in web development such as expensive JavaScript, slow web font delivery, heavy images, etc.

这些数字显示了强大的网络对我们的影响。 为了充分利用这个巨大的机会，网站应该具有很高的水准。 有人可以轻松地建立一个美观的网站。 但是要使其具有出色的性能是非常棘手的。 这是因为Web开发中存在众多瓶颈，例如昂贵JavaScript，缓慢的Web字体交付，图像过多等。

You can have the most beautiful and engaging website in the world, but if it performs poorly on the user’s browser, people would disregard it.

您可以拥有世界上最漂亮，最吸引人的网站，但是如果该网站在用户的浏览器上运行不佳，人们就会无视它。

Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.

提示：使用Bit ( Github )在项目之间共享可重用组件 。 Bit使共享，记录和组织来自任何项目的独立组件变得简单。

Use it to maximize code reuse, collaborate on independent components, and build apps that scale.

使用它可以最大程度地重复使用代码，在独立组件上进行协作以及构建可扩展的应用程序。

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Bit支持Node，TypeScript，React，Vue，Angular等。

以用户为中心的性能及其重要性为何？ (User-centric Performance and Why is It Important?)

Now we know why we should start improving the performance of our websites.

现在我们知道了为什么我们应该开始改善网站的性能。

According to Vitaly, as a general rule of thumb, you should aim to be at least 20% faster than your fastest competitor.

根据Vitaly的经验，一般来说，您的目标应该是比最快的竞争对手快至少20％。

But when we talk about performance, what do we really mean?

但是，当我们谈论性能时，我们真正的意思是什么？

As Philip says, “performance is relative”. There can be instances where your site would load super fast on a user’s device, while it is sluggish on another. Two websites can take the same time to load, yet one can seem to load faster by loading content progressively. This creates the illusion of the page already being loaded and ready while it is actually loading in the background.

正如菲利普所说，“绩效是相对的”。 在某些情况下，您的网站可能会在用户的设备上超快加载，而在另一个设备上却很缓慢。 两个网站可能需要花费相同的时间来加载，但是一个网站似乎可以通过逐步加载内容来更快地加载。 这会造成页面在后台实际加载时已经被加载并准备就绪的错觉。

On another instance, the web page can actually load fast, but it can take a long time for it to become responsive as there are several blocking processes running in the background.

在另一个实例中，该网页实际上可以快速加载，但是由于在后台运行多个阻止进程，因此它可能需要很长时间才能响应。

Therefore it is important to be precise and to refer to performance in terms of objective criteria that can be quantitatively measured.

因此，重要的是要精确并根据可以定量测量的客观标准来指称性能。

它为什么如此重要？ (Why is it important?)

Traditionally, page events such as load were used to measure performance. But in fact, this does not necessarily correspond with anything the user cares about.

传统上，使用页面事件(例如load )来衡量性能。 但是实际上，这不一定与用户关心的任何事情相对应。

For example, a website may “load” a minimal page immediately, but then defers fetching content and takes several seconds to display any useful content on the page. This may happen after the page load event. Despite technically having a faster “load time”, that time does not relate to the actual user experience as the useful content takes several more seconds to exist.

例如，网站可能立即“加载”最小页面，但随后推迟了获取内容的过程，并花费了几秒钟的时间在页面上显示任何有用的内容。 页面加载事件之后可能会发生这种情况。 尽管从技术上讲具有更快的“ 加载时间 ”，但该时间与实际的用户体验无关，因为有用的内容要花几秒钟的时间才能存在。

指标-分组 (Metrics — Grouped)

The performance metrics can be grouped under several categories.

性能指标可以分为几类。

• Quantity-based metrics
  基于数量的指标
• Milestone metrics
  里程碑指标
• Rendering metrics
  渲染指标
• Custom metrics
  自定义指标

基于数量的指标 (Quantity-based metrics)

Measures the number of HTTP requests, weight due to resources such as images, styles, JavaScript, HTML.

测量HTTP请求的数量，这些资源的权重取决于图像，样式，JavaScript，HTML等资源。

Useful for

对...有用

• Raising alarms — they let you know of how healthy your website is by letting you know whether your web application exceeds the performance budget. They also help monitor your web application over time and is considered one of the simplest metrics.
  引发警报-通过让您知道Web应用程序是否超出性能预算，它们使您知道网站的运行状况。 它们还有助于随着时间的推移监视您的Web应用程序，并且被认为是最简单的指标之一。

Not useful for

没用

• Knowing the user experience — they are unable to elaborate on the user-perceived information as these metrics are mostly concerned on the straightforward attributes.
  了解用户体验-他们无法详细说明用户感知的信息，因为这些指标主要与直接属性有关。

基于规则的指标 (Rule-based metrics)

These metrics are generated by web applications and browser extensions based on predefined rules. You would receive either a single output value/score or a series of ratings to your site. Applications such as Google Pagespeed Insights and Lighthouse provide rule-based metrics.

这些指标是由Web应用程序和浏览器扩展根据预定义规则生成的。 您将获得单个输出值/得分或一系列站点评级。 Google Pagespeed Insights和Lighthouse等应用程序提供基于规则的指标。

Useful for

对...有用

• Scores make it easier to communicate, measure, and track performance as they are easily representable. In other words, it is easily interpretable as higher scores directly imply better performance.
  分数很容易表示，因此可以更轻松地交流，衡量和跟踪绩效。 换句话说，它很容易解释，因为更高的分数直接暗示更好的性能。
• Provide “action items” or rather tips on how to improve each score or rating.
  提供“行动项目”或有关如何提高每个分数或等级的提示。

Not useful for

没用

• Knowing the user experience — similar to quantity-based metrics, these metrics are unable to elaborate on the user-perceived information as these metrics are based on predefined rules which are known to change over time. There are some applications and extensions which do provide user-centric feedback.
  知道用户体验-与基于数量的指标类似，这些指标无法详细说明用户感知的信息，因为这些指标基于已知规则随时间变化。 有一些应用程序和扩展确实提供了以用户为中心的反馈。

里程碑指标 (Milestone metrics)

These metrics are usually time-based and can be easily viewed from your browser developer tool’s network tab. Metrics such as ‘Page Load’ ‘DOMContentLoaded’ are a part of milestone metrics. The ‘Time to First Byte’ metric which is also a part of this group, helps you understand the speed of your backend server.

这些指标通常是基于时间的，可以从浏览器开发人员工具的“网络”标签轻松查看。 诸如“ 页面加载 ”，“ DOMContentLoaded ”之类的指标是里程碑指标的一部分。 “ 到第一个字节的时间 ”度量标准也是该组的一部分，可帮助您了解后端服务器的速度。

Another new addition to this group of metrics is ‘Time to Interactive’. This metric tells you when your page is ready for user interaction. In other words, when your page becomes ready for users to interact with it. This is an important addition as a loaded page which is not ready for user interaction is equal to an unloaded page.

这组指标的另一个新增功能是“ 互动时间 ”。 此指标告诉您页面何时可以进行用户交互。 换句话说，当您的页面准备好供用户与其交互时。 这是重要的补充，因为尚未准备好与用户交互的已加载页面等于已卸载页面。

Useful for

对...有用

• Describe user experience as the milestones are from the user’s end and depict the user’s perception.
  将用户体验描述为里程碑来自用户端，并描述用户的感知。
• Easy to track as the metrics are based on time.
  由于指标基于时间，因此易于跟踪。
• Visualizations are simple and easily understandable.
  可视化很简单，很容易理解。

Not useful for

没用

• Does not reveal the whole picture — what the user sees between the milestones are not captured in these metrics.
  不能显示整体情况-这些指标未捕获用户在里程碑之间看到的内容。

渲染指标 (Rendering metrics)

Rendering metrics help you fill the gaps from the milestone metrics by revealing the user’s visual experience as to what they see on the screen. This combined with milestone metrics can be very powerful.

呈现指标通过揭示用户在屏幕上看到的内容的视觉体验，帮助您填补里程碑指标的空白。 结合里程碑指标可以非常强大。

Useful for

对...有用

• Describing the user experience as they are capable of handling the visual experience from the user’s perspective
  描述用户体验，因为他们能够从用户的角度处理视觉体验
• Identify your rendering performance
  确定您的渲染效果

Not useful for

没用

• Prioritizing pixels — they do not know which pixels are important. In other words, it does not know to disregard visual content with no real value to the user such as ads and popups.
  设置像素优先级-他们不知道哪些像素很重要。 换句话说，它不知道忽略对用户没有任何实际价值的视觉内容，例如广告和弹出窗口。
• Cannot identify interactivity — does not know when the user can interact with the visual content.
  无法识别交互性-不知道用户何时可以与视觉内容进行交互。

自定义指标 (Custom metrics)

Custom metrics are triggered when something happens for your user’s experience. You will use APIs such as the User Timing API to get the metrics from the browser and pass them onto your servers.

当用户体验发生变化时，将触发自定义指标 。 您将使用诸如User Timing API之类的API从浏览器获取指标并将其传递到您的服务器上。

Useful for

对...有用

• Describe the user experience as the metrics are focused on the user’s real data.
  描述度量标准集中于用户的真实数据时的用户体验。

Not useful for

没用

• Comparing with competitors as the metrics are unique to your website. For example, “Time to First Tweet” metric of Twitter cannot be compared with a custom metric of Facebook as they do not mean the same thing.
  与竞争对手进行比较，因为这些指标是您网站唯一的指标。 例如，Twitter的“首次发布时间”指标不能与Facebook的自定义指标进行比较，因为它们并不意味着同一件事。

关键指标-重点 (Key Metrics — Highlights)

As we are now aware of the groups of metrics, let us look at some key metrics which belong to these groups.

现在我们知道了指标组，让我们看一下属于这些组的一些关键指标。

互动时间(TTI) (Time to Interactive(TTI))

This is the point where everything is stable enough to handle user interaction. In other words, when the layout has stabilized, key web fonts are visible, and the main thread is available free enough to handle user input. This metric is key to understand how long the user has to wait in order to interact with the website without any delay or lag.

这是一切都足够稳定以处理用户交互的点。 换句话说，当布局稳定后，将显示关键的Web字体，并且主线程足够免费以处理用户输入。 该指标是了解用户必须等待多长时间才能与网站进行交互而没有任何延迟或延迟的关键。

首次输入延迟(FID) (First Input Delay (FID))

This is also known as the Input Responsiveness. It is the time from when the user interacts with your website and the time your website is able to respond to that interaction. This enhances the TTI as FID fills up the gap as to what happens when the user interacts with the website. This is a Real User Metric(RUM) and can be measured with the help of some JavaScript libraries on the browser.

这也称为输入响应性 。 从用户与您的网站进行交互到您的网站能够响应该交互的时间。 由于FID填补了用户与网站交互时发生的情况的空白，因此增强了TTI。 这是一个真实用户指标(RUM)，可以在浏览器上的一些JavaScript 库的帮助下进行测量。

最大含量的涂料(LCP) (Largest Contentful Paint (LCP))

Denotes the point in the page lifecycle where the page’s important content has likely loaded. Although this is based on an assumption that the most important element of the page is the largest one visible in the user’s viewport. If the content has been rendered above and below the visible region(fold), only the one above is taken into consideration — the part which is visible to the user.

表示页面生命周期中页面的重要内容可能已加载的点。 尽管这是基于以下假设：页面的最重要元素是用户视口中可见的最大元素。 如果内容已在可见区域(折叠)的上方和下方渲染，则仅考虑上方的内容-用户可见的部分。

总封锁时间(TBT) (Total Blocking Time (TBT))

TBT is a metric that helps quantify the severity of how long a web page takes to be interactive. TBT measures the time between the first paint and Time to Interactive (TTI). A lower TBT is an indicator of good performance.

TBT是一项指标，可以帮助量化网页进行交互需要多长时间的严重程度。 TBT测量的是第一道涂料和互动时间(TTI)之间的时间。 较低的TBT表示性能良好。

累积版式移位(CLS) (Cumulative Layout Shift (CLS))

CLS examines how unstable the website elements are. It highlights how often users experience unexpected layout shifts (reflows) and their impact on the overall user experience.

CLS检查网站元素的不稳定程度。 它突出了用户多久遇到意外布局的变化( 回流 )及其对整体用户体验的影响。

Let’s have a look at how unexpected layout shifts can have a negative impact on the UX.

让我们看一下意外的布局偏移如何对UX产生负面影响。

速度指数 (Speed Index)

The speed index measures how quickly the page contents are visually filled. This score is computed based on the visual progress yet it is merely a calculation. As this metric is concerned on the visual perspective, the viewport size has a direct impact on the speed index. Therefore you need to define your viewport sizes to match your target audience to get a more meaningful score.

速度指数衡量页面内容在视觉上的填充速度。 该分数是根据视觉进度计算出来的，但这仅仅是一个计算。 由于此度量标准是从视觉角度考虑的，因此视口大小会直接影响速度指标。 因此，您需要定义视口大小以匹配目标受众，以获得更有意义的分数。

花费的CPU时间 (CPU time spent)

This metric reveals the time the main thread is blocked. It shows how often and how long the CPU/main thread is blocked for tasks such as painting, rendering, scripting and loading. If your web application has a high CPU time, it would give the user an unpleasant laggy experience. Can be calculated with the help of WebPageTest.

该指标显示了主线程被阻塞的时间。 它显示了CPU /主线程被阻止执行的频率和时间 ，例如绘画，渲染，脚本和加载。 如果您的Web应用程序具有很高的CPU时间，它将给用户带来不愉快的延迟体验。 可以借助WebPageTest进行计算。

组件级CPU成本 (Component-Level CPU Costs)

Similar to the CPU time spent, this metric focuses on the cost of JavaScript. The overall idea is to use CPU instruction count per component in understanding its impact on the overall experience, in isolation.

与花费的CPU时间类似，此指标侧重于JavaScript的成本。 总体思路是使用每个组件的CPU指令数来孤立地了解其对总体体验的影响。

Can be implemented with the help of Puppeteer.

可以在Puppeteer的帮助下实施。

挫折指数 (Frustration Index)

When a user gets frustrated, they leave your web page. All of the above-discussed metrics focus on individual events. But the frustration index by Tim Vereecke concentrates on the gaps between metrics instead of looking at them individually. This metric takes a look at the key milestones in the page and calculates the level of frustration the user will endure during the page load, as a score.

当用户感到沮丧时，他们会离开您的网页。 上面讨论的所有指标都针对单个事件。 但是Tim Vereecke的沮丧指数集中在指标之间的差距上 ，而不是单独查看它们。 此指标查看页面中的关键里程碑，并计算用户在页面加载期间承受的挫败感等级，以此作为得分。

This is a key performance indicator for user experience as it wholely focuses on the user.

这是用户体验的关键性能指标，因为它完全关注用户。

广告重量影响 (Ad Weight Impact)

If your web site has advertisements to generate revenue, it is essential for you to know the extra burden it would cause the user as it can degrade the performance of your web page. A script created by Paddy Ganti helps you find out the weight of your ad-related code.

如果您的网站上有广告来产生收入，那么您必须知道它会给用户带来的额外负担，因为它可能会使您的网页性能下降。 由Paddy Ganti创建的脚本可帮助您找出与广告相关的代码的重要性。

偏差指标 (Deviation metrics)

We spoke about a lot of different metrics. But one of the issues with all of the above metrics is consistency. The variance in your results shows how reliable your web site is across the network. This would also signify as to how much attention you must give to your system and infrastructure to provide a streamlined service. Specific pages can give a bigger variance due to some external scripts which are pretty unreliable. As Vitaly says, it is also a good idea to keep track of the browser versions supported to get a better idea on performance.

我们谈到了许多不同的指标。 但是上述所有指标的问题之一是一致性。 结果的差异表明您的网站在整个网络中的可靠性。 这也表示您必须对系统和基础架构给予多少关注才能提供简化的服务。 由于某些外部脚本非常不可靠，因此特定页面的差异可能更大。 正如Vitaly所说，跟踪受支持的浏览器版本也是一个好主意，以便更好地了解性能。

为什么要为您的网站考虑指标组合？ (Why Should You Consider a Combination of Metrics for Your Website?)

Each website is different with its own target audience. Depending on what your website does, whom it caters to, you should focus more on specific metrics.

每个网站都有自己的目标受众。 根据您网站的功能和服务对象，您应将重点更多地放在特定指标上。

For example, if you are a streaming provider, you should concentrate more on the key input responsiveness, memory usage and TTI as they are essential for your application. But if you are website with more readable content such as Wikipedia and Medium, you should focus more on the visual changes and the CPU metrics. If you have your own blog with integrated ads, you should also focus on the ad weight impact. Moreover, the frustration index can be applied to all the above examples, as the key goal of any website is to avoid user frustration as it can have a negative impact on user experience.

例如，如果您是流媒体提供商，则应将更多的精力放在键输入响应性，内存使用率和TTI上，因为它们对于您的应用程序至关重要。 但是，如果您的网站上的内容更具可读性，例如Wikipedia和Medium，则应更多地关注外观变化和CPU指标。 如果您自己的博客中集成了广告，则还应该关注广告权重的影响。 而且，挫折指数可以应用于所有上述示例，因为任何网站的主要目标都是避免用户挫折，因为它可能对用户体验产生负面影响。

You only get one chance to make a first impression. Make it count.

您只有一次留下深刻印象的机会。 让它计数。

That’s it for this article. I highly recommend you go through the below resources as they are highly educative regarding this vast domain of web performance.

本文就是这样。 我强烈建议您阅读以下资源，因为它们对网络性能的广阔领域具有很高的教育意义。

学到更多 (Learn More)

ResourcesFront-End Performance Checklist 2020 by Vitaly FriedmanPresentation by Marcos IglesiasArticle by Steve SoudersArticle by Philip WaltonArticle by Mat Ball

资源 前端性能清单2020维塔利·弗里德曼 介绍马科斯·伊格莱西亚斯 文章由史蒂夫Souders的 文章由菲利普·沃尔顿 文章垫球