The prompt
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.
How to use this prompt
Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.
Which AI model works best
Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.
How to customize this prompt
Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).
Common use cases
- Writing production code with strict style requirements
- Reviewing pull requests and catching bugs before merge
- Converting between languages (Python → TypeScript, for example)
- Generating unit tests for existing functions
- Explaining unfamiliar codebases to new team members
Variations
Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).
Related prompts