Essential metrics for a healthy site 健康网站的必要指标

date: 2020-04-30 updated: 2020-07-21

原文链接

优化用户体验的质量是每一个站点长期成功的关键。无论你是企业主、运营人员还是开发者，Web Vitals 可以帮助你量化网站的体验并明确如何改善。

概述

Web Vitals 是一项Google推出的一项举措，用来统一指导网站为用户提供出色的用户体验。

多年来 Google 提供了一系列的工具用来衡量和评估性能。有的开发者很擅长使用这些工具，也有一些人发现要跟上这些工具和各种指标有点难。

一些站长要了解自己产品的用户体验，不一定（非得）是性能专家。 Web Vitals 目的是简化环境，帮助网站专注最重要的指标，也就是 Core Web Vitals 。

Core Web Vitals

Core Web Vitals 是衡量网页性能指标中的子集，也会在Google提供的工具中体现。每个指标代表用户体验的不同方面，可以被量化，代表了以用户为中心的实际经验。

组成 Core Web Vitals 的指标会不断演变。2020年聚焦三个用户体验的方面： 加载loading，交互性interactivity，和视觉稳定性Visual Stability ，包含了下面的指标和它们的阈值：

• Largest Contentful Paint (LCP) ：衡量 loading 性能。为了提供好的用户体验， 最大内容（注：可以理解为页面核心模块）绘制 应当在页面开始加载的 2.5 秒内触发。
• First Input Delay FID : 衡量交互。为了提供更好的用户体验，页面有应当小于 100 毫秒的 首次输入延迟。（注：输入框等交互不卡）
• Cumulative Layout Shift (CLS) : 衡量 视觉稳定。为了提供更好的用户体验，页面的 CLS 应当小于 0.1。（注：可理解为页面加载过程中的抖动的程度）

对于上面的指标，确保你已经为大多数用户提供了推荐的标准，在桌面和移动端的页面加载中，一个很好的衡量标准是 75% 的页面加载。（注：也就是所有页面生成的渲染指标中，有75%的页面是能满足上面指标的）

如果网站的上述三个指标达到推荐的 75%，评估页面核心指标的工具给予 Pass 的评价。

要了解这些建议背后的技术细节和测量方法，可以看这篇文章：《Defining the Core Web Vitals mertrics thresholds》

用工具衡量性能指标

Google 认为 核心性能指标CWV 是web体验的关键。因此， CWV 目标是 在 所有流行的性能评估工具 中体现这些指标。下面的段落展示了哪些工具支持 CWV。

衡量 核心指标的工具

Chrome User Experience Report 为每一项核心指标提供匿名、真实的数据，方便我们快速评估性能，不用手动在页面中分析，并为其他工具提供支持： PageSpeed Insights，和 Search Console’s CWV report

关于如何使用这些工具以及哪种工具适合您的用例知道，请参考 Getting started with measuring Web Vitals

Chrome User Experience Report 提供了一个快捷的方式来评估网站性能，但没有提供每一页的细节，但这对快速诊断、监控、快速反应是必须的。因此，我们强烈建议站点设置自己的 real-user 真实用户监控。

用 js 衡量核心指标

每一项核心指标可以用 js 驱动 标准 webAPI 来衡量。

衡量核心指标最简单的方法是使用 web-vitals 这个js库，这是一个小巧、生产可用的封装包，用来衡量每个指标。

使用这个 web-vitals 库，衡量每一项指标就像调用单个函数一样简单。完整用法和api请参考文档

import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 使用 `navigator.sendBeacon()` ，使用 `fetch()` 作为回退。
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

你也可以安装 chrome拓展插件，这个插件不用写代码，一样衡量指标，方便用户查看。 Web Vitals Chrome Extension.

如果喜欢自己实现，可以参考下面的指标：

• js 实现测量LCP
• js 实现测量 FID
• js 实现测量 CLS

如何使用流行的分析服务或者自研的分析工具来衡量这些指标，可以看 Best practices for measuring Web Vitals in the field

实验室工具来衡量核心指标

上面的核心指标当然很重要，也需要在实验室中来衡量一些指标。

把功能发布给用户之前，在实验室测量是测试性能的最佳实践，这也是发现性能下降的最佳方法。（注：可以理解为自己的设备来做测量，而不是让用户数据来反馈）

可以使用下面的工具来衡量核心指标：

像 Lighthouse 这样的工具，可以自己模拟用户加载页面，但是没办法衡量 FID，因为没有用户来输入，但是我们可以用 TBT Total Blocking Time 来代替。

While lab measurement is an essential part of delivering great experiences, it is not a substitute for field measurement.

The performance of a site can vary dramatically based on a user’s device capabilities, their network conditions, what other processes may be running on the device, and how they’re interacting with the page. In fact, each of the Core Web Vitals metrics can have its score affected by user interaction. Only field measurement can accurately capture the complete picture.

提高指标的建议

测量了核心指标之后就可以进行针对性优化。下面的指导对每个核心指标提供了具体建议：

• 优化 LCP
• 优化 FID
• 优化 CLS

其他指标

除了上述的核心指标，也有其他重要指标。

作为 核心指标的补充，来获得体验效果，帮助诊断定位问题。

比如：

• Time to First Byte TTFB 指标
• First Contentful Paint FCP 指标

都是关于 loading 的指标，可以影响 FCP。 降低 服务器返回时长 Server Response Times 和 Render-blocking Resource 阻塞渲染资源。

比如：

• Total Blocking Time TBT
• Time to Interactive TTI

是实验室指标，可以辅助查找影响FID和 交互的问题。但他们不是核心指标的内容，因为他们不是用户得到的，不能反映 以用户为核心 的目标。

发展中的指标

这些指标未来可能会不断演变。