Antigravity Agent
3.9 KiB
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