LofiSu

Appearance

用户体验量化指标 ​

基于开源库web-vitals获取的页面渲染耗时，交互延迟等指标。

web-vitals GitHub 仓库: github.com/GoogleChrom…

1. web-vitals 各项指标简介 ​

web-vitals是谷歌的 Chrome 维护团队于 2020 年开源的工具库，它基于统一的浏览器 Performance API 获取标准化的用户体验指标。

它主要测量6项指标，分别是：

  1. 首次内容绘制 (First Contentful Paint，FCP)
  2. 最大内容绘制 (Largest Contentful Paint，LCP)
  3. 首次输入延迟 (First Input Delay ，FID)
  4. 交互到绘制延迟（Interaction to Next Paint，INP）
  5. 累积布局偏移 (Cumulative Layout Shift，CLS)
  6. 第一字节时间 (Time to First Byte，TTFB)

性能优化的目标是提高网页或应用的响应速度和用户体验。衡量性能的主要指标包括首次内容绘制 (FCP)、最大内容绘制 (LCP)、首次输入延迟 (FID)、交互到绘制延迟（INP）、累积布局偏移 (CLS)、和第一字节时间 (TTFB)。我们将逐一探讨这些指标以及相应的优化方法。

1. 首次内容绘制 (First Contentful Paint，FCP) ​

定义: FCP 是指页面从加载开始到浏览器首次呈现任何来自 DOM 的内容的时间，包括文本、图像、SVG 等。

优化方法:

  • 减少阻塞渲染的资源: 使用异步加载脚本 (async 或 defer) 或将不必要的脚本延迟加载。
  • 优化 CSS: 尽量减少 CSS 文件的大小和数量，考虑将关键 CSS 直接内嵌到页面中。
  • 使用内容分发网络 (CDN): 加速资源加载，减少延迟。

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

定义: LCP 是指从页面加载开始到最大可见内容块渲染完成的时间。这个内容块通常是页面中的一个大图像或块级元素。

优化方法:

  • 优化图片: 使用现代图片格式 (如 WebP)、懒加载图片、或者提前加载重要的图像资源。
  • 提升服务器响应速度: 使用缓存、减少资源请求、优化数据库查询等方式减少服务器响应时间。
  • 减少客户端渲染: 尽量提前渲染内容，使用服务端渲染 (SSR) 或静态生成页面。

3. 首次输入延迟 (First Input Delay，FID) ​

定义: FID 是用户首次与页面交互（如点击链接、按钮等）到浏览器能够响应交互的时间。

优化方法:

  • 减少主线程的阻塞: 避免长时间运行的 JavaScript，分解任务、使用 Web Workers 来处理复杂计算。
  • 延迟非关键任务: 将不影响用户交互的任务推迟到用户空闲时执行（使用 requestIdleCallback）。
  • 减少第三方代码的影响: 延迟加载或异步加载第三方脚本，如广告或分析工具。

4. 交互到绘制延迟 (Interaction to Next Paint，INP) ​

定义: INP 是用户与页面交互到页面绘制下一帧之间的延迟时间。它衡量的是用户与页面交互的整体响应性。

优化方法:

  • 提高主线程的响应性: 确保交互事件处理时间短、减少阻塞渲染的操作。
  • 优化动画和过渡: 使用硬件加速的 CSS 属性，如 transform 和 opacity，避免导致重排的操作。

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

定义: CLS 衡量的是页面在加载过程中，元素发生意外布局变化的程度。

优化方法:

  • 为图像和视频保留空间: 在 HTML 中明确设置图像或视频的尺寸，避免页面加载时因资源大小不确定而导致布局变化。
  • 避免动态注入内容: 尽量减少在页面加载后动态注入广告、图片或其他内容，如果必须注入，请提前保留空间。
  • 使用稳定的字体加载策略: 避免使用自定义字体导致的文本抖动，可以使用 font-display: swap 来优先使用系统字体。

6. 第一字节时间 (Time to First Byte，TTFB) ​

定义: TTFB 是从客户端发出请求到接收到服务器响应第一个字节的时间。

优化方法:

  • 优化服务器性能: 使用高效的服务器硬件、升级到最新的服务器软件版本。
  • 使用内容分发网络 (CDN): 提升服务器响应速度，缩短地理距离带来的延迟。
  • 减少数据库查询时间: 使用缓存机制、优化数据库查询、减少后端复杂计算。

总结 ​

以上六项性能指标涵盖了从页面加载、内容渲染、到用户交互的各个方面。优化这些指标不仅能提升网站的速度，还能带来更好的用户体验，尤其是在移动设备和网络条件较差的情况下。每个指标都对应不同的优化技术，通过系统地分析和优化，可以显著改善网页的整体性能。

应用体系（不能为了优化而优化）

指标设定&性能标准:选择什么样的指标作为风向标,优化的目标和程度 收益评估：关联产品目标进行收益评估，优化是服务于产品，提升用户体验。 诊断清单：接入到性能监控预警平台，根据性能标准给出诊断清单，方便我们进行后续的改进和优化 优化手段 性能立项：和产品与后端打配合 性能实践：上线，效果评估，结合场景沉淀成文档代码 一般来说前端监控平台对性能指标的计算都是依赖于 web-vitals ，web-vitals 又是在 PerformanceObserver API 基础上封装的。 web-vitals 如果用web-vitals倒是可以直接获取性能指标的值 开发阶段，用lighthouse和WebPageTest。lighthouse统计本机的性能数据可以是首屏或者次屏，WebPageTest可以模拟具体的地区和设备通过API捕获首屏的性能数据，并且可以生成完整的网络请求时序图。

链接：https://juejin.cn/post/7362799963322171402

Copyright © 2024-present LofiSu