웹 성능을 좌우하는 중요한 요소 중 하나가 바로 Lazy Loading입니다. Lazy Loading은 필요한 자원만을 로드함으로써 초기 로드 속도를 개선하고, 사용자 경험을 향상시키는 기법입니다. 이 글에서는 Lazy Loading의 개념, 적용 방법, 그리고 최적화 전략에 대해 알아보겠습니다.

Lazy Loading이란?

Lazy Loading은 웹 페이지에서 필요한 자원(이미지, 비디오 등)만을 사용자가 실제로 필요로 할 때 로드하는 방식입니다. 예를 들어, 사용자가 페이지를 스크롤하여 특정 이미지가 뷰포트에 들어오면 그때 해당 이미지를 로드하는 것입니다. 이를 통해 초기 로딩 시간을 줄이고, 데이터 사용량을 최적화할 수 있습니다.

Lazy Loading 적용 방법

Lazy Loading을 적용하는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 loading 속성을 사용하는 것입니다.

<img src="image.jpg" loading="lazy" alt="예시 이미지">
loading="lazy" 속성을 추가하면 브라우저가 해당 이미지를 뷰포트에 가까워질 때 로드하도록 지시합니다. 그러나 이 방법은 모든 브라우저에서 지원되지 않으므로, JavaScript를 활용한 더 일반적인 방법도 소개하겠습니다.

Intersection Observer API 사용하기

Intersection Observer API를 사용하면 더 세밀하게 Lazy Loading을 구현할 수 있습니다. 이 API는 요소가 뷰포트에 들어오거나 나갈 때 이벤트를 감지할 수 있게 해줍니다.

<img class="lazy" data-src="image.jpg" alt="예시 이미지">
const lazyImages = document.querySelectorAll('.lazy');

const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            imageObserver.unobserve(img);
        }
    });
});

lazyImages.forEach(image => {
    imageObserver.observe(image);
});

위의 코드에서 data-src 속성을 사용하여 실제 이미지 URL을 저장하고, 뷰포트에 이미지가 들어올 때 src 속성으로 설정하여 이미지 로딩을 수행합니다.

Lazy Loading 최적화 전략

Lazy Loading을 구현한 후에도 몇 가지 최적화 전략을 통해 성능을 더욱 개선할 수 있습니다.

  1. Placeholder 사용하기: 이미지가 로드될 때까지 빈 공간을 표시하는 것이 좋습니다. 이를 통해 페이지 레이아웃의 안정성을 유지할 수 있습니다.
    2.    .lazy {
       background: #f0f0f0; / 회색 배경으로 자리잡게 /
       min-height: 200px; / 최소 높이 설정 /
   }
  2. 로딩 애니메이션 추가하기: 이미지가 로드되는 동안 로딩 스피너나 애니메이션을 추가하여 사용자 경험을 개선할 수 있습니다.
  3. 적절한 뷰포트 미리 로딩: 사용자가 페이지를 스크롤하기 전에, 뷰포트의 경계 설정을 통해 조금 더 미리 로드하도록 설정할 수 있습니다. 이러면 스크롤 시 사용자 경험이 매끄럽게 유지됩니다.
    4.    const options = {
       root: null, // 뷰포트
       rootMargin: '200px', // 미리 로드할 거리
       threshold: 0.1 // 10%가 보일 때 로드
   };
   const imageObserver = new IntersectionObserver((entries, observer) => {
       // ... 위와 동일
   }, options);
  4. 최적의 이미지 포맷 사용하기: WebP와 같은 현대적인 이미지 포맷을 사용하면 파일 크기를 줄여 페이지 로딩 속도를 개선할 수 있습니다.
  5. 서버 측에서 Cache-Control 헤더 설정: 이를 통해 사용자가 동일한 이미지를 여러 번 로드하지 않도록 하여 성능을 개선할 수 있습니다.

마무리

Lazy Loading은 웹 페이지의 성능을 크게 향상시킬 수 있는 강력한 기법입니다. 올바른 구현과 최적화를 통해 사용자 경험을 개선하고, 페이지 로딩 속도를 빠르게 할 수 있습니다. 위에서 설명한 다양한 방법과 전략을 활용하여 Lazy Loading을 적용해 보시기 바랍니다. 성능이 개선되면 사용자 이탈률이 줄어드는 것은 물론, SEO에도 긍정적인 영향을 미칠 것입니다.