sunilwang

V1

2022/07/26阅读:8主题:绿意

浅谈Web Vitals

浅谈Web Vitals

作者简介

郭晓慧:慧慧子,认真生活,热爱生活

==这个工具是什么==

web-vitals是Google发起的,旨在提供各种质量信号的统一指南,我们相信这些质量信号对提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。

总之,Web Vitals则是希望提出一些标准,来帮助开发者去测量,优化页面,给到用户更好的体验。

==用“实例”说话==

1. 为什么选择c端页面进行分析

家庭服务这边c端的页面主要是面向用户的,涉及到的样式,图片,交互都会多一些,所以用家庭服务这边c端的一个页面为例,我们看下是怎么检测这个页面的性能,通过分析来看下怎么去优化改进。

2. 页面介绍

找了一个c端的钟点工落地页,这个页面包括

  • 顶部:轮播图展示
  • 中间:可以选择服务以及地区
  • 下面:一些展示性的内容,以图片展示为主(也有一部分是接口返回展示的数据)
  • 底部是一个可操作的按钮。
image=200x
image=200x

3. 开始分析

检测一下这个页面的性能指标,打开chrome的控制台,在【灯塔】中可以看到,页面的表现是45分,其中下面有六个指标,会简单介绍一下,但是这六个并不完全是chrome的核心检测指标,只有三个LCP,FID,CLS这三个是核心检测指标,这三个指标会在下一个模块详细进行介绍。

image
image
(1)简单介绍六个指标
  • FCP-反映的是从页面开始加载到页面视口上最大的图片或者文本块渲染的时间。
  • TTI-反映从页面加载开始到页面处于完全可交互状态所花费的时间。
  • Speed Index-页面内容可见填充的速度。
  • TBT-测量首次内容绘制 (FCP)首次内容绘制和 (TTI)之间的总时间,这期间,主线程被阻塞的时间过长,无法作出输入响应。
  • LCP-最大内容绘制,用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间点。
  • CLS-反映网页布局在加载期间的偏移量。得分范围是 0–1,其中 0 表示没有偏移,1 表示最大偏移。
(2)结合实际分析

对指标进行分析

以核心指标CLS为例,不属于良好,评分在0.109,被标记成了黄色,是可以进行优化的,那么如何优化CLS指标呢,可以在官网看到,影响CLS的指标有以下几点

  • 无尺寸的图像以及加载问题
  • 无尺寸的广告
  • 嵌入和 iframe
  • 动态注入的内容,导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体
  • 在更新 DOM 之前等待网络响应的操作

对页面分析

再结合页面分析,可以从以下两点尝试一下

  • 对于图片进行一些优化,比如固定大小,以及懒加载,解决对应问题1。
  • 对于没有出现在可视屏幕的组件进行懒加载,解决对应问题4。
(3)具体操作
  • 图片标签固定大小,把宽高写上
  • 增加图片标签的v-lazy属性,进行懒加载
  • 未在可视区域出现的的四个tab标签用 包裹起来,等待时机进行加载
image
image
image
image

4. 效果呈现

部署到测试环境之后,我们实打实的看到,表现由原来的45分升到了48分,而CLS这个指标也由原来的0.109到了良好的水平0.068,达到了优化CLS的目的。

image
image

==核心 Web 指标和阈值==

1. 大概介绍

2020 年的核心 Web 指标为三大指标,每项指标测量用户体验的不同方面,分别是:Largest Contentful Paint 最大内容绘制 (LCP)、First Input Delay 首次输入延迟 (FID) 和 Cumulative Layout Shift 累积布局偏移 (CLS)。但是这个核心指标不是一成不变的,指标的构成指标会随着时间的推移而发展。那接下来会将详细介绍一下这三个指标的具体含义,会简单介绍一下指标阈值,具体的分析会在第二点详细说明。

