性能优化之首屏加载

首屏加载（FCP/LCP）直接影响用户体验和 SEO，优化目标是使用户可见的核心内容尽快呈现。

核心指标

指标	含义	目标
FCP	首次内容渲染	< 1.8s
LCP	最大内容绘制	< 2.5s
TTI	可交互时间	< 3.8s

优化策略

1. 资源瘦身

• 代码分割：按路由/组件拆分，只加载首屏需要的 JS（React.lazy / dynamic import）
• Tree Shaking：移除未使用的模块导出
• 图片优化：WebP/AVIF 格式、响应式图片（srcset）、懒加载

2. 网络优化

• HTTP/2 多路复用 + 服务端推送
• CDN 分发静态资源
• 关键 CSS 内联，其余异步加载
• 资源预加载：<link rel="preload">、<link rel="prefetch">

3. 渲染优化

• SSR / SSG：服务端渲染直出 HTML，减少客户端 JS 渲染耗时
• 骨架屏：加载中占位，减少 CLS
• 避免 JS 阻塞渲染：脚本加 async/defer

4. 缓存策略

强缓存（Cache-Control） + 协商缓存（ETag） + Service Worker。