原文章链接:https://web.dev/learn-web-vitals/
【重点词汇】
1.Vitals ['vaɪt(ə)lz]:生命体征;要害 web Vitals web开发/设计的要点
2.Essential metrics:重要的衡量指标
3.unified 统一的
【翻译】
web开发要点-健壮网站的重要衡量指标
概述:web vitals提供了一些统一的网站质量衡量指标,这些指标对于提供良好的用户体验至关重要。
目录如下
一、概述
- Web Vitals 网站要点
二、关键衡量指标
- Largest Contentful Paint (LCP) 最大内容绘制,视口内可见的最大内容元素的渲染时间。用于衡量加载体验。为了提供良好的用户体验, LCP 应该在页面首次开始加载后的 2.5 秒内发生 。对应的有Fisrt paint 第一帧 / First contentful paint 第一帧有意义的画面 。
- First Input Delay (FID) 第一输入延迟,即用户首次与网站交互的时间。用户衡量可交互性,为了提供良好的用户体验,页面的 FID 应当小于 100毫秒。
- Cumulative Layout Shift (CLS) 累计布局偏移,指网页布局在加载期间的偏移量。得分范围是 0–1,其中 0 表示没有偏移,1 表示最大偏移。衡量视觉稳定性,为了提供良好的用户体验,页面的CLS应保持小于 0.1。
- Defining the Core Web Vitals metrics thresholds 定义核心web衡量指标的阈值
三、测量衡量指标
- Getting started with measuring Web Vitals 从测量web vitals开始
- Tools to measure Core Web Vitals 测量web vitals的工具
- Best practices for measuring Web Vitals in the field 在测量web vitals方面的最佳实践
四、提高衡量指标
- Optimize Largest Contentful Paint 优化LCP
- Optimize First Input Delay 优化FID
- Optimize Cumulative Layout Shift 优化CLS
下一篇正式开始。