前端性能优化实战：首屏加载从 4.2 秒降到 1.1 秒
Frontend Performance Optimization: Reducing First Paint from 4.2s to 1.1s
| Lisa | 2026-08-24T10:27:18
最近花了一周时间专门优化了一下我们官网的首屏加载速度，效果还挺明显的。这里分享一下具体做了哪些事情。
Spent a week optimizing our website's first paint performance with significant results. Here's a detailed breakdown of what we did.
我们官网之前 Lighthouse 性能评分只有 42 分，首屏加载 4.2 秒，用户反馈说打开网页要等好久。上周集中花了一周时间优化，最终做到了 Lighthouse 92 分，首屏 1.1 秒。 分析阶段 先用 Chrome DevTools 的 Performance 面板录了一段加载过程，发现几个明显的问题： JS 总体积 1.8MB（gzip 后 620KB），而且全部在首屏就加载了 首屏有 3 张大图，分别是 800KB、650KB 和 420KB Web 字体文件 2.4MB（加载了完整的中文字体包） 没有做任何缓存策略，每次访问都是全量下载 优化措施 1. 代码分割 用 React.lazy + Suspense 做路由级别的代码分割，首屏只加载首页需要的代码。打包后首屏 JS 从 620KB 降到 180KB。 2. 图片优化 所有图片转 WebP 格式，配合 <picture> 标签做兼容。首屏的 3 张大图改成了渐进式加载：先加载一个 20px 的缩略图做模糊占位，然后再加载完整图片。图片总体积从 1.87MB 降到 340KB。 3. 字体优化 这个是大头。之前直接引用了 Google Fonts 的完整中文字体包，2.4MB。改成了： 用 font-spider 只打包页面实际用到的字符 标题字体 subset 后只有 180KB 正文改用系统字体栈，不加载自定义字体 4. 缓存策略 Nginx 配置了合理的缓存头： # 静态资源缓存 1 年（文件名带 hash） location ~* \.(js|css|png|jpg|webp|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } # HTML 不缓存 location ~* \.html$ { add_header Cache-Control "no-cache"; } 5. 预加载关键资源 在 HTML head 里加了 preload： <link rel="preload" href="/fonts/title.woff2" as="font" crossorigin> <link rel="preload" href="/hero-bg.webp" as="image"> 结果 优化前后对比（移动端 4G 环境）： FCP: 4.2s → 1.1s LCP: 5.8s → 1.8s CLS: 0.32 → 0.02 Lighthouse: 42 → 92 最有效的其实就是图片和字体优化，这两项就贡献了 60% 的提升。代码分割虽然减少了 JS 体积，但对感知速度的影响没那么大。
Our website's Lighthouse performance score was only 42 with a 4.2-second first contentful paint. After a focused week of optimization, we achieved a Lighthouse score of 92 and 1.1s FCP. Analysis Chrome DevTools Performance panel revealed key issues: 1.8MB total JS bundle, three large hero images totaling 1.87MB, 2.4MB Chinese web font, and no caching strategy. Optimizations 1. Code Splitting React.lazy + Suspense for route-level splitting reduced first-paint JS from 620KB to 180KB. 2. Image Optimization Converted to WebP with progressive loading - 20px blur placeholder followed by full image. Total image size dropped from 1.87MB to 340KB. 3. Font Optimization Used font-spider to subset Chinese fonts to only used characters (2.4MB → 180KB), switched body text to system font stack. 4. Caching Strategy Configured Nginx with proper cache headers: 1-year immutable cache for hashed static assets, no-cache for HTML. Results FCP: 4.2s → 1.1s, LCP: 5.8s → 1.8s, CLS: 0.32 → 0.02, Lighthouse: 42 → 92. Image and font optimization contributed 60% of the improvement.