142 lines
3.7 KiB
Markdown
142 lines
3.7 KiB
Markdown
---
|
|
name: verify-perf
|
|
description: |
|
|
Nuxt 프로젝트의 성능 병목을 분석하고 Core Web Vitals 기준으로
|
|
코드 스플리팅, 이미지 최적화, SSR/ISR 전략 등 구체적인 개선 방안을 제시합니다.
|
|
|
|
다음 상황에서 반드시 사용하세요:
|
|
- "성능 최적화해줘", "Lighthouse 점수 올려줘"
|
|
- "LCP가 느린데 어떻게 해?", "번들 사이즈 줄여줘"
|
|
- Core Web Vitals 기준 미달 시 개선 방향이 필요할 때
|
|
---
|
|
|
|
# 성능 최적화 분석 (verify-perf)
|
|
|
|
Nuxt 프로젝트 → 성능 병목 자동 분석 → Core Web Vitals 개선 가이드 생성.
|
|
|
|
## 언제 사용하는가
|
|
|
|
- 배포 전 성능 기준(LCP < 2.5s / CLS < 0.1 / INP < 200ms) 충족 여부 확인 시
|
|
- Lighthouse 점수 80+ 달성을 위한 구체적 액션이 필요할 때
|
|
- 번들 사이즈 증가, 이미지 로딩 지연 등 특정 성능 문제가 있을 때
|
|
|
|
## Core Web Vitals 목표
|
|
|
|
| 지표 | 목표 | 기준 |
|
|
|---|---|---|
|
|
| LCP (Largest Contentful Paint) | < 2.5s | 가장 큰 콘텐츠 렌더링 |
|
|
| CLS (Cumulative Layout Shift) | < 0.1 | 레이아웃 안정성 |
|
|
| INP (Interaction to Next Paint) | < 200ms | 입력 반응성 |
|
|
| FCP (First Contentful Paint) | < 1.8s | 첫 콘텐츠 노출 |
|
|
|
|
---
|
|
|
|
## 작업 순서
|
|
|
|
### Phase 1: 코드 분석
|
|
|
|
1. 아래 파일을 읽어 성능 관련 설정을 파악한다.
|
|
- `nuxt.config.ts`: 이미지 모듈, SSR 설정, 번들러 옵션
|
|
- `pages/` 및 `components/`: 이미지 태그, 폰트 로딩, 라이브러리 import
|
|
- `package.json`: 번들 크기 영향이 큰 패키지 확인
|
|
|
|
2. 일반적인 병목 패턴을 체크한다.
|
|
|
|
**번들 크기**
|
|
- `import * from '...'` (tree-shaking 비활성화)
|
|
- 전체 import 라이브러리 (lodash, moment 등)
|
|
- 대형 아이콘 라이브러리 전체 import
|
|
|
|
**이미지**
|
|
- `<img>` 직접 사용 (Nuxt `<NuxtImg>` 미사용)
|
|
- `width`, `height` 미지정 (CLS 발생)
|
|
- 레이지 로딩 미적용
|
|
|
|
**렌더링 전략**
|
|
- 정적 콘텐츠에 `useFetch` 남용
|
|
- 불필요한 CSR 컴포넌트
|
|
|
|
### Phase 2: 개선 방안 생성
|
|
|
|
#### 이미지 최적화
|
|
```vue
|
|
<!-- Before -->
|
|
<img src="/hero.jpg" alt="히어로" />
|
|
|
|
<!-- After: Nuxt Image 모듈 활용 -->
|
|
<NuxtImg
|
|
src="/hero.jpg"
|
|
alt="히어로"
|
|
width="1200"
|
|
height="600"
|
|
loading="lazy"
|
|
format="webp"
|
|
/>
|
|
```
|
|
|
|
#### 번들 최적화
|
|
```ts
|
|
// nuxt.config.ts
|
|
export default defineNuxtConfig({
|
|
vite: {
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
vendor: ['vue', 'pinia'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
#### SSR / SSG / ISR 전략
|
|
```ts
|
|
// nuxt.config.ts
|
|
export default defineNuxtConfig({
|
|
routeRules: {
|
|
'/': { prerender: true }, // 정적 홈
|
|
'/products/**': { swr: 3600 }, // ISR: 1시간 캐시
|
|
'/dashboard/**': { ssr: false }, // CSR: 인증 필요 페이지
|
|
}
|
|
})
|
|
```
|
|
|
|
#### 컴포넌트 지연 로딩
|
|
```vue
|
|
<!-- 무거운 컴포넌트 lazy 로딩 -->
|
|
<LazyHeavyChart v-if="isVisible" />
|
|
```
|
|
|
|
### Phase 3: 우선순위 정렬
|
|
|
|
발견된 개선사항을 impact/effort 매트릭스로 정렬한다:
|
|
- 🔴 High impact, Low effort → 즉시 적용
|
|
- 🟡 High impact, High effort → 스프린트 계획
|
|
- 🟢 Low impact, Low effort → 여유 있을 때
|
|
- ⚪ Low impact, High effort → 보류
|
|
|
|
---
|
|
|
|
## 출력 형식
|
|
|
|
```
|
|
## 성능 분석 리포트
|
|
|
|
### 현황 추정
|
|
- 예상 LCP: ~ (분석된 병목 기준)
|
|
- 주요 이슈: [번들 사이즈 | 이미지 | 렌더링 전략]
|
|
|
|
### 🔴 즉시 적용 (High impact, Low effort)
|
|
1. [문제] → [해결책 + 코드]
|
|
|
|
### 🟡 스프린트 계획 (High impact, High effort)
|
|
1. [문제] → [해결 방향]
|
|
|
|
### 예상 개선 효과
|
|
- LCP: Xs → Xs
|
|
- 번들: XkB → XkB (XX% 감소)
|
|
```
|