FCP 超过 2 秒直接影响用户留存，核心优化手段在于降低 TTFB 和消除首屏渲染阻塞。针对大多数项目，优先检查服务器缓存配置、关键 CSS 内联以及首屏图片加载策略。
核心结论：FCP 超标通常由网络传输延迟或渲染阻塞引起，需按“测量 - 减负 - 提速”顺序处理。
- 定位：使用 PageSpeed Insights 识别阻塞资源，重点关注 TTFB 是否超过 600ms
- 执行：优先配置服务器缓存、内联 Critical CSS、JS 添加 defer 属性
- 验证：在 Chrome DevTools 弱网模拟下确认 FCP 数值变化
定位性能瓶颈
不要盲目优化，先通过工具确定耗时环节。打开 Chrome 无痕模式，按 F12 进入 DevTools，选择 Network 面板，勾选 Disable cache 刷新页面。
- TTFB 过高：如果 Time to First Byte 超过 600ms，问题主要在服务器响应或网络链路。
- 资源阻塞：查看 Waterfall 图，检查是否有 CSS 或 JS 在 DOMContentLoaded 前加载完毕。
同时运行 Lighthouse 审计，查看“机会”列表中的“消除渲染阻塞资源”建议项。
服务器响应与缓存配置
降低 TTFB 最直接的方法是启用缓存和压缩。对于 Nginx 服务器，建议在配置文件中明确静态资源的缓存策略：
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {expires 30d;add_header Cache-Control "public, max-age=2592000";add_header Vary "Accept-Encoding";
}同时启用 Gzip 或 Brotli 压缩，减少传输体积。若使用 CDN，确保边缘节点缓存命中率正常。
消除渲染阻塞资源
浏览器遇到外部 CSS 或 JS 会暂停渲染。优化策略如下：
1. JS 异步加载
非关键 JS 文件添加 defer 属性，确保不阻塞 HTML 解析：
<script defer src="/static/js/app.js"></script>注意：async 适合独立脚本，defer 适合有依赖顺序的脚本。
2. 关键 CSS 内联
提取首屏 Critical CSS 直接放入 <head>，其余 CSS 异步加载。可使用自动化工具处理：
npm install critical `--save-dev`构建命令示例：
critical generate `--base` dist `--src` index.html `--dest` critical.css框架特定优化建议
不同前端框架有特定的 FCP 优化手段：
- React：避免在客户端渲染大量内容，建议使用 Next.js 等支持 SSR 的框架。移除未使用的 polyfills，检查
react-dom版本是否过大。 - Vue：使用 Nuxt.js 开启服务端渲染。利用异步组件拆分路由：
const Foo = () => import('./Foo.vue')，减少首屏包体积。
图片与字体优化
首屏图片（尤其是 LCP 元素）严禁使用懒加载（lazy loading），否则浏览器会等待加载完成才绘制。确保首屏图片使用现代格式（WebP/AVIF）并压缩尺寸。
自定义字体可能导致 FOIT（invisible text），建议添加 font-display: swap：
@font-face {font-family: 'MyFont';src: url('myfont.woff2') format('woff2');font-display: swap;
}验证与常见陷阱
优化后需再次运行 Lighthouse 审计，并在 DevTools Performance 面板录制加载过程，确认 First Paint 时间点是否提前。测试时务必开启弱网模拟（如 Fast 3G）。
常见坑：
- 首屏图片误加
loading="lazy"，导致 FCP 推迟。 - Critical CSS 提取过多，导致 HTML 体积激增，抵消优化效果。
- 忽略字体加载阻塞，文本内容虽已下载但不可见。
原文链接：https://www.zjcp.cc/ask/11021.html