sehyun.dev
Vue성능개선

Vue.js에서 vue-lazysizes를 활용한 이미지 레이지 로딩 구현

2025년 7월 18일

Vue-lazysizes란?

vue-lazysizes는 이미지와 기타 미디어 요소의 지연 로딩을 구현하는 라이브러리입니다. 사용자가 스크롤하여 해당 요소가 뷰포트에 들어올 때까지 로딩을 지연시켜 초기 페이지 로딩 속도를 크게 개선할 수 있습니다.

핵심 장점

  • 초기 로딩 속도 개선: 필요한 이미지만 우선 로딩
  • 대역폭 절약: 사용자가 보지 않는 이미지는 로딩하지 않음
  • 사용자 경험 향상: 부드러운 이미지 로딩 애니메이션
  • SEO 친화적: 이미지 로딩이 페이지 렌더링을 차단하지 않음

1. 기본 개념 때려 잡기

  • "필요한 이유는 알겠는데 어떻게 적용 해야하나요? 대안도 있지 않나요?"

    • HTML 표준 속성
    <img loading="lazy" />
브라우저가 지원하는 경우에만 동작.
IE, 일부 레거시 브라우저 미지원, 커스텀 이벤트나 Placeholder 등 고급 기능 부족.
    • 다른 라이브러리
    Intersection Observer 직접 구현: 가장 가볍지만 기능 직접 다 만들어야 함.
vue-lazyload: Vue 2/3에서 인기 많음, 기능 단순.

2. ”lazysizes의 코어 비지니스는 무엇이지?”

  • IntersectionObserver, getElementsByClassName, MutationObserver 등 Web API가 존재하지 않으면 동작하지 않습니다.
1. MutationObserver 활용
DOM에 lazyload 대상 이미지가 동적으로 추가되면 자동 감지해서 다시 관찰 시작.
 
2. IntersectionObserver 활용
inviewObserver:
요소가 뷰포트 안에 들어오는 시점 감지 → 이미지 로드 트리거.
 
preloadObserver:
근처에 있는(즉, 곧 보여질) 요소 미리 감지해서 preloading.

link_preview

3. 적용 비교 전/후

(1) Image lazy-load 적용 전

  • 페이지 진입 후 로딩과 동시에 이미지를 들고 온 모습

image.png

(2) Image lazy-load 적용 후

  • 관측 영역에 도달하여 이미지를 가져온 모습

image.png

4. 마무리

이미지 Lazy-Load를 적용하는 방법에는 여러 가지가 있습니다.

대표적으로 라이브러리 사용 또는 HTML img 태그의 표준 속성(loading="lazy") 활용

이 있습니다. 중요한 것은 프로젝트의 요구사항과 성능 최적화에 부합하는 방식을 선택하는 것 저의 경우는 크롬 62 버전 이하에서도 제공을 해야 했었습니다.

어떤 표준이나 방법을 사용해도 무방하지만,적용하려는 라이브러리나 방식에 문제가 없는지 충분히 검토하는 것이 좋을 것 같습니다.

마지막으로는 Can I use의 Lazy-loading 스펙 사양을 올려드리며 마무리하겠습니다.

image.png