(1)Largest Contentful Paint (LCP)
  • 含义:最大内容绘制,测量加载性能,并在页面的主要内容基本加载完成时,在页面加载时间轴中标记出相应的点,LCP 表示用户等待页面出现在视觉中,需要等待的时间,即为最大内容绘制。
  • 指标:如果大约有75%的用户在首次打开页面,记载时间在2.5s内,表现就是良好的。
(2)First Input Delay (FID)
  • 含义:测量响应度,举个例子来说,用户点击按钮去搜索或者请求接口,或者是跳转,等等这些交互,用户从点击到进行下一步所花费等待的时间,即为FID所测量的首次输入延迟。
  • 指标:如果大约有75%的用户在延迟的表现上,满足100ms以内,那么它的 FID就是 "良好"的阈值。
(3)Cumulative Layout Shift (CLS)
  • 含义:测量测量视觉稳定性,测量的是整个页面生命周期内发生的所有单次布局偏移分数的总和。
  • 指标:如果大约有75%的用户在延迟的表现上,满足CLS 阈值在0.1以内则是良好,0.25 是可接受的"欠佳"阈值。

2. 相关阈值介绍

(1)大概介绍

其实在官方文档中有详细的科学依据跟标准来选取的,我们取75%的这个值来作为一个分界线的原因,是因为首先,该百分位数应确保对页面或网站的大多数访问都达到了目标性能水平。其次,所选百分位数的值不应受到异常值的过度影响,所以敲定75%是一个检测的分界线。

image
image
image
image

来翻译一下上述两张图表的含义,为了对页面或网站的整体性能进行分类,我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说,如果一个网站有至少 75% 的页面浏览量达到"良好"阈值,则该网站在这项指标下就会被归类为性能"良好"。相反,如果有至少 25% 的页面浏览量达到"欠佳"阈值,则该网站会被归类为性能"欠佳"。因此,如果 LCP 的第 75 个百分位数为 2 秒,就会被归类为"良好",而如果 LCP 的第 75 个百分位数为 5 秒,则会被归类为"欠佳"。

(2)LCP阈值

利用 CrUX 的数据,我们可以确定网络上满足 LCP 候选"良好"阈值的域所占的百分比,对于最大内容绘制来说,2.5 秒是一个合理的"良好"阈值,4 秒是一个合理的"欠佳"阈值。

image
image
(3)FID阈值

利用 CrUX 的数据,我们确定网络上的大多数域在第 75 个百分位数满足 FID 的 100 毫秒"良好"阈值。

image
image
(4)CLS阈值

利用 CrUX 的数据,在阈值为 0.25 的情况下,大约 20% 的手机端域和 18% 的桌面端域将被归类为欠佳。这些百分比落在我们 10-30% 的目标范围内,因此我们得出结论,0.25 是可接受的"欠佳"阈值。

image
image

检测工具介绍

1. Web 指标 Chrome 扩展程序

Web 指标 Chrome扩展程序扩展程序扩展程序对给定页面的核心 Web 指标(LCP 最大内容绘制、FID 和 CLS)进行测量和报告。该工具旨在为开发者进行代码更改时提供实时性能反馈。

2. 灯塔

灯塔对 LCP、CLS 和 TBT 进行报告,并突出显示合适的性能改进。灯塔在 Chrome 开发者工具中既可以作为 Chrome 扩展程序运行,也可以作为 npm 包运行。灯塔还可以通过灯塔 CI灯塔 CI灯塔 CI整合到持续集成工作流程中。

3. WebPageTest 网页性能测试工具

WebPageTest将 Web 指标作为其标准报告的一部分。 WebPageTest 可用于在特定设备和网络条件下收集 Web 指标的相关信息。

==跟Sentry进行性能比较==

