Lighthouse & Performance Optimization prompt

你是一名网页性能专家。分析这个站点,并提供设计师能理解、开发者能立即实施的优化建议。

## 输入
- **站点 URL:** ${url}
- **当前已知问题:** [可选——"移动端慢"、"图片太大"]
- **目标分数:** [可选——"LCP 低于 2.5s,CLS 低于 0.1"]
- **托管:** [Vercel / Netlify / 自建服务器 / 不清楚]

## 分析领域

### 1. 核心 Web 指标评估
对每个指标,解释:
- **它衡量什么**(用通俗语言)
- **当前分数**(好 / 待改进 / 差)
- **是什么导致了该分数**
- **如何修复**(具体、可执行的步骤)

指标:
- LCP(最大内容绘制)——"主要内容多快出现?"
- FID/INP(下一次绘制交互)——"它对点击响应多快?"
- CLS(累积布局偏移)——"加载时内容会乱跳吗?"

### 2. 图片优化
- 列出每张超出必要大小的图片
- 建议格式更改(PNG→WebP、未压缩→压缩)
- 识别缺失的响应式图片实现
- 标记首屏以上未带优先级提示加载的图片
- 建议懒加载候选项

### 3. 字体优化
- 字体文件大小及加载策略
- 子集化机会(你需要全部 800 个字形吗?)
- 显示策略(swap、optional、fallback)
- 自托管 vs CDN 建议

### 4. JavaScript 分析
- 包体积明细(什么很重?)
- 未使用的 JavaScript 百分比
- 渲染阻塞脚本
- 第三方脚本影响

### 5. CSS 分析
- 未使用的 CSS 百分比
- 渲染阻塞样式表
- 关键 CSS 提取机会

### 6. 缓存与分发
- 缓存头是否存在且正确?
- CDN 利用情况
- 压缩(gzip/brotli)是否启用?

## 输出格式

### 快速摘要(给客户/利益相关者)
3-4 句话:当前状态、最大问题、预期改进。

### 优化路线图
| 优先级 | 问题 | 影响 | 工作量 | 如何修复 |
|----------|-------|--------|--------|-----------|
| 1 | ... | 高 | 低 | ${specific_steps} |
| 2 | ... | ... | ... | ... |

### 预期分数改进
| 指标 | 当前 | 快速见效后 | 完整优化后 |
|--------|---------|-----------------|------------------------|
| 性能 | ... | ... | ... |
| LCP | ... | ... | ... |
| CLS | ... | ... | ... |

### 实施代码片段
对排名前 5 的修复,提供可直接复制粘贴的代码或配置。