APP推广合作
联系“鸟哥笔记小乔”
Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标
2021-03-18 09:00:00

点击 "TCC翻译情报局关注,回复 "社群" 加入我们

本文共 5077 字,预计阅读 13 分钟

TCC 情报局的 第 28 篇 干货分享

2021 年的 第 16 篇



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


Nathan Dumlao 摄影作品(发表于 Unsplash)

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

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

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


Core Web Vitals 与 Web Vitals

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 的子集,是其最重要的核心)
Core Web Vitals 与 Web Vitals

  1. 加载性能(LCP) -- 显示最大内容元素所需时间
  2. 交互性(FID) -- 首次输入延迟时间
  3. 视觉稳定性(CLS) -- 累积布局配置偏移

这三个指标已经经过了一段时间的验证,如 LCP 在 WICG 已经孵化至少 1 年以上,FID 在 Google Chrome Labs 上已经实施 2 年以上,LCP 和 CLS(相关 Layout Instability API)已于今年入 W3C 草拟标准。

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

LCP -- 最大内容绘制

加载性能


LCP 的基准时间

LCP(Largest Contentful Paint)用于衡量加载体验,从真实用户的角度衡量网页的加载速度。它是 从页面刚开始加载到呈现出所有内容时的持续时间

“换句话说,LCP 是度量网页上可见区域加载时间的方法”

让我们比较一下有图像和没有图像的媒体文章的 LCP。

LCP 对比

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

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

FID -- 首次输入延迟

交互行为


FID 的基准时间

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

为什么要取在 TTI[2] 发生的第一次的操作事件,Google 给的理由有以下三点:
  • 使用者的第一次互动体验印象相当重要;
  • 当今网页最大的互动性问题通常发生在一开始载入时;
  • 页面载入完后的第二次操作事件延迟,有其他专门的改善解决建议。
([2]互动时间 TTI 是衡量负载响应能力的重要实验室指标。它有助于确定页面看起来是交互式但实际上不是交互式的情况。快速的TTI有助于确保页面可用。TTI 度量标准衡量的是从页面开始加载到页面主要子资源加载之间的时间,它能够快速可靠地响应用户输入。)

“根据 Google 的基准测试,交互的最佳持续时间应该在 100ms 以下,而任何超过 300ms 的时间都被认为是较差的。”

人们可能会说这些时间间隔很小,调整几百毫秒也没什么区别。但实际上,这些微小的变化可能会对最终用户产生重大影响。

CLS -- 累计布局偏移

视觉稳定性


CLS 的基准时间

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

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

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

视觉稳定性测量

在上面的例子中,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


如上图的实例,影响范围(红**域)占比总窗口 75% ,箭头(紫色)移动占总窗口高度的 25%,故 0.75 x 0.25 = 0.1875。

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

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

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

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

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


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

Measuring Web Vitals is Way Easier Than You Think

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

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

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

实验室测试工具

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

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

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

使用 Lighthouse 测量 Core Web Vitals

现场测试工具

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

PageSpeed InsightsChrome UX ReportWeb Vitals Extension 是一些现场测试工具,我们可以使用这些工具在真实用户交互时测量 Core Web Vitals。这些现场测试工具匿名地从网页上收集实时数据,使我们无需手动运行任何操作即可检查 Vitals。

使用 Lighthouse 测量 Core Web Vitals

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


改善 Web Vitals 的步骤

Steps to Improve Web Vitals

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

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

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

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

  • 避免不必要的第三方 JavaScript 库。下面的分析表明,使用第三方库已将主线程阻塞 2700 毫秒;
Lighthouse 分析结果

  • 设置延迟加载和延迟加载图像;
  • 减少服务器响应时间。

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

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

Lighthouse 分析结果

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

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


结论

Conclusion

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

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


原文:https://blog.bitsrc.io/web-vitals-from-google-to-measure-user-experience-8bf9d33bddbe
作者:Chameera Dulanga
译者:张宇旸
审核:徐曼鹭、张聿彤
播客:张聿彤
剪辑:徐朝安
编辑:王娅
本文翻译已获得作者的正式授权(授权截图如下)


往期精选文章:

如何做好用户体验项目?从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求:回归本质,打磨信息架构

关于协作,国外设计大神是这么的思考的

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

TCC 视野|2021 年用户体验设计趋势分析

设计新趋势「玻璃拟态」到底是什么?如何制作实现该效果?

Figma vs. Adobe XD:下一代设计工具,何必是Sketch




- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~
添加小助手微信,备注「社群」,即可加入读者群。
TCC翻译情报局
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
TCC翻译情报局
TCC翻译情报局
发表文章92
连接知识,了解全球精选设计干货
确认要消耗 羽毛购买
Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接