Skip to main content

网页性能指标如何衡量？

RAIL模型​

RAIL模型是一种用于设计和评估用户体验的性能模型，代表响应（Response）、动画（Animation）、空闲（Idle）、加载（Load）四个方面。这个模型旨在帮助开发者和设计师优化网页和应用的性能，以提升用户体验。每个部分的目标是：

  • 响应（Response）：在用户输入后尽快提供反馈，理想目标是在100毫秒内。
  • 动画（Animation）：确保动画和滚动流畅，帧率保持在60fps，以避免卡顿，每帧处理时间不超过16毫秒。
  • 空闲（Idle）：最大化主线程的空闲时间，以快速响应用户输入。
  • 加载（Load）：从用户导航到网页到网页可交互的时间应在5秒内完成。 RAIL模型强调性能优化应该以用户体验为中心，关注用户在使用应用时的实际体验，而不仅仅是技术指标。通过关注这四个方面，开发者可以更全面地理解和改进网站或应用的性能。

指标获取工具​

开发者工具、灯塔、 PageSpeed Insights 、 WebPageTest、 web-vitals

核心网页指标​

Largest Contentful Paint (LCP) 最大内容绘制​

LCP 报告的是视口中可见最大图片或文本块相对于用户首次导航到网页的呈现时间。

区别： 较新的以用户为中心的性能指标（例如 First Contentful Paint (FCP)）仅捕获加载体验的开始阶段。如果网页显示启动画面或显示加载指示器，则这一时刻与用户没有太大关系。

目标： 网站应努力在至少 75% 的网页访问中将 LCP 控制在 2.5 秒以内。

获取数据： 您可以通过网站上安装的实时用户监控 (RUM) 工具显示基于真实用户的 LCP 数据，也可以使用 Chrome 用户体验报告 (CrUX) 从数百万网站的真实 Chrome 用户那里收集匿名数据。

例如： 开发者工具、灯塔、 PageSpeed Insights 、 WebPageTest、 web-vitals

要确定 LCP 资源，您可以使用开发者工具（例如上面讨论的 PageSpeed Insights、Chrome 开发者工具或 WebPageTest）确定 LCP 元素。在这里，您可以匹配由该网页加载的所有资源的广告网络广告瀑布流中该元素加载的网址（同样适用，如果适用）。

Cumulative Layout Shift (CLS) 累积布局偏移​

CLS 用于衡量在网页的整个生命周期内发生的每次意外布局偏移的最大突发布局偏移分数。 目标：为了提供良好的用户体验，网站应努力使 CLS 得分不超过 0.1。

布局偏移详情​

布局偏移由 Layout Instability API 定义。只要视口内可见的元素在两帧之间更改起始位置（例如，写入模式中的顶部位置和左侧位置），该 API 就会报告 layout-shift 条目。此类元素被视为不稳定元素。

请注意，仅当现有元素更改其起始位置时，才会发生布局偏移。如果将新元素添加到 DOM 或现有元素更改了大小，只要此类更改不会导致其他可见元素更改其起始位置，系统便不会将其视为布局偏移。

布局偏移得分​

为了计算“布局偏移得分”，浏览器会查看视口大小，以及视口中不稳定元素在两个渲染帧之间的移动情况。布局偏移分数是该移动两种衡量方式的乘积：影响分数和距离分数（两者的定义见下文）。

layout shift score = impact fraction * distance fraction

影响比例​

影响比例用于衡量不稳定的元素对两个帧之间的视口区域有何影响。 特定帧的影响比例是该帧和前一帧中所有不稳定元素的可见区域组合（占视口总面积的比例）。

距离分数​

“布局偏移”分数公式的另一部分用于衡量不稳定元素相对于视口移动的距离。距离比例是指任何不稳定元素在帧中移动的最大水平或垂直距离除以视口的最大尺寸（宽度或高度，以较大者为准）。

如何测量​

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

如何优化​

导致 CLS 不佳的最常见原因包括：

  1. 没有尺寸的图片。
  2. 广告、嵌入和没有尺寸的 iframe。
  3. 动画。
  4. 网络字体。

没有尺寸的图片：添加固定尺寸，或者设定展示宽高比（aspect-ratio） 广告、嵌入和没有尺寸的 iframe： 1. 为延迟加载的内容预留空间 2. 将延迟加载的内容放在视口中靠下的位置 3.避免在没有用户互动的情况下插入新内容 动画： 更改 CSS 属性值可能会要求浏览器对这些更改做出反应。某些值（例如 box-shadow 和 box-sizing）会触发重新布局、绘制和合成。更改 top 和 left 属性也会导致布局偏移，即使要移动的元素位于自己的层上也是如此。避免使用这些属性添加动画效果。 使用 transform 动画来平移、缩放、旋转或倾斜元素。 使用 translate 的合成动画不会影响其他元素 网络字体：1. 使用合适的后备字体 2. 使用 <link rel=preload> 尽早加载关键网页字体。预加载的字体更有可能满足首次绘制要求，在这种情况下不会发生布局偏移。3.确保网页符合存储缓存 的条件

Interaction to Next Paint (INP) 与下一次绘制的交互​

INP 是一项指标，通过观察用户在访问网页期间发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。最终 INP 值是观测到的最长互动时间，离群值会被忽略。

INP 的目的不是测量互动的所有最终效果（例如网络提取和来自其他异步操作的界面更新），而是下一次绘制被阻止的时间。通过延迟视觉反馈，用户可能会觉得页面响应速度不够快，而 INP 旨在帮助开发者衡量这部分用户体验。

目标： INP 低于或等于 200 毫秒表示网页响应良好。 INP 高于 200 毫秒且低于或等于 500 毫秒表示网页的响应能力需要改进。 INP 高于 500 毫秒表示网页响应速度很差。

INP 与 First Input Delay (FID) 有何不同？ INP 是 First Input Delay (FID) 的继任指标。虽然两者都是响应速度指标，但 FID 仅衡量了网页上首次互动的“输入延迟”。INP 通过观察网页上的所有互动来改进 FID，即从输入延迟开始，到运行事件处理脚本所需的时间，再到浏览器绘制下一帧。

这些差异意味着 INP 和 FID 是不同类型的响应能力指标。FID 是用于评估网页对用户的首次展示的加载响应速度指标，而无论网页互动在何时发生，INP 都是更可靠的整体响应能力指标。

其他指标​

First Contentful Paint (FCP)​

首次内容绘制 (FCP) 用于衡量从用户首次导航到网页到网页内容的任何部分在屏幕上呈现的时间。

First Input Delay (FID)​

用户首次与页面交互（例如点击链接、按钮等）到浏览器实际能够响应该交互的时间。

Time to First Byte (TTFB)​

服务器响应时间 (TTFB, Time to First Byte): 浏览器发起请求到接收到来自服务器的第一个字节的时间。

如何获取指标数据​

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  let lastEntry = perfEntries[perfEntries.length - 1];
  // Process the latest candidate for largest contentful paint
});
observer.observe({entryTypes: ['largest-contentful-paint']});