Google Core Web Vitals（核心网页指标）

一、核心三大指标 (Core Web Vitals)1. LCP (Largest Contentful Paint) - 最大内容绘制含义页面中最大的可见内容如主图、大标题、视频加载完成并渲染出来的时间。它代表了用户认为“主要内容已加载”的时刻。目标 2.5 秒。如何优化优化图片格式使用 WebP/AVIF压缩图片体积。使用 CDN 加速资源加载。对关键资源如首图使用 link relpreload 预加载。提升FCP当然关键资源优先加载为前提2. INP (Interaction to Next Paint) - 交互到下一次绘制含义衡量用户与页面进行所有交互点击、按键、触摸时的响应延迟。它取代了旧的 FID首次输入延迟指标因为它更能全面反映页面的交互流畅度。目标 200 毫秒。如何优化拆分长任务避免 JavaScript 主线程长时间阻塞。类似react fiber 时间片给 js 主线程一点处理用户交互的时间避免让用户以外页面卡住了使用 Web Worker 处理复杂计算。优化事件处理函数避免在执行回调时做过多耗时操作。3. CLS (Cumulative Layout Shift) - 累积布局偏移含义衡量页面在加载过程中元素是否发生了意外的位置移动例如文字突然跳动、按钮位置改变。分数越低越好0 代表完全稳定。衡量网页在加载和使用过程中的视觉稳定性。简单来说它量化了页面元素发生意外移动如突然跳动、下移的程度目标 0.1。如何优化为图片和视频标签显式设置 width 和 height 属性这能让浏览器提前知道元素的宽高比从而预留出正确的空间。为动态内容预留空间对于广告、iframe 或异步加载的组件使用 CSS 设置一个固定的 min-height 或使用“骨架屏”占位避免内容加载时页面跳动使用 CSS transform 进行动画而不是改变 top/left 等几何属性会触发重排制作动画时优先使用 transform 和 opacity 属性。它们只触发合成Composite不会引起重排因此不会导致布局偏移。二、基础关键指标这两个指标是上述核心指标的基础直接影响首屏加载速度。1. TTFB (Time to First Byte) - 首字节时间含义浏览器发出请求到收到服务器第一个字节的时间。它反映了服务器的响应速度、网络延迟和 DNS 查询时间。目标 800 毫秒理想情况 600ms。如何优化使用服务端渲染 (SSR) 或静态站点生成 (SSG)。开启服务器缓存如 Redis和 CDN 缓存。优化数据库查询减少后端处理时间。2. FCP (First Contentful Paint) - 首次内容绘制含义浏览器渲染出第一个内容文本、图片、SVG 等非白屏的时间。它给用户“页面开始加载”的视觉反馈。目标 1.8 秒。如何优化内联关键 CSS (Critical CSS)直接绑定在 html 上的不用等待下载解析css文件移除未使用的 CSS很多项目引入了庞大的 CSS 框架如 Bootstrap, Tailwind或第三方库但实际页面可能只用了其中 10% 的类名。这些“死代码”不仅浪费带宽还增加了浏览器的解析负担。。减少 JavaScript 对主线程的阻塞使用 async 或 defer 加载脚本。优化服务器响应时间即优化 TTFB。三、其他重要性能指标1. TTI (Time to Interactive) - 可交互时间含义衡量页面从开始加载到完全具备交互能力所需的时间。它不仅要求页面内容已渲染还要求主线程足够空闲能够可靠、快速地响应用户的下一步操作。目标通常建议 5 秒为什么重要一个页面可能看起来已经加载完毕FCP/LCP 已完成但如果主线程仍被 JavaScript 长任务阻塞用户点击按钮时可能没有任何反应。TTI 就是用来衡量这种“假死”状态的时长。如何优化TTI 关注的是页面何时变得完全可交互优化核心是尽快让主线程空闲下来。代码分割与懒加载将 JavaScript 代码按路由或组件进行拆分只加载当前页面所需的代码。延迟加载非关键脚本对分析、广告等第三方脚本使用 async 或 defer或延迟到用户交互后再加载。减少主线程工作与优化 INP 类似通过拆分长任务、使用 Web Worker 等方式减少主线程的负担。