性能文章>使用 WebPageTest 诊断和修复累积布局偏移 CLS>

使用 WebPageTest 诊断和修复累积布局偏移 CLS转载

6月前
213002

 

  • 这些是Chrome 团队创建的性能指标。
  • 2021 年 6 月中旬,Core Web Vitals 将正式成为 Google 搜索算法中的排名因素。
  • 部署将于 2021 年 8 月结束。
  • 目前,使用页面体验作为排名信号将仅适用于移动搜索。
  1. 最大内容绘制 (LCP) 测量视口中可见的最大图像或文本块的渲染时间。这是 CWV 中的性能指标。
  2. 首次输入延迟 (FID) 衡量用户首次与页面交互的时间。
    比如浏览器对用户输入的响应速度,比如点击超链接、点击添加到购物车按钮、提交表单等。这是交互指标。
  3. 累积布局偏移 (CLS) 是衡量页面呈现期间内容偏移量的分数。这是视觉稳定性指标。


布局偏移分数 = 影响分数 * 距离分数

使用 WebPageTest 诊断大篮子产品页面以修复 CLS

 

使用 4G 测试,Chrome 在三星设备上模拟。下面是不同的 Shift 窗口。表是使用胶片视图数据创建的。

 

CLS 分数 = 0.293 = 最大移位窗口的分数总和。

 

  1. 1600 毫秒的第一次换班,得分为 0.052。

 

点赞收藏
trigkit4

曾就职于RingCentral、imToken,曾负责知名以太坊区块链钱包imToken去中心化交易所web端和RN端研发,现任笨马网络资深前端工程师,广泛涉猎各种前沿的前端领域,包括:前端工程化、性能优化、PWA,web3.0等领域,敏捷开发践行者,多年的React开发经验,喜欢钻研技术,擅长分析问题,解决问题。

请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

【全网首发】抛砖系列之前端性能分析工具

【全网首发】抛砖系列之前端性能分析工具

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(3)——性能监控

从零开始搞监控系统(3)——性能监控

Sentry 错误监控实战

Sentry 错误监控实战

前端构建效率优化之路

前端构建效率优化之路

2
0
Lv1
trigkit4

徽章

曾就职于RingCentral、imToken,曾负责知名以太坊区块链钱包imToken去中心化交易所web端和RN端研发,现任笨马网络资深前端工程师,广泛涉猎各种前沿的前端领域,包括:前端工程化、性能优化、PWA,web3.0等领域,敏捷开发践行者,多年的React开发经验,喜欢钻研技术,擅长分析问题,解决问题。