2nd/00_Raw/프론트엔드 성능 최적화 (Frontend Performance Optimization).md

# [[프론트엔드 성능 최적화 (Frontend Performance Optimization)]]

## 📌 Brief Summary
프론트엔드 성능 최적화는 웹사이트의 초기 로딩 속도, 반응성, 시각적 안정성을 향상시켜 사용자 경험과 검색 엔진 랭킹을 개선하는 과정입니다 [1, 2]. 2025년 기준 Google의 Core Web Vitals가 더욱 엄격해짐에 따라 이미지 압축, 불필요한 코드 분할, 렌더링 차단 리소스 제거 등의 기술적 접근이 필수가 되었습니다 [3, 4]. 성능이 저하될 경우 사용자의 이탈률 증가 및 전환율 감소로 직결되므로, 빠르고 반응성이 뛰어난 인터페이스를 제공하는 것이 핵심입니다 [5-7].

## 📖 Core Content

*   **Core Web Vitals 최적화 (LCP, INP, CLS, FCP):**
    *   2025년 기준 상호작용을 평가하는 지표로 FID를 대신해 **INP(Interaction to Next Paint)** 가 적용되었으며, 150ms~200ms 이하로 유지해야 합니다 [8-10]. INP 개선을 위해서는 무거운 연산에 Web Workers를 활용하고, 긴 작업을 잘게 분할하며, 중요하지 않은 서드파티 JavaScript를 지연 로딩(Defer)해야 합니다 [9, 11, 12].
    *   **LCP(Largest Contentful Paint)** 는 2.0초~2.5초 이내로 최적화해야 합니다 [3, 13]. 이를 위해 WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, CDN(콘텐츠 전송 네트워크) 활용, 핵심 리소스 사전 로드(preload), 서버 응답 시간(TTFB) 단축 등의 전략이 필요합니다 [14-16].
    *   **CLS(Cumulative Layout Shift)** 방지를 위해서는 이미지 및 비디오에 명시적인 크기(dimension) 속성을 설정하고, 동적 콘텐츠나 광고를 위한 빈 공간을 미리 확보해야 합니다 [17, 18]. 
    *   **FCP(First Contentful Paint)** 향상을 위해 렌더링을 차단하는 요소를 최소화하고, 핵심 CSS를 인라인으로 배치하는 것이 권장됩니다 [11].

*   **코드 스플리팅(Code Splitting) 및 지연 로딩(Lazy Loading):**
    *   단일의 거대한 JavaScript 번들은 초기 페이지 로딩 속도를 심각하게 늦춥니다 [19]. 애플리케이션 코드를 작은 청크(chunk) 단위로 나누고, 사용자가 필요로 할 때만 로드하는 코드 스플리팅 기법을 통해 번들 크기를 줄여야 합니다 [4, 20].
    *   React 애플리케이션에서는 `React.lazy`와 `Suspense`를 결합하여 컴포넌트 수준 혹은 라우트(Route) 기반의 지연 로딩을 쉽게 구현할 수 있습니다 [21, 22]. 
    *   스크롤 시 화면에 요소가 나타날 때 로드하도록 Intersection Observer를 활용하거나, 미리 컴포넌트를 로드하는 사전 로딩(Preloading)을 도입하여 체감 성능을 향상시킬 수 있습니다 [23-25].

*   **리소스 및 렌더링 최적화:**
    *   CSS, JavaScript, HTML 파일의 불필요한 문자를 제거해 최소화(Minify)하고, 브라우저 캐싱과 서버 측 캐싱을 설정하여 동일한 리소스의 반복 다운로드를 방지해야 합니다 [26-28].
    *   `preconnect`, `dns-prefetch`와 같은 리소스 힌트(Resource Hints)를 사용하여 브라우저가 필요한 외부 리소스를 빠르게 식별하도록 돕습니다 [29].
    *   순수 클라이언트 사이드 렌더링(CSR)은 큰 JS 번들로 인해 초기 성능 저하를 일으킬 수 있으므로, 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 등의 방식으로 초기 HTML을 서버에서 제공해 첫 바이트 도달 시간(TTFB)을 단축하는 것이 효과적입니다 [30-32].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Code Splitting]], [[Lazy Loading]], [[Server-Side Rendering (SSR)]], [[Static Site Generation (SSG)]]
- **Projects/Contexts:** [[Google Page Experience 2025]], [[React Router]], [[Web Design Best Practices 2025]]
- **Contradictions/Notes:** 코드 스플리팅은 초기 로드 속도를 높이는 유용한 기술이지만, 너무 과도하게 분할(over-splitting)할 경우 불필요한 네트워크 오버헤드가 발생할 수 있어 적절한 청크 분할이 필요합니다 [33, 34]. 또한 성능 관점에서 클라이언트 캐시를 사용하는 방식도 가능하나, React Router와 같은 최신 프레임워크 환경에서는 개별 브라우저의 로컬 캐시보다 백엔드 쿼리나 서버 캐시를 최적화하여 모든 사용자에게 향상된 속도를 제공하는 편이 권장됩니다 [35].

---
*Last updated: 2026-04-26*