web核心指标

概览

网页指标是 Google 推出的一项计划，旨在针对提供出色网络用户体验至关重要的质量信号提供统一指南。

网站所有者不必是性能专家，就能了解其向用户提供的体验质量。网页指标计划旨在简化网页指标，帮助网站专注于最重要的指标，即核心网页指标。

核心网页指标

• 最大内容绘制：Largest Contentful Paint (LCP)：衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。
• 首次输入延迟：First Input Delay (FID) ：衡量互动。为了提供良好的用户体验，网页的 FID 不应超过 100 毫秒。
• 累计布局偏移：Cumulative Layout Shift (CLS) ：衡量的是视觉稳定性。为了提供良好的用户体验，页面应将 CLS 保持在 0.1.  或更低。

注意： 新功能： 与下一帧的交互：Interaction to Next Paint (INP) 于 2024 年 3 月将 FID 替换为 INP 作为 Core Web Vitals 指标。

web-vitals 库

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

将网站配置为使用 web-vitals 库来衡量核心网页指标数据并将其发送到分析端点后，下一步就是汇总并报告这些数据，查看您的网页至少有 75% 的网页访问是否达到建议的阈值。

您还可以使用 Web Vitals Chrome 扩展程序，针对每个核心网页指标生成报告，而无需编写任何代码。此扩展程序使用 web-vitals库来测量上述各项指标，并在用户浏览网页时向其显示这些指标。

其他网页指标

虽然核心网页指标是了解并提供出色用户体验的关键指标，但也有其他重要指标。

这些其他网页指标通常用作 Core Web Vitals 的代理或补充指标，有助于捕获更多体验或帮助诊断特定问题。

例如，首字节时间 (TTFB) 和首次内容绘制 (FCP) 指标都是加载体验的重要方面，并且都有助于诊断 LCP 问题（服务器响应时间过长或阻塞渲染的资源）。

同样，总阻塞时间 (TBT) 和可交互时间 (TTI) 等指标也是实验室指标，对于捕获和诊断将影响 FID 的潜在互动问题至关重要。但是，它们不是核心网页指标集的一部分，因为它们无法现场衡量，也不反映以用户为中心的结果。

本文内容提取自官网，如需详细内容请前往