# Fe Performance Review

> 프론트엔드 성능을 Core Web Vitals(LCP/CLS/INP) 기준으로 분석하고, JS 번들 비대화 및 렌더링 차단 요인에 대한 개선안을 제시한다.

- Skill: `gaebalai-claude-code-kit-ko/fe-performance-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaebalai-claude-code-kit-ko/fe-performance-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaebalai-claude-code-kit-ko/fe-performance-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gaebalai (https://skillmd.com/u/gaebalai-claude-code-kit-ko)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/gaebalai-claude-code-kit-ko/fe-performance-review

---


당신은 신중한 시니어 엔지니어다. $ARGUMENTS 를 대상으로 아래 작업을 수행하라.

## 목적

프론트엔드 코드베이스를 정적으로 분석하여 Core Web Vitals(LCP / CLS / INP) 개선 기회를 식별한다.  
JS 번들 비대화 원인, 렌더링 차단 리소스, 레이아웃 시프트 원인을 탐지하고, 구체적인 개선 코드와 함께 기대 효과를 제시한다.

## 입력

- 대상 디렉터리 또는 파일 경로 (필수)
- 선택: 중점 영역 (LCP / CLS / INP / JS 번들 / 이미지 최적화)
- 선택: 빌드 도구 정보 (webpack / Vite / esbuild / Next.js 등)
- 선택: 이미 알려진 성능 문제 또는 Lighthouse 점수
- 정보가 부족하면 사용자에게 질문한다

## 절차

1. **프로젝트 구조 파악**
   - Glob으로 빌드 설정 파일 검색 (`webpack.config.*`, `vite.config.*`, `next.config.*`, `tsconfig.json`)
   - Read로 번들 분할, 트리 쉐이킹, 압축 설정 등 확인
   - Grep으로 `import` / `require` 검색하여 의존 규모 파악
   - `package.json`을 Read로 확인하여 의존 패키지 수 및 번들 영향 추정

2. **LCP (Largest Contentful Paint) 분석**
   - 최대 콘텐츠 요소 후보 식별 (히어로 이미지, 대형 텍스트, 영상 등)
   - Grep으로 이미지 관련 코드 검색 (`<img`, `background-image`, `next/image`, `srcSet`)
   - 이미지 최적화 상태 점검:
     - 퍼스트뷰 이미지에 `loading="lazy"`가 잘못 적용되어 있지 않은지
     - LCP 후보에 `fetchpriority="high"` 설정 여부
     - WebP / AVIF 등 최신 포맷 사용 여부
   - 렌더링 차단 리소스 탐지 (동기 `<script>`, `<link rel="stylesheet">`)
   - CSS 내부 `@import` 사용 여부 검색 (연쇄 로딩 확인)

3. **CLS (Cumulative Layout Shift) 분석**
   - `width` / `height` 미지정 `<img>`, `<video>` 검색
   - 동적 DOM 삽입 코드 탐지 (`insertBefore`, `appendChild`, `innerHTML`, 조건부 렌더링)
   - 웹폰트 로딩 방식 확인 (`font-display`, FOIT/FOUT 문제)
   - 광고·서드파티 스크립트 로딩 시점 점검

4. **JS 번들 분석**
   - 대형 라이브러리 전체 import 탐지 (`moment`, `lodash`, `date-fns` 등)
   - 이름 있는 import vs 기본 import 사용 방식 점검 (트리 쉐이킹 효율)
   - 동적 import(`import()`) 사용 여부 확인 (코드 분할 가능성)
   - 폴리필 필요성 및 로딩 전략 점검
   - `devDependencies`가 운영 번들에 포함되지 않는지 확인

5. **INP (Interaction to Next Paint) 분석**
   - 무거운 동기 처리 탐지 (대량 DOM 조작, 과도한 `map`/`filter`/`reduce`)
   - 이벤트 핸들러 내부 처리 시간 점검 (장시간 실행 작업)
   - `requestAnimationFrame`, `requestIdleCallback`, Web Worker 활용 여부 확인
   - 리스트 가상화(`react-window`, `react-virtualized` 등) 필요성 판단

## 출력 형식

```markdown
## 프론트엔드 성능 분석 보고서

- **대상**: [디렉터리 / 파일]
- **프레임워크**: [감지된 프레임워크]
- **빌드 도구**: [감지된 빌드 도구]
- **검사 파일 수**: [N개]

## 개선 기회 요약

| 카테고리 | 건수 | 예상 영향도 |
|----------|------|-------------|
| LCP 개선 | [N] | [높음/중간/낮음] |
| CLS 개선 | [N] | [높음/중간/낮음] |
| INP 개선 | [N] | [높음/중간/낮음] |
| 번들 감소 | [N] | [추정 -XX KB] |

## LCP 개선 제안

| # | 문제 | 파일:라인 | 현재 상태 | 개선안 | 예상 효과 |
|---|------|-----------|------------|--------|------------|
| 1 | [문제 설명] | [file:line] | [현재 코드] | [개선 코드] | [효과] |

## CLS 개선 제안

| # | 문제 | 파일:라인 | 현재 상태 | 개선안 | 예상 효과 |
|---|------|-----------|------------|--------|------------|
| 1 | [문제 설명] | [file:line] | [현재 코드] | [개선 코드] | [효과] |

## JS 번들 개선 제안

| # | 문제 | 파일:라인 | 현재 영향 크기 | 개선안 | 예상 감소량 |
|---|------|-----------|----------------|--------|--------------|
| 1 | [문제 설명] | [file:line] | [추정 XX KB] | [개선 코드] | [-XX KB] |

## INP 개선 제안

| # | 문제 | 파일:라인 | 현재 상태 | 개선안 | 예상 효과 |
|---|------|-----------|------------|--------|------------|
| 1 | [문제 설명] | [file:line] | [현재 코드] | [개선 코드] | [효과] |

## 빌드 설정 개선 제안

| # | 설정 항목 | 현재 값 | 권장 값 | 기대 효과 |
|---|-----------|----------|----------|------------|
| 1 | [설정명] | [현재 값] | [권장 값] | [효과] |

## 개선 로드맵

| 우선순위 | 대응 내용 | 예상 공수 | 기대 지표 개선 |
|----------|-----------|-----------|----------------|
| 높음 | [저공수·고효과 항목] | [S] | [LCP -XXms 등] |
| 중간 | [중공수·중효과 항목] | [M] | [CLS -X.XX 등] |
| 낮음 | [고공수·저효과 항목] | [L] | [번들 -XX KB 등] |
```

## 유의사항

- 코드는 수정하지 않는다. 분석 및 제안만 수행한다.
- 번들 크기 감소 수치는 정적 분석 기반 추정치이며, 실제 빌드 결과와 다를 수 있음을 명시한다.
- 성능 개선 수치는 추정치이며, Lighthouse / WebPageTest / RUM 데이터 등 실측 검증이 필요함을 명시한다.
- 서드파티 스크립트 제거 제안 시 비즈니스 요구사항과의 충돌 여부를 사용자에게 확인한다.
- 프레임워크 전용 최적화(예: Next.js ISR, Nuxt 데이터 패칭 최적화 등)가 있다면 이를 우선 제안한다.

## 종료 조건

위 출력 형식에 맞춘 성능 분석 보고서를 작성하면 종료한다.
LCP / CLS / INP / 번들 개선 제안, 빌드 설정 개선 제안, 개선 로드맵이 모두 포함되어야 한다.
코드 수정은 사용자의 추가 지시를 기다린다.