# [[Web Performance Optimization Guidelines]]

## 📌 Brief Summary
웹 성능 최적화 가이드라인은 사용자가 빠르고 안정적이며 원활하게 상호작용할 수 있는 웹사이트를 구축하기 위한 필수 기술 및 설계 지침입니다. 2025년 기준, 이 가이드라인은 단순히 페이지 로딩 속도를 향상하는 것을 넘어 코어 웹 바이탈(Core Web Vitals)의 최신 지표인 LCP, INP, CLS를 달성하는 데 중점을 둡니다 [1-3]. 이러한 최적화는 이탈률 감소와 전환율 증가 같은 비즈니스 성과를 창출하며, 검색 엔진 최적화(SEO) 순위를 높이는 데 직접적인 영향을 미칩니다 [4-6].

## 📖 Core Content
*   **코어 웹 바이탈(Core Web Vitals) 최적화 목표 및 방법:**
    *   **LCP (Largest Contentful Paint):** 페이지의 주요 콘텐츠(큰 이미지나 텍스트 블록)가 렌더링 되는 시간으로, 2.0초~2.5초 미만으로 단축해야 합니다 [2, 7]. 이를 위해 WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, 화면 밖에 있는 이미지에는 지연 로딩(Lazy Loading)을 적용하며, CDN(콘텐츠 전송 네트워크)과 서버 사이드 렌더링(SSR)을 활용하여 서버 응답 시간을 최적화합니다 [8-11].
    *   **INP (Interaction to Next Paint):** 2025년에 FID를 대체한 핵심 지표로, 클릭이나 키보드 입력 등 사용자의 모든 상호작용에 대한 브라우저의 응답 지연을 측정하며 150ms~200ms 이하로 유지해야 합니다 [12-14]. 무거운 자바스크립트 연산으로 인해 메인 스레드가 차단되는 것을 막기 위해 긴 작업을 50ms 이하의 청크로 분할하거나 Web Worker를 활용해야 합니다 [12, 15].
    *   **CLS (Cumulative Layout Shift):** 로딩 중 예기치 않은 레이아웃 이동을 방지하여 시각적 안정성을 확보하는 지표로, 0.08~0.1 미만으로 관리해야 합니다 [16, 17]. 이미지와 비디오에 명시적인 크기(Width/Height)를 할당하고, 동적으로 삽입되는 광고나 콘텐츠의 공간을 미리 확보하며, 폰트 로딩 시 텍스트 번쩍임 현상을 막기 위해 `font-display: swap`을 사용해야 합니다 [16, 18, 19].

*   **프론트엔드 및 React 성능 최적화 전략:**
    *   **코드 스플리팅(Code Splitting)과 지연 로딩:** 웹 애플리케이션이 커질수록 거대한 단일 자바스크립트 번들이 초기 로딩을 심각하게 지연시킵니다 [5, 20]. 이를 해결하기 위해 React에서는 `React.lazy`와 `Suspense`를 사용해 컴포넌트 수준의 코드를 분할하거나, React Router를 활용해 라우트 기반 코드 스플리팅을 구현하여 필요한 순간에만 코드를 로드해야 합니다 [21-23].
    *   **검색 엔진 최적화(SEO)를 고려한 렌더링 방식:** 순수 클라이언트 사이드 렌더링(CSR)은 빈 HTML을 제공하므로 크롤링 지연 및 하이드레이션(Hydration) 병목을 유발합니다 [24, 25]. 따라서 트래픽이 많고 SEO가 중요한 페이지는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 혹은 점진적 정적 재생성(ISR) 방식을 사용하여 초기 렌더링 속도와 크롤러 접근성을 극대화해야 합니다 [26-29].
    *   **리소스 전송 최적화:** 렌더링을 차단하는 불필요한 CSS 및 JavaScript의 로딩을 방지하기 위해 코드를 축소(Minification)하고 비동기적(`async`/`defer`)으로 불러오며, `preconnect`나 `fetchpriority="high"`와 같은 리소스 힌트를 사용하여 브라우저가 중요한 자산을 우선적으로 다운로드하도록 구성해야 합니다 [19, 30-32].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[React Rendering Strategies]], [[Code Splitting]], [[Search Engine Optimization (SEO)]], [[User Experience (UX)]]
- **Projects/Contexts:** [[E-commerce Site Optimization]], [[React SPA SEO Migration]]
- **Contradictions/Notes:** 소스 212와 955는 2025년 기준 LCP 목표를 2.0초 미만, CLS를 0.08 미만으로 엄격해진 임계값으로 명시하지만, 소스 339, 376 등 다수의 다른 소스에서는 여전히 기존 기준인 LCP 2.5초 미만, CLS 0.1 미만을 목표치로 언급하는 차이가 존재합니다.

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