前端性能优化实战：从 FCP 到 LCP 的高性价比改造

笨鸟先飞2025-12-032025-12-03

关键指标与目标

FCP（First Contentful Paint）：首个文本/图片出现时间。
LCP（Largest Contentful Paint）：最大内容元素出现时间，目标 < 2.5s。
CLS（Cumulative Layout Shift）：布局抖动，目标 < 0.1。
TTI/TBT：可交互与线程阻塞，脚本越轻越好。

高性价比动作

关键资源预加载：
- rel="preconnect" 预连接 CDN 域名；rel="dns-prefetch" 备用。
- rel="preload" 针对首屏的字体/英雄图。
图片优化：
- 用 WebP/AVIF；按容器尺寸生成多套图，<img srcset> 自适应。
- 懒加载：loading="lazy"；首屏大图可先占位防抖动。
字体优化：
- 减少字体变体；font-display: swap 避免 FOIT；子集化减少体积。
脚本拆分与延迟：
- 业务代码分块，首屏只加载必需 JS；type="module" + HTTP/2 并行。
- 第三方脚本延迟/懒加载（监控、广告、聊天气泡）。
CSS 关键路径：
- 提取关键 CSS 内联，非关键用 media / loadCSS 异步。
- 减少阻塞：避免 @import 链式调用。
缓存策略：
- 静态资源长 Cache + 文件指纹；HTML 短缓存或 no-cache。
服务端配合：
- Gzip/Brotli；开启 HTTP/2；CDN 边缘缓存 HTML（谨慎处理个性化）。
防 CLS：
- 为图片/广告位预留尺寸；避免动态注入造成布局跳动。

检查清单（上线前自测）

Lighthouse/Pagespeed：FCP/LCP/TBT/CLS 达标。
首屏资源 < 6 个关键请求；首屏 JS 体积可控。
图片均有尺寸或占位，懒加载非首屏。
字体子集化，具备后备字体，font-display: swap。
第三方脚本延迟加载，不阻塞渲染。
CDN 缓存命中率监控，回源压力可接受。

常见代码片段

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" as="image" href="/hero.webp">

<img
  src="/hero-800.webp"
  srcset="/hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 768px) 800px, 1200px"
  alt="Hero"
  loading="lazy"
  width="1200" height="600"
/>

<script type="module" src="/main.js"></script>
<script src="/monitor.js" defer></script>