Skip to content - FCP(First Contentful Paint)白屏时间(渲染第一段 dom 所用的时间),值越低越好;【fast:0~1.8s】【主要解决方案:提高字体加载速度、使用 cdn、服务端缓存、dns 解析】
- LCP(Largest Contentful Paint)可视窗口最大内容渲染时间(图片、url 加载背景图片的元素),值越低越好;【fast:0~2.5s】【主要解决方案:减少首字节时间 (TTFB)、资源加载时间(缩减大小)】
- Time to First Byte (TTFB) 请求资源到响应的第一个字节到达的时间,值越低越好;【fast:0~0.8s】【主要解决方案:调整主机流量、服务提供商、使用 cdn、使用 sw】
- TBT(Total Blocking Time)用户行为阻塞时间(FCP 后被阻塞的时间、期间用户无法输入),值越低越好;【fast:0~0.2s】【主要解决方案:减少 js 执行时间】
- CLS(Cumulative Layout Shift)可视窗口中累计可见元素布局偏移(突然的布局意外变化),值越低越好;【量化指标:0~0.1】 https://web.dev/articles/cls 【设置长宽值、不要在已经加载的内容前面插入内容、transform 变动元素 别跳】
- SI(Speed Index)页面渲染时间,值越低越好;【fast:0~3.4s】【主要解决方案:减少 js 运行时间、减少复杂样式嵌套、避免大布局和布局回流、异步加载非必须 css】
- TTI(Time to Interactive)用户可交互时间(页面加载到页面可交互),值越低越好;【fast:0~3.8s】 https://web.dev/articles/tti 【本指标已经不常用、衡量负载响应速度、预载最重要的资源懒加载非关键资源】
- FID(First Input Delay)用户首次交互时间(用户交互到浏览器处理事件的时间),值越低越好。【fast:0~0.1s】【主要解决方案:分解长任务为模块、使用 sw、减少 js 执行时间】 ![](../assets/Pasted image 20240630172348.png)