지연 로딩 (레이지 로딩) (Lazy Loading)
Lazy Loading
지연 로딩(Lazy Loading)은 뷰포트(Viewport) 내에 있는 콘텐츠만 우선 로드하고, 나머지는 스크롤 시점에 비동기로 불러오는 최적화 기법입니다. 초기 로딩 속도(LCP)를 획기적으로 개선하여 사용자 경험(UX)과 검색엔진 순위(SEO)를 동시에 잡는 필수 전략입니다.
지연 로딩(Lazy Loading)은 뷰포트(Viewport) 내에 있는 콘텐츠만 우선 로드하고, 나머지는 스크롤 시점에 비동기로 불러오는 최적화 기법입니다. 초기 로딩 속도(LCP)를 획기적으로 개선하여 사용자 경험(UX)과 검색엔진 순위(SEO)를 동시에 잡는 필수 전략입니다.
📖 개념 정의 및 실무 적용
웹 페이지의 초기 로딩 속도는 이탈률과 직결되는 핵심 지표입니다. 모든 이미지를 한 번에 불러오는 방식은 불필요한 대역폭을 낭비하고 브라우저 렌더링을 지연시켜, 특히 모바일 환경에서 사용자 경험을 크게 저해합니다. 지연 로딩을 도입하면 초기 요청 수를 줄여 LCP(Largest Contentful Paint) 점수를 개선할 수 있습니다.
또한, 구글 검색엔진은 페이지 속도를 랭킹 요소로 활용하므로 지연 로딩은 단순한 성능 개선을 넘어 SEO 최적화의 기본입니다. 특히 이미지 중심의 커머스나 콘텐츠 플랫폼에서 서버 부하를 줄이고 데이터 비용을 절감하는 가장 효율적인 인프라 아키텍처 개선책입니다.
💻 실무 활용 코드 스니펫 (HTML)
<img src="image.jpg" loading="lazy" alt="설명" width="800" height="600">⚡ 5분 만에 적용하는 실행 스텝
- 현재 페이지의 LCP 요소를 파악하고, 뷰포트 상단에 위치한 핵심 이미지는 지연 로딩 대상에서 제외합니다.
- 모든 <img> 및 <iframe> 태그에 loading=”lazy” 속성을 추가합니다.
- 이미지 태그에 반드시 width와 height 속성을 명시하여 레이아웃 시프트(CLS)를 방지합니다.
- Lighthouse 또는 PageSpeed Insights를 통해 LCP 개선 수치를 검증합니다.
첫 화면(Above the Fold)에 노출되는 이미지는 지연 로딩을 적용하지 말고, 대신 preload를 사용하여 즉시 로드되도록 설정하세요. 또한, 이미지 포맷을 WebP나 AVIF로 변환하면 지연 로딩과 시너지를 내어 로딩 속도를 극대화할 수 있습니다.
첫 화면 이미지에 지연 로딩을 적용하면 오히려 LCP 점수가 하락하므로 주의해야 합니다. 또한, width/height 속성을 생략하면 이미지가 로드될 때 레이아웃이 밀리는 CLS(Cumulative Layout Shift) 현상이 발생하여 사용자 경험을 해칠 수 있으니 반드시 크기 값을 고정하세요.
❓ 자주 묻는 질문 (FAQ)
A. 아니요. 화면 상단(Above the Fold)에 보이는 이미지는 즉시 로드되어야 합니다. 상단 이미지에 지연 로딩을 걸면 오히려 LCP 점수가 나빠집니다.
A. 네, 구글봇은 현대적인 지연 로딩 방식을 이해하고 처리할 수 있습니다. 다만, 자바스크립트 기반의 복잡한 라이브러리보다는 네이티브 loading=”lazy” 속성을 사용하는 것이 SEO 측면에서 가장 안전합니다.