💤 Lazy Loading

“보이는 순간만 로드한다”

---

💤 들어가며

웹페이지가 느린 이유는 단순히 코드가 많아서가 아닙니다.
초기 로딩 시 필요하지 않은 리소스까지 모두 불러오기 때문입니다.

이미지, 동영상, 외부 스크립트, 차트 라이브러리…
사용자가 아직 스크롤하지도 않았는데 모두 다운로드된다면,
네트워크는 ‘필요 없는 일’을 먼저 처리하고 있는 셈이죠.

이 문제를 해결하는 것이 바로 Lazy Loading (지연 로딩) 입니다.
즉, “사용자가 실제로 볼 때만 리소스를 불러오는 기술”입니다.

---

💤 Lazy Loading 개념

Lazy Loading은 브라우저의 기본 작동 방식을 “지연시켜” 필요한 순간에만 네트워크 요청을 발생시키는 전략입니다.

즉, 로딩 타이밍을 이렇게 바꿉니다.

구분	기존 방식	Lazy Loading 방식
로딩 시점	페이지 초기 로딩 시	뷰포트(화면)에 들어올 때
다운로드	전부 동시에	필요한 리소스만 순차적으로
사용자 경험	초기에 느림	초기에 가볍고 빠름
네트워크 부하	높음	분산됨

Before vs After Lazy Loading

• 왼쪽 (Traditional Loading): 페이지가 열리자마자 모든 콘텐츠를 한꺼번에 로드 → 초기 로딩 속도 저하
• 오른쪽 (Lazy Loading): 사용자가 스크롤할 때마다 화면에 보이는 콘텐츠만 로드 → 초기 렌더링 시간 단축
  👉 Lazy Loading은 “보이는 순간에만 필요한 데이터를 로드한다”는 원리로 작동하며, 페이지 로드 성능을 향상시키고 불필요한 네트워크 요청을 줄이는 대표적인 렌더링 최적화 기법입니다.

---

💤 Lazy Loading의 동작 원리

1️⃣ Intersection Observer API

브라우저가 특정 요소가 뷰포트에 진입했는지 감시하는 기능입니다.
이때 감시 대상이 화면에 등장하면 이미지 로드 요청을 트리거합니다.

useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src; // 진입 시 이미지 로드
        observer.unobserve(entry.target);
      }
    });
  });
  
  document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));
  
  return () => observer.disconnect();
}, []);

• isIntersecting: 해당 요소가 뷰포트 안으로 들어왔는가
• observer.unobserve: 한 번 로드된 요소는 다시 감시하지 않음
• data-src: 아직 로드하지 않은 이미지 URL을 임시로 보관

Intersection Observer 작동 원리

• 파란색 root는 브라우저의 Viewport이며, 감시 기준이 되는 영역입니다.
• true는 현재 Viewport 안에 있는 요소, false는 화면 밖에 있는 요소를 의미합니다.
• 스크롤 시 요소가 root 경계선에 도달하면 Intersection Observer가 이를 감지하여 Lazy Loading, Infinite Scroll, 애니메이션 실행 등의 로직을 자동으로 수행합니다.

---

2️⃣ 브라우저 기본 속성 loading="lazy"

최근 대부분의 브라우저(Chrome, Edge, Firefox)는 HTML 속성 하나로 기본 Lazy Loading을 지원합니다.

<img src="photo.jpg" loading="lazy" alt="sample image" />

• 지원 브라우저: Chrome 76+, Edge 79+, Firefox 75+
• 비지원 브라우저(사파리 등)는 JS 폴리필(IntersectionObserver)을 함께 사용

이 속성 하나로 이미지 로딩 타이밍을 자동으로 최적화할 수 있습니다.
Chrome은 기본적으로 뷰포트의 약 1250px 근처에 진입하면 요청을 시작합니다.

🧭 Tip:
loading="lazy"는 <iframe> 태그에도 적용됩니다.
→ YouTube, Map, 광고 등의 embed 콘텐츠를 늦게 로드할 수 있습니다.

---

rootMargin과 사전 로딩 거리

const observer = new IntersectionObserver(callback, {
  rootMargin: "200px",
});

• rootMargin은 화면 경계선 앞뒤 여유 거리입니다.
• 200px로 설정하면, 이미지가 화면에 200px 전에 미리 로드됩니다.
• 지나치게 작으면 이미지가 깜빡이며 로드되고,너무 크면 Lazy Loading의 효과가 줄어듭니다.

🧭 추천 값: 200px ~ 400px (사용자 스크롤 속도에 따라 조정)

