首屏加载优化：白屏时间从 5 秒到 1 秒的实操记录

测量：先知道慢在哪

打开 Chrome DevTools → Network 面板 → 禁用缓存 → 刷新页面。看三样东西：Waterfall 的第一行（HTML 文档的 TTFB）、最大的三个资源（按 size 排序）、总加载时间。再跑一次 Lighthouse（移动模式），记下 FCP/LCP 两个指标——这就是你的优化前基线。

实测发现的三个问题

问题一：Hero 图 2.8MB——用的高清原图没压缩。修复：转 WebP + 分辨率降到显示尺寸的 2 倍以内 → 体积 2.8MB → 380KB。

问题二：同步加载的分析脚本——统计脚本阻塞了首屏渲染。修复：next/script 的懒加载策略（交互后才加载）。

问题三：无缓存头——重复访问每次都全量下载。修复：nginx 配置静态资源长缓存（immutable）+ HTML 短缓存。

修复后的数据对比

指标	优化前	优化后
首屏（FCP）	4.2s	1.1s
最大元素（LCP）	5.6s	1.8s
页面总重量	6.4MB	1.9MB

三条修复各花不到半小时——性能优化的性价比经常被低估：不修的话每天都在流失访客，修了是一次性的半小时。

排查流程的通用版

这套"测量 → 修复 → 复测"的流程适用于任何站点，完整链路见性能排查。静态导出站的先天优势（HTML 直出、无数据库等待）意味着你只需要管好"资源层"——图片、脚本、缓存三件事。