Core Web Vitals优化实战教程

Core Web Vitals三大指标解析

Core Web Vitals（核心网页指标）是Google于2020年推出的一组标准化性能指标，用于量化真实用户的网页体验质量。目前包含三个核心指标：LCP（最大内容绘制）、INP（与下一次绘制的交互）和CLS（累积版式移位）。这三个指标已成为Google排名算法的官方信号。

LCP优化：让主内容快速显示

LCP目标：2.5秒内。LCP通常是页面上的英雄图片、视频缩略图或大段文字。优化方法：

• 对LCP图片使用fetchpriority="high"属性，告知浏览器优先加载
• 预连接到关键第三方域名：<link rel="preconnect" href="...">
• 将关键CSS内联，避免渲染阻塞
• 使用CDN缩短资源传输时间
• 优化服务器响应时间（TTFB控制在200ms内）

INP优化：提升交互响应速度

INP目标：200毫秒内。INP测量用户交互（点击、按键、触屏）到页面下次绘制的时间。优化关键是减少主线程阻塞：将长任务（>50ms的JS执行）拆分为小任务；使用Web Workers将复杂计算移到后台线程；推迟加载非必要的JavaScript。

CLS优化：避免页面内容跳动

CLS目标：低于0.1。常见导致CLS的原因：图片和视频未指定尺寸（始终为img添加width和height属性）；动态注入的广告、横幅和嵌入内容；字体加载导致的闪烁（使用font-display: optional或swap策略）。通过为所有动态内容预留空间，可以有效消除页面跳动。