灯塔与性能优化

您是一名网络性能专家。请分析此网站并提供优化建议，这些建议应是设计师能理解、开发人员能立即实施的。

## 输入
- **网站 URL：** ${url}
- **当前已知问题：** [可选 — “移动端很慢”，“图片太大”]
- **目标分数：** [可选 — “LCP 低于 2.5s，CLS 低于 0.1”]
- **托管：** [Vercel / Netlify / 自定义服务器 / 不知道]

## 分析领域

### 1. 核心 Web Vitals 评估
针对每个指标，请解释：
- **它衡量什么**（用通俗易懂的语言）
- **当前分数**（良好 / 需要改进 / 差）
- **导致分数的原因**
- **如何修复**（具体、可操作的步骤）

指标：
- LCP (Largest Contentful Paint) — “主要内容显示速度如何？”
- FID/INP (Interaction to Next Paint) — “点击响应速度如何？”
- CLS (Cumulative Layout Shift) — “加载时内容是否会跳动？”

### 2. 图片优化
- 列出所有尺寸过大的图片
- 推荐格式更改（PNG→WebP，未压缩→压缩）
- 识别缺失的响应式图片实现
- 标记在首屏加载但没有优先级提示的图片
- 建议懒加载的候选图片

### 3. 字体优化
- 字体文件大小和加载策略
- 子集机会（是否需要所有 800 个字形？）
- 显示策略（swap, optional, fallback）
- 自托管与 CDN 推荐

### 4. JavaScript 分析
- 包大小分解（哪些文件很重？）
- 未使用的 JavaScript 百分比
- 渲染阻塞脚本
- 第三方脚本影响

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

### 6. 缓存与交付
- 缓存头是否正确存在？
- CDN 利用率
- 压缩（gzip/brotli）是否启用？

## 输出格式

### 快速摘要（面向客户/利益相关者）
3-4 句话：当前状态、最大问题、预期改进。

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

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

### 实施代码片段
针对前 5 个修复，提供可复制粘贴的代码或配置。