Lazy Loading 이미지 최적화 개념 이해하기

Lazy Loading은 이미지나 리소스를 미리 로딩하지 않고, 사용자의 화면(Viewport)에 진입했을 때 로딩하는 웹 최적화 기법이다. 초기 페이지 로딩 속도를 빠르게 만들고, 불필요한 네트워크 자원을 줄여 성능을 향상시키는 데 중요한 역할을 한다.

Lazy Loading을 사용하는 이유

초기 페이지 로딩 속도 개선

화면에 보이지 않는 이미지를 처음부터 모두 로딩하면 브라우저가 과부하를 일으킨다. Lazy 기법을 사용하면 필요한 순간에만 로딩이 시작되어 체감 속도가 크게 향상된다.

트래픽 절약 및 데이터 낭비 감소

특히 모바일 환경에서 사용자가 끝까지 스크롤하지 않을 경우, 로딩조차 되지 않아 데이터 낭비를 막을 수 있다. 썸네일이 많은 페이지에서 Lazy 기법은 필수에 가깝다.

구글 SEO 측면에서 유리

구글은 웹 성능 지표를 중요하게 평가하며, 이미지 최적화는 핵심 항목 중 하나다. Lazy Loading은 LCP, CLS와 같은 지표를 개선하며 SEO 전체 점수 상승으로 이어진다.

IntersectionObserver를 활용한 Lazy Loading 구현

가장 널리 사용되고 안정적인 방식은 IntersectionObserver를 활용한 Lazy 로딩이다. 성능도 뛰어나고, 다양한 효과를 손쉽게 적용할 수 있다.

기본 이미지 태그 구조

data-src 기반 이미지 로딩

Lazy 기법에서는 src 대신 data-src에 실제 이미지 경로를 넣고, src에는 1px 투명 이미지 같은 더미 데이터를 넣는다. 화면에 보일 때 data-src를 src로 바꿔주는 방식이다.

<img 
    class="lazy"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
    data-src="/data/img/sample.webp"
    alt="썸네일"
    width="203"
    height="203">

IntersectionObserver 스크립트

스크롤 인식 후 이미지 로딩

Observer는 이미지가 뷰포트에 들어오는 순간을 감지한다. 그 타이밍에 data-src 값을 실제 src로 교체하면서 부드러운 fade-in 효과를 줄 수 있다.

const lazyImages = document.querySelectorAll('img.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.isIntersecting){
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('fade-in');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(img => lazyLoad(img));

Lazy Loading 적용 시 고려해야 할 옵션

Lazy 기법과 함께 사용하면 좋거나, 반대로 충돌될 수 있는 옵션들이 있다. 이미지가 많을수록 옵션을 정리해두면 유지보수가 쉬워진다.

추천 옵션 정리

width, height 명시

이미지 비율 공간을 미리 확보해 CLS를 방지한다. 구글 성능 점수 향상에 직접적 영향을 준다.

alt 속성 필수

이미지 SEO, 접근성, 툴팁까지 고려하면 alt는 반드시 포함하는 것이 좋다.

loading="lazy" 추가 여부

data-src 기반 Lazy 기법에서는 실질적으로 큰 의미는 없다. 다만 JS 오류 시 브라우저가 fallback으로 활용할 수 있어 추가해도 무방하다.

fetchpriority="high"는 비추천

스크롤 아래에 위치한 썸네일에 high 우선순위를 주면 성능이 오히려 저하될 수 있다. 대표 이미지 외에는 사용하지 않는 것이 좋다.

Lazy Loading 기법 활용 시 장점 요약

Lazy Loading은 단순한 효과를 넘어, 사이트 구조 전체의 성능을 결정하는 핵심 기술이다. 특히 이미지가 많은 블로그나 카드 레이아웃 페이지에서는 반드시 적용해야 한다.

핵심 요약

• 초기 로딩 속도 개선 • 트래픽 절감 • 사용자 경험 향상 • 구글 SEO 점수 개선 • 유지보수 용이

Lazy 기법을 꾸준히 적용하면 사이트 전체가 쾌적해지고, 다양한 페이지에서도 동일한 퍼포먼스를 유지할 수 있다. 앞으로 발전하는 웹 환경에서도 필수적인 기술이라 할 수 있다.