家服这边新接入了Sentry这个平台,主要这个平台做了两个事情,一个是抓取页面中的报错信息,一个是统计页面相关的性能参数,而Sentry用到的性能参数可以通过截图看到,就是chrome底层的几个核心指标。所以以后大家在开发过程中,可以用chrome里面的【灯塔】进行查看,比较方便直观的统计,但是也可以通过Sentry平台来进行查看,来对比多个页面性能参数。

image
image

==如何针对指标优化页面==

1. LCP

(1)引起延迟原因
  • 缓慢的服务器响应速度
  • 阻塞渲染的 JavaScript 和 CSS
  • 缓慢的资源加载速度
  • 客户端渲染
(2)优化措施

您首先需要做的是改进服务器处理内容的方式和位置。请使用Time to First Byte首字节时间( TTFB) 来测量您的服务器响应时间。您可以通过多种不同的方式来改进您的TTFB。

  • 将用户路由到附近的 CDN
  • 缓存资产
  • 优先使用缓存提供 HTML 页面
  • 尽早建立第三方连接
  • 使用签名交换
(3) 参考文档:如何优化LCP[1]

2. FID

(1)引起延迟原因

主要是由繁重的 JavaScript 执行导致的,数据获取会影响交互,第一方脚本执行会延迟交互,第三方脚本执行也会加剧交互延迟

  • 数据获取会影响交互
  • 第一方脚本执行会延迟交互
  • 第三方脚本执行会加剧交互延迟
(2)优化措施
  • 分割长任务
  • 优化您的页面,做好交互准备
  • 使用 Web Worker
  • 减少 JavaScript 执行时间

3. CLS

(1)引起延迟原因
  • 无尺寸的图像
  • 无尺寸的广告、嵌入和 iframe
  • 动态注入的内容
  • 导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体
  • 在更新 DOM 之前等待网络响应的操作
(2)优化措施
  • 现代浏览器目前会根据图像的宽度和高度属性设置图像的默认长宽比,因此,通过设置这些属性来防止布局偏移是非常有价值的。感谢 CSS 工作组的努力,开发者只需要照常设置width和height即可
  • 为广告位静态预留空间,避免在可视区域顶部附近放置广告
  • iframe:通过使用您的浏览器开发者工具对其进行检查来获取最终嵌入的高度;嵌入加载后,所包含的 iframe 将根据其内容调整到合适大小。
  • 在一个固定尺寸的容器中用新内容替换旧内容,或者使用轮播,在过渡后删除旧内容。请记得在过渡完成之前禁用任何链接和控件,防止在新内容进入时发生意外点击或触摸。
  • 让用户主动加载新内容,这样他们就不会对偏移(例如出现"加载更多"或"刷新"按钮)感到惊讶。我们建议在用户交互前预取内容,以便立即进行显示。这里需要提醒一下,在用户输入后 500 毫秒内发生的布局偏移不计入 CLS。
  • 无缝加载屏幕外的内容,并向用户叠加一个通知,说明内容已经可用(例如,显示一个 "向上滚动 "按钮)
  • 倾向于选择transform动画,而不是触发布局偏移的属性动画。
(3) 参考文档:如何优化CLS[2]

==小结==

有优化需求的小伙伴,可以深入学习一下Web Vitals,篇幅也比较有限,重点介绍了里面的三个指标,还有其他的辅助指标可以进行分析优化的。

在未来几年,预计还会对标准和阈值进行改进和添加,从而进一步提高我们测量卓越的网络用户体验的能力。


LBG开源项目推广:

还在手写 HTML 和 CSS 吗?
还在写布局吗?
快用 Picasso 吧,Picasso 一键生成高可用的前端代码,让你有更多的时间去沉淀和成长,欢迎Star

开源项目地址:https://github.com/wuba/Picasso
官网地址:https://picassoui.58.com

参考资料

[1]

如何优化LCP: https://web.dev/optimize-lcp/

[2]

如何优化CLS: https://web.dev/optimize-cls/

分类:

移动端开发

标签:

移动端开发

作者介绍

sunilwang
V1