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

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

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

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

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

Core-Web-Vitals-Metrics, 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