Web指标综合指南：影响绩效的指标

介绍

在这个网络时代，**网络性能**对于确定用户参与度和体验至关重要。当我们谈论**网络性能**时，**Web Vitals**是帮助我们衡量和改进它的关键矩阵。在本文中，我们将探索**Web Vitals**的基础知识，并了解它们如何帮助我们提高**网络性能**。

什么是 Web Vitals？

**Web Vitals** 是 **Google** 推出的一组指标，用于衡量用户体验的关键方面。它们专注于网络性能，强调直接影响用户对网页速度、响应能力和稳定性的看法的因素。简而言之，Web Vitals 可以帮助您衡量 **网站的性能**。

核心网络指标

**核心 Web 指标** 是适用于所有网页的 Web 指标子集，应由所有网站所有者进行衡量，并将显示在所有 Google 工具中。在本文中，我们将重点介绍主要的 **3** 个 Web 指标。

最大的内容涂料 (LCP)

**LCP** 定义了 **最大可见内容**（例如，英雄图像、标题）在屏幕上加载所需的时间。**LCP** 的良好阈值小于 **2.5 秒**。

如果您的网站的 **LCP** 较高，则意味着页面的主要内容需要更长的时间来加载，从而导致网络性能不佳。

交互到下一次绘制 (INP)

**INP** 评估用户交互（如单击按钮或在输入字段中键入内容）与浏览器下次响应时视觉更新页面之间的延迟。**INP** 的良好阈值小于等于 **200 毫秒**。

以前，我们使用**FID（首次输入延迟）**来测量此指标。但与传统的**首次输入延迟（FID）**指标（仅测量首次用户交互的延迟）不同，**INP** 会评估网页上所有交互的响应能力。

累积布局偏移 (CLS)

**CLS** 是通过加载阶段（例如内容意外移动）的 **网页视觉稳定性** 来衡量的。**CLS** 的良好阈值小于 **0.1**。

现在，这个 CLS 分数的计算有点棘手。要计算它，我们需要了解两件事：

影响分数

视口部分受到不稳定元素的影响。举个例子，假设 **50%** 的视口高度被一个移动元素占据，影响分数就是 **0.5**。

距离分数

不稳定元素相对于视口大小移动的距离。举例来说，如果元素移动了视口高度的 **25%**，则距离分数为 **0.25**。

现在，**CLS** 分数是页面生命周期中发生的所有布局转变的影响分数和距离分数的乘积。

计算 **CLS** 分数的公式是：

CLS = Impact Fraction X Distance Fraction

衡量网络生命力的工具

目前市场上有多种工具可用于测量 **Web Vitals**。一些最受欢迎的工具包括：

您可以使用任何您选择的工具来开始。

结论

在本文中，我们了解了什么是**Web Vitals**、**Core Web Vitals**以及如何使用这些矩阵来衡量**Web 性能**。要了解更多信息，请查看此处的 web.dev 性能部分。如果您喜欢这个博客，并且想了解有关**前端开发**和**软件工程**的更多信息，您可以在 Dev.to 上关注我。