core-web-vitals

# 核心网页指标 (Core Web Vitals) 优化 针对影响 Google 搜索排名和用户体验的三项核心网页指标进行定向优化。 ## 三项指标 | 指标 | 衡量维度 | 良好 | 需要改进 | 差 | |--------|----------|------|------------|------| | **LCP** | 加载性能 | ≤ 2.5s | 2.5s – 4s | > 4s | | **INP** | 交互性 | ≤ 200ms | 200ms – 500ms | > 500ms | | **CLS** | 视觉稳定性 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | Google 采用 **第 75 百分位** 进行衡量——即 75% 的页面访问必须达到“良好”阈值。 --- ## LCP: 最大内容渲染 (Largest Contentful Paint) LCP 衡量最大可见内容元素的渲染时间。通常是： - 首屏图片或视频 - 大块文本 - 背景图片 - `` 元素 ### 常见 LCP 问题 **1. 服务器响应缓慢 (TTFB > 800ms)** 修复：使用 CDN、缓存、优化后端、边缘渲染 **2. 渲染阻塞资源** html /* 关键首屏 CSS */ **3. 资源加载缓慢** html **4. 客户端渲染延迟** javascript // ❌ 内容在 JavaScript 加载后才显示 useEffect(() => { fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []); // ✅ 服务端或静态渲染 // 使用 SSR, SSG 或流式传输发送包含内容的 HTML export async function getServerSideProps() { const heroText = await fetchHeroText(); return { props: { heroText } }; } ### LCP 优化清单 markdown - [ ] TTFB < 800ms (使用 CDN, 边缘缓存) - [ ] LCP 图片使用 fetchpriority="high" 预加载 - [ ] LCP 图片已优化 (WebP/AVIF, 尺寸正确) - [ ] 关键 CSS 已内联 (< 14KB) - [ ] 中无渲染阻塞 JavaScript - [ ] 字体不阻塞文本渲染 (font-display: swap) - [ ] LCP 元素在初始 HTML 中 (非 JS 渲染) ### LCP 元素识别 javascript // 查找你的 LCP 元素 new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP element:', lastEntry.element); c