---
id: FE-PERF-GUIDE-001
category: Dev
confidence_score: 1.0
tags: [[Frontend|[Frontend]], performance, [[Optimization|Optimization]], checklist, [[Lighthouse|Lighthouse]], code-splitting, lazy-loading, caching]
last_reinforced: 2026-04-26
---

# Frontend [[Performance Optimization|Performance Optimization]] Guide (프런트엔드 성능 최적화 가이드)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "불필요한 리소스 전송을 최소화하고, 브라우저의 렌더링 경로를 효율적으로 관리하여 사용자에게 밀리초 단위의 쾌적함을 선사하라" — 사용자 유지율과 전환율을 결정짓는 프런트엔드 엔지니어링의 핵심 지표 관리 전략.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Lean Delivery and Progressive [[Hydration|Hydration]]" — 초기 번들 크기를 줄이고 필요한 시점에 리소스를 지연 로딩하여, 사용자가 체감하는 첫 유의미한 페인팅(FCP) 시간을 단축하는 패턴.
- **실전 최적화 체크리스트:**
    - **Resource Loading:** 이미지 최적화(WebP, Lazy Load), 폰트 서브셋 활용, 중요 리소스 우선순위(Preload/Prefetch) 설정.
    - **[[JavaScript|JavaScript]] Bundle:** Route-based Code Splitting, 대형 라이브러리 Tree-shaking, 미사용 코드 제거.
    - **Rendering [[Efficiency|Efficiency]]:** 불필요한 리렌더링 방지(`React.memo`, `useMemo`), 가상화 리스트(`react-window`) 적용.
    - **Network & Caching:** HTTP/2+ 활용, CDN 배포, 정적 자산의 강력한 캐시 정책(E-tag, Cache-Control).
- **의의:** 저사양 기기나 열악한 네트워크 환경의 사용자까지 포용하며, 비즈니스 수익과 검색 엔진 랭킹을 동시에 향상시킴.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 모든 리소스를 하나로 합쳐서(Bundling) 전송했으나, 현대 정책은 지연 로딩(Lazy Loading)과 증분 전송 정책으로 전환됨. 또한 '서버 사이드 렌더링(SSR)'이 단순히 SEO를 넘어 성능 최적화의 필수 요소 정책으로 정착됨.
- **정책 변화:** Antigravity 프로젝트는 모든 웹 자산에 대해 Lighthouse 성능 점수 90점 이상 유지를 강제하며, 번들 크기가 20% 이상 증가할 경우 자동 알림 및 검토 루프에 진입하는 'Performance [[Budget|Budget]]' 정책을 시행함.

## 🔗 지식 연결 (Graph)
- [[Core-Web-Vitals-Metrics|Core-Web-Vitals-Metrics]], [[Web-Rendering-Strategies-CSR-vs-SSR|Web-Rendering-Strategies-CSR-vs-SSR]], Image-Optimization, Frontend-Performance-Checklist
- **Raw Source:** 00_Raw/Frontend Performance Checklist.md, 00_Raw/Frontend Performance Optimization.md