Core Web Vitals优化
以下是关于 Core Web Vitals（LCP、FID、CLS）优化的基本知识点总结：
一、核心指标深度解析
| 指标 | 定义与阈值 | 测量原理 | 关键影响因素 |
|---|---|---|---|
| LCP （最大内容绘制） | 页面最大可见元素渲染完成时间 良好：≤2.5s | 监测最大文本/图片元素的渲染时间 | 1. 服务器响应速度 2. 关键资源加载 3. 渲染阻塞 |
| FID （首次输入延迟） | 用户首次交互到浏览器响应时间 良好：≤100ms | 测量主线程首次被阻塞时长 | 1. 长任务执行 2. 第三方脚本 3. JS执行效率 |
| CLS （累积布局偏移） | 页面生命周期内意外布局偏移总和 良好：≤0.1 | 计算元素位移*影响面积的累积值 | 1. 未指定尺寸媒体 2. 动态内容插入 3. 异步加载资源 |
二、LCP 优化方案
基础优化措施
<!-- 关键资源预加载 -->
<link rel="preload" href="hero-image.jpg" as="image">
<link rel="preconnect" href="https://fonts.gstatic.com"><!-- 服务端优化 -->
<script>// 服务端渲染关键内容（SSR）res.send(`<html><head>${styles}</head><body><div id="app">${renderToString(App)}</div><script defer src="app.js"></script></body></html>`);
</script>
进阶优化策略
| 技术方向 | 实现方案 | 优化效果 |
|---|---|---|
| CDN优化 | 使用边缘缓存 + 智能压缩（WebP/AVIF） | 资源加载时间↓40% |
| HTTP/3 | 启用QUIC协议 + 多路复用 | 连接时间↓30% |
| 优先级控制 | 使用fetchpriority="high"标记关键资源 | 加载顺序优化 |
| 浏览器渲染 | 优化CSSOM构建（减少@import） | 渲染提前50ms |
三、FID 优化方案
基础优化措施
// 长任务拆分