Image Lazy Loading을 활용한 최적화

시작하면서

웹 성능 최적화는 현대 웹 개발에서 가장 중요한 과제 중 하나입니다. 특히 이미지가 많은 웹사이트의 경우 이미지를 한번에 로드하여 페이지 로딩 시간을 늘리고 좋지 않은 사용자 경험을 제공합니다. 페이지 로딩 시간을 단축하고 사용자 경험을 개선하는 것이 매우 중요합니다. 이를 위한 효과적인 기법 중 하나가 바로 '이미지 지연 로딩(Image Lazy Loading)'입니다.

이번에는 이미지 지연 로딩의 개념, 구현 방법, 그리고 이를 통해 얻을 수 있는 이점에 대해 자세히 알아보겠습니다.

Image Lazy Loading 이란?

이미지 지연 로딩은 웹페이지의 초기 로딩 시 모든 이미지를 한 번에 불러오지 않고, 사용자가 viewport에 이미지가 들어올 때 해당 이미지를 로드하는 기술입니다. 이 기법을 통해 초기 페이지 로딩 시간을 크게 단축하고, 불필요한 데이터 사용을 줄일 수 있습니다.

Image Lazy Loading의 이점

초기 로딩 시간 단축

• 페이지를 처음 로드할 때 필요한 리소스만 불러오기 때문에 초기 로딩 속도가 빨라집니다.
• 특히, 이미지가 많은 페이지(예: 블로그, 전자 상거래 웹사이트)에서 유용합니다.

네트워크 트래픽 절감

• 사용자가 화면에 표시되지 않는 이미지를 다운로드하지 않으므로 불필요한 데이터 사용을 줄입니다.
• 모바일 사용자에게 적합한 최적화 방법입니다.

사용자 경험 개선

• 스크롤을 통해 콘텐츠를 탐색하는 동안 점진적으로 로드되는 방식은 가독성을 높이고 체감 성능을 향상시킬 수 있습니다.

SEO 최적화

• 구글은 페이지 로딩 속도를 검색 순위에 반영하는데 Lazy Loadin을 통해 로딩속도를 개선하고 SEO 성과도 개선될 수 있습니다.

Lazy Loading 다루는 방법

HTML과 JavaScript를 사용하여 Lazy Loading을 구현할 수 있습니다.

HTML5 img 태그속성으로 지연 시키기

HTML5의 img 태그에서 loading 속성을 사용하면 Lazy Loading을 쉽게 구현할 수 있습니다.

<img src="image.webp" alt="image" loading="lazy"> 

img 태그에서 제공하는 loading 속성에 lazy 값을 설정해주면 뷰포트 일정 거리 안으로 들어오면 이미지를 불러옵니다.

• eager : eager는 loading 속성의 기본 설정 값으로 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다.
• lazy : lazy 속성은 이미지가 뷰포트 일정 거리 안으로 들어오면 이미지를 불러옵니다. 스크롤링시 예상 가능한 범위내에서 이미지를 호출함으로써 사용자에게 좋은 경험을 제공 할 수 있고 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다.

현재 대부분의 최신 브라우저에서 loading="lazy" 속성을 지원하지만, 일부 구형 브라우저에서는 지원하지 않을 수 있습니다.

Intersection Observer API

JavaScript에서 제공하는 Intersection Observer API를 활용하여 Lazy Loading을 구현할 수 있습니다. Intersection Observer API는 요소가 viewport안에 들어올때 이벤트를 감지해 이미지 로드를 시작 할 수 있도록 도와줍니다.

<img class="lazy" data-src="image.jpg" alt="Lazy loaded image">

const lazyLoadImages = () => {
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        image.classList.remove("lazy");
        observer.unobserve(image);
      }
    });
  });

  const lazyImages = document.querySelectorAll('img.lazy');
  lazyImages.forEach(img => imageObserver.observe(img));
};

// DOM이 로드된 후 실행
document.addEventListener('DOMContentLoaded', lazyLoadImages);

• Intersection Observer를 생성하여 이미지가 뷰포트에 진입하는 시점을 감지합니다.
• 'lazy' 클래스를 가진 모든 이미지 요소를 선택하여 Observer에 등록합니다.
• 이미지가 뷰포트에 진입하면 (isIntersecting이 true), data-src 속성의 값을 src 속성으로 이동시켜 이미지를 로드합니다.
• 이미지 로드 후, 'lazy' 클래스를 제거하고 해당 이미지에 대한 관찰을 중단합니다.

Image Lazy Loading 적용시 주의사항

Image Lazy Loading은 웹페이지 성능 향상시키지만 잘못 적용된다면 좋지 못한 사용자 경험을 제공할 수 있습니다. Lazy Loading 적용시 주의해야 할 사항은 다음과 같습니다.

초기 컨텐츠 가시성 보장

• Lazy loading으로 인해 중요한 콘텐츠, 초기에 보여야하는 이미지가 초기에 로드 되지 않을수 있기 때문에 필수 이미지 바로 로드 될수 있게 설정해야합니다.
  

사용자 경험 고려

• 사용자 스크롤 중 이미지가 늦게 로드되거나 화면 깜빡임이 발생 할 수 있기 때문에 placeholder를 사용하여 이미지 로드시 빈 공간을 대체하거나 스켈레톤 UI로 사용자 경험을 개선합니다

SEO 및 검색엔진 친화성

• Lazy Loading은 이미지나 콘텐츠가 검색 엔진에 의해 크롤링 되지 않을 수 있으며 SEO에 나쁜영향을 줍니다. 이 문제를 해결하기 noscript 태그를 사용해 기본 이미지를 제공하여 콘텐츠를 읽을 수 있도록 합니다.

성능 테스트

• Lazy Loading을 적용하였다고 무조건 성능이 개선되었다고 볼 수 없습니다. Lighthouse를 사용하여 FCP(First Contentful Paint)와 LCP(Largest Contentful Paint)가 개선되었는지 확인합니다.

마치면서

성능 최적화에 대해 공부하면서 Image lazy Loading에 대해 새롭게 알게되었습니다. 다양한 기업들이 Image Lazy Loading을 적용하고 성능 개선한 사례도 찾아 볼 수 있습니다. 이처럼 Image Lazy Loading은 웹사이트에서 필수적인 성능 최적화 기법 중 하나로 자리 잡았습니다.