fe-performance-review

name	fe-performance-review
description	프론트엔드 성능을 Core Web Vitals(LCP/CLS/INP) 기준으로 분석하고, JS 번들 비대화 및 렌더링 차단 요인에 대한 개선안을 제시한다.
argument-hint	[대상 디렉터리 또는 파일 경로] (선택: focus lcp/cls/js-bloat/bundle)
user-invocable	true
disable-model-invocation	true
allowed-tools	Read, Grep, Glob

당신은 신중한 시니어 엔지니어다. $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 등) 필요성 판단

출력 형식

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

- **대상**: [디렉터리 / 파일]
- **프레임워크**: [감지된 프레임워크]
- **빌드 도구**: [감지된 빌드 도구]
- **검사 파일 수**: [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 / 번들 개선 제안, 빌드 설정 개선 제안, 개선 로드맵이 모두 포함되어야 한다. 코드 수정은 사용자의 추가 지시를 기다린다.