赞助商
立即赞助

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

产品设计3年前 (2021)发布 流光
2.1K 0 0

Google 开发了许多实用指标和工具,帮助衡量用户体验和质量,从而发掘优化点。一项名为 Web Vitals 的计划降低了学习成本,为网站体验提供了一组统一的质量衡量指标 — Core Web Vitals,其中包括加载体验、交互性和页面内容的视觉稳定性,构成了 2020 年核心 Web 健康指标的基础。本文详细的介绍了每个指标及其使用方式,推荐了用于测量这些指标的实用工具,快来一起看看吧~

有很多方法可以优化网站的用户体验。若能预先了解最佳的优化衡量方法,可以大大节省时间和成本。

Google 在 2020 年 5 月 5 日提出了新的用户体验量化方式 Web Vitals 来衡量网站的用户体验,并将这些衡量结果用作其排名算法的一部分。为了更好的理解这些内容,让我们来看看这些重要指标是什么。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ Google 在使用者体验量化发展的相关成果

Core Web Vitals 与 Web Vitals

什么是 Web Vitals,Google 给出的定义是 一个良好网站的基本指标(Essential metrics for a healthy site),过去要衡量一个网站的好坏,需要使用的指标太多了,Web Vitals 可以简化指标的学习曲线,只需聚焦于 Web Vitals 指标的表现即可。

“你不需要成为任何领域的专家就可以了解 Web Vitals。它们很简单,比如移动友好性、浏览安全性、HTTPS、交互性、视觉稳定性、加载时间等。”

在这些 Web Vitals 中,Google 确定了三个主要衡量指标,即在所有类型的网站中通用的 Core Web Vitals[1]:

[1]Core Web Vitals 应 Web 页 Web Vitals ,核。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ Core Web Vitals  Web Vitals

  • 加载性能(LCP) — 显示最大内容元素所需时间
  • 互(FID) — 首输延迟
  • 视觉稳定性(CLS) — 累积布局配置偏移

指标已验证, LCP  WICG 已孵至 1 ,FID  Google Chrome Labs 已施 2 ,LCP  CLS(相 Layout Instability API)已今 W3C 草拟标准。

让我们一起详细了解下 Core Web Vitals。

LCP — 最大内容绘制

1. 载

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ LCP 的基准时间

LCP(Largest Contentful Paint)衡载验,从户衡页载速。它 从页始载呈持续。

“换句,LCP 页见域载法”

图图媒章 LCP。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ LCP 

有图片的文章用了 3.57 秒加载,而没有图片的文章只用了 2.32 秒载入。

“谷歌坚称,所有开发者和产品所有者都会定期测量其应用程序的 Core Web Vitals,并提供工具来辅助测量。”

FID — 首次输入延迟

1. 交互行为

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ FID 的基准时间

FID(First Input Delay)涉及到用户与 web 页面之间的交互性,用于衡量网站操作的顺畅程度。它测量了用户第一次产生交互行为,到浏览器响应该用户操作的持续时间。这些用户交互行为可以是单击按钮、点击链接或任何基于 JavaScript 的自定义控件。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

在 TTI 的时间内第一个互动事件的开始时间与浏览器回应事件的时间差

取 TTI[2] 操件,Google 由:

  • 使用者的第一次互动体验印象相当重要;
  • 今页互问题始载;
  • 页面载入完后的第二次操作事件延迟,有其他专门的改善解决建议。

[2]互 TTI 衡负载响应验指标。它确页互互况。速 TTI 确页。TTI 标准衡从页始载页资载,它够速靠响应户输。

“根据 Google 基准测,互持续应该 100ms ,任何 300ms 被认。”

隔,毫秒。,变终户响。

CLS — 累计布局偏移

1. 视觉稳定性

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ CLS 的基准时间

你可能已经注意到某些时候网页中的元素在加载时出现移动,我敢肯定这不是用户期待的优秀体验。在这样的场景中,CLS(Cumulative Layout Shift)测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和,可以方便地用来度量 web 页面的视觉表现。布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。为了提供良好的用户体验,网站应努力使 CLS 分数小于 0.1.

“CLS 显示页面加载时组件移动的次数。正如大家所理解的,CLS 需要尽可能少地次数来实现良好的用户体验。”

下图显示了 medium.com 和视觉不稳定网站之间的 CLS 差异。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ 视觉稳定性测量

例,medium.com 显示 CLS  0.097。

“ medium.com 载页移 0.097 ?→ !!”

此考虑视及渲染帧视稳素移。

偏移系数(Layout Shift Score) = 响范围系数(Impact Fraction) x 移距离系数(Distance Fraction)

CLS (偏移系数)使述轻。此响系数指稳素视响,距离系数指稳素移距离。

例如,假设一个不稳定的元素覆盖了总窗口大小的 40%,当页面加载时它向下移动了 20%。在这种情况下,因为不稳定元素占用了总窗口的 60%,影响系数将为 0.6。又由于不稳定元素向下移动了 20%,因此距离系数将为 0.2。

因此,最终布局偏移系数 = 0.6 x 0.2 = 0.12

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

图例,响范围(域)占 75% ,箭()移占 25%,故 0.75 x 0.25 = 0.1875。

提示:使用 Bit(于 Github 里)可在项目之间共享可复用组件。

