이미지 레이지 로딩(Lazy Loading): 초기 로딩 속도를 높이는 고성능 기법

웹 페이지의 전체 용량 중 이미지가 차지하는 비중은 평균 60~70%에 달합니다. 모든 이미지를 페이지 로드 시점에 한꺼번에 내려받는 것은 사용자에게 불필요한 데이터 소모와 느린 화면 렌더링을 강요하는 일입니다. eleslog.work에서 적용한 Intersection Observer API 기반의 레이지 로딩 전략을 소개합니다.

1. 레이지 로딩(Lazy Loading)이란?

레이지 로딩은 페이지 내에 있는 이미지들을 한 번에 불러오지 않고, 사용자가 스크롤을 내려 해당 이미지가 뷰포트(Viewport)에 들어오는 시점에 로딩을 시작하는 기술입니다. 이를 통해 LCP(Largest Contentful Paint) 점수를 개선하고 초기 데이터 전송량을 획기적으로 줄일 수 있습니다.

2. 고전적 방식의 한계: scroll 이벤트의 늪

과거에는 window.onscroll 이벤트를 사용하여 매번 이미지의 위치와 스크롤 위치를 계산했습니다. 하지만 이 방식은 스크롤 시마다 수많은 연산이 발생하여 메인 스레드에 부하를 주고, 소위 '렉(Lag)' 현상을 유발하는 원인이 되었습니다.

// 지양해야 할 고전적 방식
window.addEventListener('scroll', () => {
  const rect = image.getBoundingClientRect();
  if (rect.top < window.innerHeight) {
    image.src = image.dataset.src;
  }
});
        

3. 현대적 해법: Intersection Observer API

Intersection Observer는 브라우저 수준에서 요소와 뷰포트의 교차 영역을 감지하는 API입니다. 자바스크립트의 메인 스레드와 별개로 동작하여 성능 최적화가 극대화됩니다.

실전 구현 코드

const images = document.querySelectorAll('img[data-src]');

const options = {
  root: null, // 뷰포트를 기준으로 감지
  rootMargin: '0px 0px 200px 0px', // 진입 200px 전에 미리 로딩 시작
  threshold: 0 // 조금이라도 보이면 실행
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 실제 이미지 경로 주입
      img.removeAttribute('data-src');
      observer.unobserve(img); // 감지 종료
    }
  });
}, options);

images.forEach(img => observer.observe(img));
        

4. UX를 고려한 'Blur-up' 기법

이미지가 로드되기 전 빈 공간이 보이는 것은 사용자에게 불안정한 느낌을 줍니다. eleslog.work에서는 아주 작은 저화질 이미지를 먼저 보여주고 CSS 필터로 흐리게 처리(Blur)한 뒤, 원본 이미지가 로드되면 선명하게 교체하는 방식을 사용하여 부드러운 전환 효과를 구현했습니다.

5. 브라우저 기본 기능 활용: loading="lazy"

최신 브라우저(Chrome 77+, Firefox 등)는 별도의 스크립트 없이도 loading="lazy" 속성 하나로 레이지 로딩을 지원합니다. 하지만 더 세밀한 컨트롤(애니메이션 효과, 사전 로딩 거리 조절 등)을 원한다면 Intersection Observer와 병행하는 것이 가장 좋습니다.

<img src="image.jpg" loading="lazy" alt="최적화된 이미지" />
        

마치며: 성능이 곧 서비스의 질이다

로딩 속도가 1초 늦어질 때마다 사용자 이탈률은 기하급수적으로 증가합니다. 이미지 최적화는 단순히 기술적 성취를 넘어 비즈니스의 성공을 결정짓는 필수 요소입니다. 다음 포스팅에서는 차세대 이미지 포맷인 WebP와 AVIF를 활용하여 이미지 용량을 80% 이상 줄이는 방법에 대해 알아보겠습니다.