首屏加载优化（FCP/LCP）的核心策略
请列举提升首屏加载性能（FCP/LCP）的核心优化策略，包括资源加载、渲染阻塞、缓存等方面。
回答
苦行僧
核心指标：
- FCP（First Contentful Paint）：第一个内容元素绘制时间
- LCP（Largest Contentful Paint）：最大可见元素完成渲染时间
- TBT（Total Blocking Time）：主线程阻塞时间
优化策略：
1. 减少关键资源数：
- 内联关键 CSS（
<style>首屏样式），非关键 CSS 延迟加载media="print"或rel="preload" - 内联关键 JS 或将脚本设为
defer/async - 代码分割：
import()动态加载非首屏模块
2. 减少关键资源大小：
- HTML/CSS/JS 压缩（Webpack TerserPlugin、CSS Minimizer）
- Tree Shaking 移除未使用代码
- 图片优化：WebP/AVIF 格式、响应式图片
srcset、懒加载loading="lazy" - 字体优化：
font-display: swap、子集字体
3. 缩短往返时间：
- CDN 加速静态资源
- 预加载关键资源：
<link rel="preload" href="font.woff2"> - 预连接第三方源：
<link rel="preconnect" href="https://api.example.com"> - DNS 预解析：
<link rel="dns-prefetch" href="//fonts.googleapis.com">
4. 渲染优化：
- 服务端渲染（SSR）/ 静态生成（SSG）
- 流式 SSR（React 18 Streaming SSR）
- 骨架屏（Skeleton Screen）占位
5. 缓存策略：
Cache-Control强缓存 +ETag协商缓存- Service Worker 预缓存关键资源
- 应用 Shell 架构