性能指标
性能指标
- 重要网站web.dev
- 三大核心指标(LCP、INP、CLS)
- 主要关注LCP、INP、CLS三大核心指标，同时也会看FCP、TTI、TBT来判断首屏速度、交互流畅度和页面稳定性，用Lighthouse和Perfirmance面板做分析与优化
1. 加载性能
LCP(Largest Contentful Paint)最大内容绘制
- 最大内容绘制，视口内可见的最大图片、文本块或视频的渲染时间
- 是一项稳定且重要的指标，首屏主要内容渲染时间，即加载速度
- 优化对象：图片加载速度、服务器响应时间、渲染阻塞资源
- 目标：<=2.5s优秀，》3s差
FCP(First Contentful Paint)首次内容绘制
- 首屏渲染内容(fCP)衡量从用户首次导航到网页任何一部分内容呈现在屏幕上的时间。对于指标，内容是指文本、图片(包括背景图片)、元素或非白色元素
- 浏览器首次渲染任何文本、图片时间
目标：<=1.8s
2. 交互性能
INP(Interaction to Next Paint)与下一次绘制的交互
- 2024.3其替代FID(First Input Delay)
- 页面交互响应速度
- 用户与页面进行交互(点击、按键)到页面响应并完成绘制下一帧的总延迟
- 优化对象：长任务拆分、JavaScript主线程阻塞
- 目标：<=200ms
3. 视觉稳定性
CLS(Cumulative Layout Shift)累计布局偏移
- 用于衡量在网页内容在加载过程中发生偏移的分数
- 页面稳定性，是否乱跳
- 优化对象：为图片/广告预留尺寸、动态注入内容
- 目标：<=0.1s
4. 其他关键指标(FCP、TTI、TBT、FP)
TTI(Time to Interactive)可交互时间
- 网页资源加载完成，且能够快速可靠的响应用户输入的时间
- 目标： >5s
FP(FIrst Paint)首次绘制
