80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
|
---
|
||
|
|
title: "Lighthouse & Performance Optimization"
|
||
|
|
contributor: "@gokbeyinac"
|
||
|
|
tags: #coding, #gokbeyinac
|
||
|
|
---
|
||
|
|
|
||
|
|
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.
|