**지연 로딩(lazy-loading)**은 어떤 것을 실제로 필요할 때까지 — 보통 화면에 스크롤되어 들어오기 직전까지 — 다운로드를 미룹니다. 이는 초기 페이로드를 줄여 페이지의 가시 영역이 더 빠르게 로드되게 합니다.
이미지 지연 로딩
브라우저는 속성 하나로 이를 네이티브로 처리합니다:
html
width/height를 항상 유지하여 브라우저가 공간을 예약하게 하세요(레이아웃 시프트 방지). LCP 이미지는 절대 지연 로딩하지 마세요 — 측정 대상이 되는 바로 그것을 늦추게 됩니다.
무겁거나 드물게 쓰이는 UI(모달, 차트)를 별도 청크로 분리하여 필요할 때 로드하세요:
// 메인 번들에 포함되는 정적 import 대신:
const Chart = React.lazy(() => import("./Chart")); // 별도 청크, 렌더링 시 페치
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
동적 import()는 번들러에게 <Chart>가 처음 렌더링될 때만 다운로드되는 별도 파일을 만들라고 지시합니다.
지연 로딩은 무거운 페이지에서 가장 단순하면서도 효과가 큰 개선입니다. 미리 다운로드할 양이 적을수록 LCP가 빨라지고 파싱할 JS가 줄어듭니다. 면접관은 지원자가 히어로 이미지를 지연 로딩하지 않는지 보고 싶어 합니다 — 이는 도우려던 지표를 오히려 해치는 고전적 실수입니다.