2.5 KiB
2.5 KiB
id, category, confidence_score, tags, last_reinforced
| id | category | confidence_score | tags | last_reinforced | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| FE-PERF-GUIDE-001 | 10_Wiki/💡 Topics/AI | 1.0 |
|
2026-04-26 |
Frontend Performance Optimization Guide (프런트엔드 성능 최적화 가이드)
📌 한 줄 통찰 (The Karpathy Summary)
"불필요한 리소스 전송을 최소화하고, 브라우저의 렌더링 경로를 효율적으로 관리하여 사용자에게 밀리초 단위의 쾌적함을 선사하라" — 사용자 유지율과 전환율을 결정짓는 프런트엔드 엔지니어링의 핵심 지표 관리 전략.
📖 구조화된 지식 (Synthesized Content)
- 추출된 패턴: "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).
- 의의: 저사양 기기나 열악한 네트워크 환경의 사용자까지 포용하며, 비즈니스 수익과 검색 엔진 랭킹을 동시에 향상시킴.
⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- 과거 데이터와의 충돌: 과거에는 모든 리소스를 하나로 합쳐서(Bundling) 전송했으나, 현대 정책은 지연 로딩(Lazy Loading)과 증분 전송 정책으로 전환됨. 또한 '서버 사이드 렌더링(SSR)'이 단순히 SEO를 넘어 성능 최적화의 필수 요소 정책으로 정착됨.
- 정책 변화: Antigravity 프로젝트는 모든 웹 자산에 대해 Lighthouse 성능 점수 90점 이상 유지를 강제하며, 번들 크기가 20% 이상 증가할 경우 자동 알림 및 검토 루프에 진입하는 'Performance Budget' 정책을 시행함.
🔗 지식 연결 (Graph)
- 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