# [[Lazy Loading]]

## 📌 Brief Summary
지연 로딩(Lazy Loading)은 웹 애플리케이션의 리소스(이미지, 비디오, JavaScript 컴포넌트 등)를 초기 로딩 시점에 모두 가져오지 않고, 실제 화면에 스크롤되거나 사용자가 상호작용하여 필요해지는 시점까지 로드를 연기하는 성능 최적화 기법이다 [1-3]. 이를 통해 초기 번들 크기를 줄이고 로드 시간을 단축하여 타임 투 퍼스트 바이트(TTFB)를 개선하며 사용자가 더 빠르게 상호작용할 수 있도록 돕는다 [2, 4, 5]. 주로 React 애플리케이션 최적화와 Core Web Vitals 지표 향상을 위해 코드 스플리팅(Code Splitting)과 함께 필수적으로 사용된다 [2, 6, 7].

## 📖 Core Content
* **개념 및 작동 원리:** 
  지연 로딩은 사용자가 실제로 요구하기 전까지 리소스 렌더링 및 다운로드를 미루는 방식으로 작동한다 [1]. 단일 번들로 묶여 있던 거대한 JavaScript나 미디어 파일을 작게 쪼개고(Code Splitting), 필요할 때만 온디맨드(on-demand)로 불러오게 함으로써 대역폭 사용을 줄이고 초기 렌더링 속도와 체감 성능을 크게 향상시킨다 [2, 4, 5].

* **HTML 및 미디어 적용:** 
  이미지, 비디오, iFrame 등 비핵심 자산(Non-critical assets)이 뷰포트(viewport) 근처에 도달할 때 로드되게 하면 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 개선할 수 있다 [2]. 최신 HTML에서는 이미지와 iFrame에 `loading="lazy"` 속성을 부여하여 네이티브 지연 로딩을 구현할 수 있으며 [8], 화면 밖(offscreen)에 있는 에셋이나 서드파티 위젯에도 지연 로딩을 적용하는 것이 권장된다 [9, 10]. 

* **React에서의 구현 및 패턴:** 
  React 환경에서는 `React.lazy` 함수와 `<Suspense>` 컴포넌트를 활용해 동적 임포트(dynamic import)를 수행하고 로딩 상태(fallback UI)를 처리한다 [6, 11].
  * **라우트 기반 분할 (Route-based splitting):** 사용자가 특정 페이지 경로로 이동할 때만 해당 컴포넌트를 로딩하여 초기 번들 크기를 극적으로 줄일 수 있다 [11-13].
  * **컴포넌트 수준 분할 (Component-level splitting):** 탭 기반 콘텐츠, 화면 아래(below-the-fold) 콘텐츠, 혹은 교차 관찰자(Intersection Observer)를 활용하여 상호작용 또는 스크롤 시점에 컴포넌트를 로드한다 [11, 14].
  * 지연 로딩 시 발생할 수 있는 네트워크 오류나 청크 로딩 실패에 대비해 오류 경계(Error Boundaries)를 설정하여 애플리케이션 충돌을 방지해야 한다 [11, 15].

* **성능 최적화 시 유의점 (Core Web Vitals):**
  무분별한 지연 로딩 적용(Over-splitting)은 오버헤드를 발생시킬 수 있으므로 크기가 큰 주요 기능과 라우트에 집중해야 한다 [13]. 또한 Next.js와 같은 프레임워크의 `next/image` 컴포넌트를 사용하면 자동 크기 조절과 지연 로딩을 결합해 시각적 안정성(CLS)까지 확보할 수 있다 [16].

## 🔗 Knowledge Connections
- **Related Topics:** [[Code Splitting]], [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[React.lazy and Suspense]], [[Above-the-fold Content]]
- **Projects/Contexts:** [[React Frontend Performance Optimization]], [[E-commerce and SaaS Web Development]]
- **Contradictions/Notes:** 소스 자료에 따르면 지연 로딩은 성능 개선의 핵심이지만, "화면 상단(Above-the-fold)"에 위치한 중요한 핵심 시각 콘텐츠(예: Hero 이미지)에 지연 로딩을 적용할 경우 오히려 렌더링을 지연시켜 LCP 점수에 악영향을 미친다 [8, 17]. 따라서 핵심 LCP 요소에는 지연 로딩을 피하고 `loading="eager"` 또는 `fetchpriority="high"`와 같은 속성을 통해 빠르게 로드(Eager-load)해야 한다 [17-19].

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