前端性能优化：Core Web Vitals 全面提升指南

# 前端性能优化：Core Web Vitals 全面提升指南 ## 核心指标 | 指标 | 含义 | 目标值 | |------|------|--------| | LCP | 最大内容绘制 | ``` ### 关键资源预加载 ```html ``` ## 二、FID / INP 优化 ### 代码分割 ```javascript // React.lazy + Suspense const HeavyChart = React.lazy(() => import('./HeavyChart')); function Dashboard() { return ( }> ); } ``` ### 长任务拆分 ```javascript // 使用 scheduler API 拆分长任务 async function processLargeList(items) { const CHUNK_SIZE = 50; for (let i = 0; i setTimeout(resolve, 0)); } } ``` ## 三、CLS 优化 ### 图片/视频预留空间 ```css .hero-image { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; } ``` ### 字体加载策略 ```css @font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'); font-display: optional; /* 避免字体闪烁 */ } ``` ### 动态内容预留高度 ```css .ad-slot { min-height: 250px; /* 广告位预留高度 */ contain: layout; /* 限制布局影响范围 */ } ``` ## 测量工具 1. Chrome DevTools > Performance 面板 2. Lighthouse CI 集成到 PR 流程 3. `web-vitals` 库上报真实用户数据 ```javascript import { onLCP, onINP, onCLS } from 'web-vitals'; onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics); ```