用户对“首屏感知”极其敏感。系统性优化从网络、渲染、交互三个层面同时推进，指标用数据说话：TTFB、FCP、LCP、FID、CLS。

关键指标速览

• TTFB：首字节到达时间（后端/网络）；
• FCP：首次内容绘制；
• LCP：最大内容绘制（核心）；
• FID/INP：首次输入延迟/交互性；
• CLS：累积位移（稳定性）。

网络阶段（TTFB）

• CDN：主域静态资源上 CDN，按区域就近；

图1：CDN分布式架构对比（左：单一服务器；右：多节点CDN架构）

• 连接复用：HTTP/2、TLS1.3、0-RTT；

图2：HTTP/2通过二进制分帧实现多路复用，相比HTTP/1.1显著减少连接开销

• 预连接与预获取：preconnect/dns-prefetch/prefetch/preload；
• 边缘渲染或边缘缓存 HTML，降低源站 RTT。

渲染阶段（FCP/LCP）

• 关键路径：关键 CSS 内联，延后非关键 CSS/JS；

图3：HTML中内联关键CSS的实现方式，减少渲染阻塞

• 图片：选择合适尺寸与格式（WebP/AVIF），LCP 媒体预加载；

图4：相同图片在WebP（1.1MB）与JPEG（3MB）格式下的文件大小对比

• SSR/SSG：缩短到可视内容出现的距离；
• 组件分片：路由级 + 组件级懒加载。

交互阶段（FID/INP）

• 主线程预算：减少大包与长任务（>50ms）；（注：未找到主线程长任务优化相关图片，建议通过代码分割、任务切片等方式控制单个任务执行时间）
• 使用 requestIdleCallback、scheduler.yield 切片任务；
• Web Worker 搬运重计算；

图5：Web Worker将复杂计算移出主线程，避免阻塞UI渲染

• 去抖与节流，避免级联重渲染。

稳定性（CLS）

• 为图片/广告/异步内容预留尺寸；
• 动态插入 content 放在视口下方或动画过渡；
• 字体加载策略：font-display: swap。

构建与交付

• code splitting + 按需加载；

图6：通过Webpack实现路由级代码分割的流程示意

• Tree Shaking、压缩、去除未用 polyfill；
• 资源指纹与长缓存，变更命中率控制；
• RUM 上报 + Lighthouse CI 持续监控。

快速排查清单

1. 看 LCP 元素是什么（图像/文本），是否被阻塞；
2. 找 50ms+ 长任务，分片或移出主线程；
3. 识别大资源与阻塞资源，懒加载或预加载；
4. 路由级骨架屏/占位 + 渐进数据加载。

“看指标、调关键路径、控主线程”这三步到位，首屏就会肉眼变快。