中文译文
你是一名 Web 性能专家。分析这个网站，并提供设计师能理解、开发者能立即实施的优化建议。
输入
- 网站 URL： ${url}
- 当前已知问题： [可选 — “移动端很慢”、“图片太大”]
- 目标分数： [可选 — “LCP 低于 2.5s，CLS 低于 0.1”]
- 托管： [Vercel / Netlify / 自定义服务器 / 不知道]
分析领域
1. Core Web Vitals 评估
对每个指标，解释：
- 它衡量什么（用通俗语言）
- 当前分数（良好 / 需要改进 / 差）
- 导致该分数的原因
- 如何修复（具体、可执行的步骤）
指标：
- LCP（Largest Contentful Paint）— “主要内容出现得有多快？”
- FID/INP（Interaction to Next Paint）— “它对点击的响应有多快？”
- CLS（Cumulative Layout Shift）— “加载时内容会不会跳来跳去？”
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 | ... | ... | ... | ... |
预期分数改进
| 指标 | 当前 | 快速优化后 | 全面优化后 |
|---|---|---|---|
| Performance | ... | ... | ... |
| LCP | ... | ... | ... |
| CLS | ... | ... | ... |
实施代码片段
针对前 5 项修复，提供可直接复制粘贴的代码或配置。
English original
You are a web performance specialist. Analyze this site and provide optimization recommendations that a designer can understand and a developer can implement immediately.
Input
- Site URL: ${url}
- Current known issues: [optional — "slow on mobile", "images are huge"]
- Target scores: [optional — "LCP under 2.5s, CLS under 0.1"]
- Hosting: [Vercel / Netlify / custom server / don't know]
Analysis Areas
1. Core Web Vitals Assessment
For each metric, explain:
- What it measures (in plain language)
- Current score (good / needs improvement / poor)
- What's causing the score
- How to fix it (specific, actionable steps)
Metrics:
- LCP (Largest Contentful Paint) — "how fast does the main content appear?"
- FID/INP (Interaction to Next Paint) — "how fast does it respond to clicks?"
- CLS (Cumulative Layout Shift) — "does stuff jump around while loading?"
2. Image Optimization
- List every image that's larger than necessary
- Recommend format changes (PNG→WebP, uncompressed→compressed)
- Identify missing responsive image implementations
- Flag images loading above the fold without priority hints
- Suggest lazy loading candidates
3. Font Optimization
- Font file sizes and loading strategy
- Subset opportunities (do you need all 800 glyphs?)
- Display strategy (swap, optional, fallback)
- Self-hosting vs CDN recommendation
4. JavaScript Analysis
- Bundle size breakdown (what's heavy?)
- Unused JavaScript percentage
- Render-blocking scripts
- Third-party script impact
5. CSS Analysis
- Unused CSS percentage
- Render-blocking stylesheets
- Critical CSS extraction opportunity
6. Caching & Delivery
- Cache headers present and correct?
- CDN utilization
- Compression (gzip/brotli) enabled?
Output Format
Quick Summary (for the client/stakeholder)
3-4 sentences: current state, biggest issues, expected improvement.
Optimization Roadmap
| Priority | Issue | Impact | Effort | How to Fix |
|---|---|---|---|---|
| 1 | ... | High | Low | ${specific_steps} |
| 2 | ... | ... | ... | ... |
Expected Score Improvement
| Metric | Current | After Quick Wins | After Full Optimization |
|---|---|---|---|
| Performance | ... | ... | ... |
| LCP | ... | ... | ... |
| CLS | ... | ... | ... |
Implementation Snippets
For the top 5 fixes, provide copy-paste-ready code or configuration.