웹 페이지의 리소스 중 가장 큰 용량을 차지하는 요소는 대다수 이미지다.
초기 로딩 속도와 사용자 경험을 개선하기 위해 이미지를 처리하는 대표적인 두 가지 방식인 Lazy Load(지연 로딩)와 Preload(사전 로딩)의 개념 및 활용법을 알아보자.
1. Lazy Load (지연 로딩)
페이지 진입 시 모든 이미지를 한 번에 다운로드하지 않고, 사용자의 뷰포트(화면)에 들어오는 시점에 맞춰 이미지를 요청하는 기법이다.
필요성
- 첫 페이지 로드 시 불필요한 네트워크 대역폭 낭비를 막는다.
- 초기 렌더링 속도(FCP, LCP)를 단축시켜 이탈률을 낮춘다.
- 사용자가 스크롤을 끝까지 내리지 않으면 하단 이미지는 아예 요청하지 않으므로 데이터 비용을 아낄 수 있다.
구현 방식
- 네이티브 HTML 속성: 가장 단순하며 브라우저 표준 방식이다.
<img src="large-image.jpg" loading="lazy" alt="예시 이미지" /> - Intersection Observer API: 뷰포트 교차 시점을 정밀하게 제어하거나, 스켈레톤 UI와 연계할 때 JavaScript로 직접 구현한다.
2. Preload (사전 로딩)
특정 이미지가 화면에 표시되기 전에 백그라운드에서 리소스를 미리 캐싱해 두고, 실제 렌더링 시점에 지연 없이 즉각 노출시키는 기법이다.
필요성
- 캐러셀(슬라이더)의 다음 이미지, 모달창 팝업, 탭 전환 등 사용자의 인터랙션 직후 빈 화면이나 버벅임 없이 즉시 이미지를 보여줘야 할 때 필수적이다.
- 브라우저 캐시에 이미지를 넣어두는 원리다.
React에서의 구현 방식
HTML의 <link rel="preload">를 활용하거나, 컴포넌트 마운트 시점에 Image 객체를 생성해 백그라운드 다운로드를 유도한다.
import { useEffect } from 'react';
function BannerSlider() {
useEffect(() => {
// 다음에 노출될 슬라이드 이미지를 미리 다운로드하여 브라우저 캐시에 저장
const img = new Image();
img.src = 'https://example.com/next-slide.jpg';
}, []);
return <div>배너 영역</div>;
}핵심 요약 및 사용 기준
| 구분 | Lazy Load | Preload |
|---|---|---|
| 동작 시점 | 화면에 보이기 직전(스크롤 도달 시) | 사용자가 보기 전(백그라운드 사전 다운로드) |
| 주 목적 | 초기 로딩 비용 절감, 불필요한 요청 방지 | 중요한 화면 전환 시 깜빡임(딜레이) 제거 |
| 주요 대상 | 긴 스크롤 하단 이미지, 피드 리스트 | 히어로 배너 첫 이미지, 슬라이더 다음 장, 모달 이미지 |
- 첫 화면 최상단(Above the fold)의 핵심 이미지에는 절대로 Lazy Load를 걸지 않는다. LCP(Largest Contentful Paint) 지표가 지연되어 오히려 로딩 성능이 떨어진다. 최상단 이미지는
fetchpriority="high"나preload대상이다.
- 스크롤을 내려야만 보이는 이미지들에만
Lazy Load를 적용하는 것이 기본 원칙이다.
Developer