Intersection Observer 속성 개념도

• 왼쪽의 Root: 브라우저의 Viewport(감시 기준 영역)를 의미하며,
• 가운데의 Root Margin: Viewport 바깥쪽 여유 영역으로, 미리 로드를 유도해 화면 깜빡임을 줄입니다.
• 오른쪽의 Threshold: 요소가 화면에 얼마나 보여야 콜백이 실행될지를 결정합니다.
  👉 적절한 rootMargin과 threshold 설정은 스크롤 시 더 부드러운 사용자 경험을 제공합니다.

---

💤 Lazy Loading 적용 예시

import { useEffect, useRef, useState } from "react";

function LazyImage({ src, alt }) {
  const [isVisible, setVisible] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setVisible(true);
    }, { rootMargin: "300px" });

    if (imgRef.current) io.observe(imgRef.current);
    return () => io.disconnect();
  }, []);

  return (
    <img
      ref={imgRef}
      src={isVisible ? src : "/placeholder.jpg"}
      alt={alt}
      loading="lazy"
      style={{ width: "100%", borderRadius: "8px" }}
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h2>Lazy Loaded Gallery</h2>
      <div className="grid">
        {Array.from({ length: 12 }, (_, i) => (
          <LazyImage
            key={i}
            src={`/images/photo-${i + 1}.jpg`}
            alt={`photo-${i}`}
          />
        ))}
      </div>
    </section>
  );
}

Lazy Loading 동작 예시

• 왼쪽: 스크롤 전 상태로, 아직 실제 이미지가 로드되지 않아 저해상도 Placeholder(블러 처리 이미지)가 보입니다.
• 오른쪽: 사용자가 스크롤해 해당 위치에 도달했을 때, 실제 고해상도 이미지가 로드되어 자연스럽게 전환된 모습입니다.
  👉 Lazy Loading은 이런 방식으로 불필요한 초기 로딩을 줄이고
  스크롤에 맞춰 콘텐츠를 점진적으로 표시합니다.

---

💤 Lazy Loading의 한계와 주의점

문제	설명	해결책
⚠️ LCP 지연	히어로 이미지(LCP 후보)를 Lazy 처리하면 화면 표시가 늦어짐	LCP 이미지는 loading="eager" 또는 fetchpriority="high"
⚠️ SEO 문제	구글봇이 JS를 실행하지 않으면 Lazy 이미지 인식 불가	SSR 또는 <noscript> 폴백 이미지 추가
⚠️ 깜빡임	rootMargin 너무 작을 경우	200~400px로 완화
⚠️ 레이아웃 흔들림	이미지 높이가 지정되지 않으면 CLS 발생	width, height, 또는 aspect-ratio 지정
⚠️ 저사양 기기	스크롤 이벤트/관찰자 수가 많으면 CPU 점유	IntersectionObserver 재사용으로 감시 수 최소화

---

💤 Lazy Loading 적용 후 측정 방법

도구	확인할 항목
Chrome DevTools → Network	이미지 요청이 스크롤 시점에 발생하는지
Performance 탭	스크롤 중 FPS 유지, Paint 최소화
Lighthouse	“Defer offscreen images” 개선 확인
WebPageTest / GTMetrix	Time to Interactive, Total Bytes 감소

Lazy Loading 성능 비교 그래프

• 그래프 설명:
  WordPress 사이트를 기준으로, 네이티브 이미지 Lazy Loading을 적용했을 때와 그렇지 않을 때의 LCP(Largest Contentful Paint, 핵심 콘텐츠가 렌더링되기까지의 시간)을 비교한 결과입니다.
• 좌측(No): Lazy Loading 미적용 시, 브라우저가 모든 이미지를 한꺼번에 로드해 LCP가 더 길게 측정되었습니다.
• 우측(Yes): Lazy Loading 적용 시, 초기 렌더링에 필요한 이미지만 우선 로드되어 LCP가 단축되었습니다.
  👉 Lazy Loading은 페이지 초기 로딩 성능을 향상시키고, 사용자 체감 속도를 개선하는 데 효과적입니다.

---

💤 마치며

Lazy Loading은 “기술적으로 어렵지 않은데, 가장 효과가 큰 최적화”입니다.
이미지 한 장만 줄여도 LCP가 절반 가까이 개선되는 경우도 있습니다.

가장 중요한 원칙은 단 하나입니다.

“사용자가 실제로 보는 순간에만 로드하라.”

필요한 시점에 필요한 리소스를 보내면, 사용자 경험은 자연스럽게 부드럽고 빠른 서비스로 바뀝니다.