지연된 로딩(Lazy Loading)

Lazy Loading(지연 로딩)은 웹페이지의 리소스를 필요할 때만 로드하는 방식입니다.
즉, 사용자가 특정 콘텐츠를 요청하거나 스크롤을 내릴 때 필요한 데이터나 이미지를 불러오도록 설계되어 있습니다.

일반적으로 웹페이지가 로드될 때 모든 콘텐츠를 한 번에 다운로드하면 초기 로딩 속도가 느려지고, 불필요한 데이터 사용이 증가할 수 있습니다.
Lazy Loading을 적용하면 필요한 데이터만 로드하여 성능을 최적화하고 사용자 경험(UX)을 개선할 수 있습니다.

예시

1. Lazy Loading과 Eager Loading 비교

로딩 방식	설명	장점	단점
Lazy Loading	사용자가 필요한 시점에 리소스를 로드	초기 로딩 속도 향상, 성능 최적화	일부 콘텐츠가 늦게 나타날 수 있음
Eager Loading	모든 리소스를 한 번에 로드	콘텐츠 표시 속도 빠름	초기 로딩 속도가 느려짐

2. Lazy Loading 이미지 예제 (HTML)

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="지연 로딩 이미지">

loading="lazy" 속성을 사용하면 브라우저가 이미지를 필요한 시점에 로드.

3. JavaScript를 활용한 Lazy Loading

document.addEventListener("DOMContentLoaded", function () {
  let images = document.querySelectorAll("img[data-src]");

  let lazyLoad = function () {
    images.forEach(img => {
      if (img.getBoundingClientRect().top < window.innerHeight) {
        img.src = img.getAttribute("data-src");
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
});

사용자가 페이지를 스크롤할 때, 화면에 보이는 이미지만 로드하는 방식.

활용 범위

1. 웹사이트의 이미지 로딩 최적화

• 블로그, 이커머스 사이트에서 많은 이미지를 한 번에 로드하는 대신, 사용자가 필요한 시점에 로드.
• 예제: 온라인 쇼핑몰의 상품 목록 페이지.

2. 동적 콘텐츠 로드

• 유튜브, 인스타그램처럼 무한 스크롤 방식의 페이지에서 추가 콘텐츠를 스크롤 시점에 로드.
• 예제: 피드 기반 SNS 플랫폼.

Lazy loading 사용시 주의할 점

1. SEO(검색 엔진 최적화) 문제

• Lazy Loading된 콘텐츠는 검색 엔진 크롤러가 제대로 인식하지 못할 수 있음.
• 해결책: <noscript> 태그 사용 또는 SSR(Server-Side Rendering) 적용.

2. 사용자 경험(UX) 고려

• 사용자가 빠르게 스크롤할 경우, 이미지가 늦게 로드되어 UX가 저하될 가능성이 있음.
• 해결책: Placeholder(플레이스홀더) 이미지 사용.

3. 브라우저 호환성 문제

해결책: JavaScript로 폴리필(Polyfill) 적용.

일부 구형 브라우저(IE 11 등)에서는 loading="lazy" 속성이 지원되지 않음.

---

Lazy Loading은 웹페이지의 성능을 최적화하고, 불필요한 리소스 로드를 방지하여 사용자 경험을 개선하는 중요한 기술입니다.
특히 이미지, 비디오, JavaScript 코드 로딩을 최적화하면 초기 로딩 속도를 개선하고 네트워크 사용량을 줄일 수 있습니다.