Bit 使得在项目之间共享、记录和复用独立组件变得简单。使用它可以最大限度地复用代码,能够保持设计一致、帮助团队协作、加快交付并构建可扩展的应用程序。

Bit 支持 Node,TypeScript,React,Vue,Angular 等。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ 示例:探索在 Bit.dev 上共享的可复用的 React 组件

我觉得现在你应该已经很好地理解了 Core Web Vitals 和它们的职责。所以,现在是时候学习如何测量了。

测量 Web Vitals 比你想象的要容易得多

正如我开始提到的,测量 Web Vitals 是一个简单的过程,任何人都可以做到。实际有很多工具可以用来测量 Web 的重要信息,包括一些浏览器插件。

“Lighthouse、Chrome DevTools、PageSpeed Insights、Chrome UX Report 和 Web Vitals Extension 位列榜首。”

虽然这些工具的用途相同,但可以进一步分为实验室测试工具和现场测试工具两类。

1. 实验室测试工具

实验室测试工具的主要目的是在开发过程中测试性能,以确保在发布之前达到所需的标准。ChromeDevTools 和 Lighthouse 可用于在开发环境中测量 Core Web Vitals。

“但是这些实验室测试工具无法测量 FID,因为没有用户来计算其交互性。但是,这些工具使用了一种称为 Total Blocking Time(TBT)的等效测量方法。”

下图显示了使用 Lighthouse 的网页的性能测试结果:

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ 使用 Lighthouse 测量 Core Web Vitals

2. 现场测试工具

实验室测试工具的结果不是 100% 准确的,因为没有真正的用户试用网页。现场测试工具可以用来填补这个漏洞。此外,与实验室测试工具不同的是,现场测试工具可以按原样测量所有 3 个 Core Web Vitals。

PageSpeed Insights、Chrome UX Report  Web Vitals Extension 测,使户互测 Core Web Vitals。测匿从页收数据,使需任何操即检查 Vitals。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ 使 Lighthouse 测 Core Web Vitals

让我们假设你已经测量了网站的 Core web Vitals,而结果并不符合预期。那么,做什么能提高这些分数呢?

改善 Web Vitals 的步骤

既然你现在知道如何测量 Web Vitals,那么让我们看看如果存在问题,如何改进你的网站。

众所周知,对于性能相关问题的技术修复并不是那么简单。大多数时候它们非常复杂耗时。但是,可以遵循一些通用的指导方法来改进这些 Core Web Vitals。

可以通过以下方式改进网站的 LCP:

删除或避免使用消耗太多时间加载的大型页面元素。通过分析前面讨论的测量工具结果,可以很容易地发现这些元素及其影响;

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ Lighthouse 分析结果

避免必 JavaScript 库。析表,使库已将程阻塞 2700 毫秒;

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ Lighthouse 析结

设置延迟加载和延迟加载图像;

减少服务器响应时间。

与 LCP 类似,可以遵循以下几点来提高网站的 FID 值:

  • 使用高效的缓存策略更快地加载页面内容;
  • 与 LCP 类似,可以通过提交不必要的 JavaScript 库来增强 FID 值;
  • 最小化将提高页面加载时间,用户将能够立即与页面交互。

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

△ Lighthouse 分析结果

Core Web Vitals 最终测量的是 CLS,可以通过以下方式提高 CLS 分数:

  • 对图像和视频使用固定尺寸;
  • 如果网站存在广告显示,一定要为他们留下必要的空间。

结论

我希望你们已经明白了维护优秀网站的重要性。这些测量方法为保持网站的用户体验友好性提供了有力支持。

尽管这些测量方法非常有前途,但在某些情况下,也需要临时修改这些测量方法来确保良好的用户体验。所以请保持注意。

欢迎关注作者微信公众号:「TCC翻译情报局」

谷歌的新一代 Web 性能体验和质量指标:Web Vitals

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:用户研究的方法有很多,选择适合自己的方法的前提条件是你得了解各种方法的优劣。今天Adam Fard的文章就帮你列举出最...
Adam Fard
过去的2018年里,iPhone 的产品线变得混乱,自动驾驶汽车变得无聊,美军从微软采购的 Hololens 也没有发生真正飞跃性的改变,...
交互设计
设计师对于世界的影响是否是巨大的?这一点是毋庸置疑的。但是即便是优秀的设计,也通过大量的日常积累,一个又一个小步骤上...
Eugen Eşanu
「如此操作,你就能得到这样的结果。」在游戏当中,这种简单的逻辑并不一定总是最佳的方法。为什么这么说呢?如果外部奖励,...
Eugen Eşanu
小贴士:下沉市场:三线以下城市、县镇与农村地区的市场 先来了解一个背景:为啥近几年下沉市场这么火,家家户户都在努力争...
下沉市场
最近从之前的项目出来做国际版,和之前项目的设计负责同学唠嗑,最多的感慨是有关“背锅”的问题。 啥锅呢? 估计不少铁汁也...
交互设计
前段时间,微软收购tiktok消息甚嚣尘上。微软、苹果和谷歌作为硅谷三巨头,我们对于苹果的iOS和谷歌的MD设计更加熟悉,之前我...
交互设计
谈到我们生活中的那些产品和服务,它们常伴于我们左右,影响着我们的生活,与我们处处相关联,同样的这些产品也会影响我们的...
App设计