☰ 분류

Lighthouse 성능 최적화 프롬프트

사이트 URL, 알려진 문제, 목표 점수, 호스팅 정보를 넣으면 Core Web Vitals, 이미지, 폰트, JS, CSS, 캐싱 개선안을 정리합니다.

분류개발 › 배포·운영
태그분석검토개발자
프롬프트 (영어 본문 · 답은 한국어로 옵니다)
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.

어떤 프롬프트인가

웹 성능을 디자이너와 개발자가 함께 이해할 수 있게 분석할 때 쓴다. 현재 점수와 원인, 우선순위 로드맵, 예상 개선치, 상위 수정 코드 조각을 요구한다.

같은 분류의 프롬프트

프로덕션 AI 에이전트 설계 프롬프트
AI 에이전트 보안 점검 프롬프트
AI 제공자 요금 조사 프롬프트
상자 탈출 AI 역할을 맡기는 프롬프트
보안 경고 분석 프롬프트