1 od 37

谷歌体验度量指标集 Web Vitals

网易-云音乐-kkdev163

2 od 37

  • 背景 & Web Vitals 概要
  • 核心指标的计算原理与优化思路
  • 谷歌相关工具集
  • 在云音乐的落地实践

2

3

3 od 37

背景介绍

3

4 od 37

遇到问题

4

3. 实验室环境 与 真实用户侧指标不一致，难以对齐

DomReady 、Load

2. 真实用户侧指标 与 用户体验感知，没有直接关联

💡

5 od 37

Web Vitals 是谷歌提出的一组

用来衡量 用户体验 的 度量指标集

5

6 od 37

Web Vitals

6

Loading

Largest Contentful Paint (LCP)

Interactivity

First Input Delay (FID)

Visual Stability

Cumulative Layout Shift (CLS)

First Contentful Paint (FCP)

Time to First Bytes (TTFB)

Total Blocking Time (TBT)

Time to Interactive (TTI)

Core

Web

Vitals

7 od 37

Core Web Vitals

7

(Loading)

(Interactivity)

(Visual Stability)

8 od 37

Largest Contentful Paint (LCP)

8

当前视窗(viewport)中的最大内容元素的渲染时间

加载时性能 (Loading)

9 od 37

判定的元素

9

<img>

<svg:image>

<video>

(with poster image)

background-image:

url()

Block-Level element

(containing text node)

10 od 37

元素的大小

10

2000 * 1000

Intrinsic

Size

1000 * 500

Visible

Size

min()

1000*500

AaBbCcDdEe

FfGgHh

11 od 37

LCP Demo

11

0ms

2000ms

2400ms

3000ms

4500ms

TimeLine

12 od 37

LCP 影响因素 & 优化思路

  • 请求 html 时的服务器响应时间
  • 阻塞渲染的 CSS、JavaScript
  • 资源加载时间
  • 客户端渲染 (Client-side rending)

12

13 od 37

First Input Delay (FID)

13

Button

👋

Button

用户首次输入事件的延迟

可交互性 (Interactivity)

Busy

IDLE

14 od 37

FID 计算规则

14

Button

Main Thread

Busy

FID

Event Process Timing

Button

👋

Busy

Button

IDLE

Button

Handle

Click

Button

Update

UI

15 od 37

FID 判定规则

15

哪些事件会被记录为 FID ？

没有绑定事件处理器的元素，是否会被记录 FID ？

clicks、taps、key presses

✅

scrolling、zooming

❌

Main Thread

Busy

IDLE

FID

👋

16 od 37

FID 影响因素 & 优化思路

16

  • 解析、执行了太重的 JavaScript, 导致主线程繁忙

1. 减小 JS 文件体积（Code-splitting、延迟加载）

2. 减少主线程执行开销 (拆分 Long Tasks、异步执行、web worker)

17 od 37

Cumulative Layout Shift (CLS)

17

累计页面布局偏移

视觉稳定性 (Visual Stability)

18 od 37

计算公式

18

layout shift score = impact fraction * distance fraction

布局位移评分 = 影响面积分数 * 距离分数

0.5 * 0.25 = 0.125

19 od 37

CLS 影响因素 & 优化思路

19

添加元素大小属性

(width、height )

Animation

20 od 37

谷歌系工具简介

20

  • Chrome 插件：Web Vitals

21 od 37

谷歌系工具简介

21

2. Chrome Devtools-Performance

22 od 37

谷歌系工具简介

22

2. Chrome Devtools-Performance

23 od 37

谷歌系工具简介

23

2. Chrome Devtools-Performance

Total Blocking time (TBT)、Longtask

24 od 37

谷歌系工具简介

24

3. Chrome Devtools-Lighthouse

25 od 37

谷歌系工具简介

25

3. Chrome Devtools-Lighthouse

26 od 37

谷歌系工具简介

26

4. Chrome User Experience Report (CrUX)

根据 origin、url 查询

数据是通过 Chrome 自身的

统计信息 (需要用户许可)

27 od 37

谷歌系工具简介

27

5. PageSpeed Insights

28 od 37

谷歌系工具简介

28

6. CrUX Dashboard On DataStudio

29 od 37

谷歌系工具简介

29

7. web-vitals - npm

30 od 37

云音乐-用户端数据

30

LCP 的兼容性是 Chrome Webview >= 77

31 od 37

云音乐-实验室侧数据

31

32 od 37

  • 重点关注核心指标集
  • 用户侧指标 与 实验室侧指标 对齐
  • 用户侧数据，使用与用户体验直接关联的指标

32

解决的痛点：

33 od 37

  • 整体平均分、通过率大幅下降 87 -> 72 72% -> 28%
  • 长期霸榜的页面，发现新的性能问题

33

更新带来的问题：

34 od 37

建议的使用方式

34

1. 使用线上真实数据发现不合格的体验问题

2. 使用 Lighthouse 工具诊断，根据优化建议进行优化

3. 结合 devtools 等工具进行优化

4. 使用 Lighthouse 验证上线前的改进效果

5. 线上真实数据验证用户端的体验改进

云音乐 WAPM 平台交流 POPO群：1489786

35 od 37

  • 背景 & Web Vitals 概要
  • 核心指标的计算原理与优化思路
  • 谷歌工具简介
  • 在云音乐的落地实践

35

3

总结

36 od 37

Make The Web More Awesome!

36

37 od 37

END

Q&A