Lazy Loading 적용기: 성능 최적화와 사용자 경험 향상

문제 발생

처음에는 이미지가 한 번에 로드되도록 구현되었습니다. 이로 인해 사용자가 페이지를 처음 접속했을 때, 모든 이미지가 동시에 로드되면서 페이지 로딩 시간이 길어졌습니다.

특히 이미지 미리보기에서 이미지 개수를 기준으로 스크롤 기능을 구현하였는데, 사용자가 스크롤을 할 경우 이미지 로딩 시간이 길어져 모든 이미지가 표시되지 않은 상태에서 스크롤을 움직여 제대로 동작하지 않는 문제가 발생하였습니다.

 

해결 방법

1. Spinner 추가

처음에는 이 문제를 해결하기 위해 Spinner를 추가하여 모든 이미지가 로딩되어 출력되는 동안 스크롤을 조작할 수 없게 처리를 하였습니다.

하지만 이 방법의 문제점은 출력되는 이미지의 수가 많아질수록 사용자의 입장에서는 해당 Spinner가 무한 로딩으로 느껴지고 오류로 생각된다는 문제가 있었습니다.

 

2. Lazy Loading 적용

Lazy Loading은 사용자가 실제로 해당 리소스를 볼 때까지 로드를 지연시키는 방법으로, 페이지가 처음 로드될 때 불필요한 리소스를 미리 로드하지 않고 사용자가 스크롤을 하거나 필요한 콘텐츠에 접근할 때 해당 리소스를 로드하는 방식입니다.

 

`Intersection Observer` API를 사용하여 미리보기 페이지에서 스크롤할 때 해당 이미지가 보이면 그때 로드되도록 설정하였습니다. 

async function lf_show_select_preview(files) {
  ...

  // Lazy Loading 로직
  const lazyLoadImages = document.querySelectorAll('.lazy-load');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute('data-src');  // 실제 이미지 경로로 로드
        img.removeAttribute('data-src');  // data-src 속성 제거
        observer.unobserve(img);  // 이미지를 한 번만 로드하도록 옵저버에서 제거
      }
    });
  });

  // Lazy Loading을 적용할 이미지에 대해 옵저버 관찰 시작
  lazyLoadImages.forEach(img => {
    observer.observe(img);
  });

  ...
}

 

해결 후 개선된 점

1. 페이지 로딩 속도 개선

Lazy Loading을 적용함으로써 초기 로딩 시 불필요한 이미지를 미리 로드하지 않게 되어, 페이지 로딩 속도가 크게 향상되었습니다. 특히 이미지가 많은 미리보기 페이지에서 로딩 시간이 눈에 띄게 줄어들었고, 사용자들이 더 빠르게 페이지를 이용할 수 있게 되었습니다.

 

2. 사용자 경험 향상

페이지가 빠르게 로드되므로, 사용자는 대기 시간이 줄어들고 더 빠르게 콘텐츠에 접근할 수 있게 되었습니다. 또한, 스크롤을 내려갈 때마다 이미지가 순차적으로 로드되므로 페이지가 느려지거나 멈추는 현상이 줄었습니다. 이로 인해 전체적인 사용자 경험이 향상되었습니다.

 

 

Lazy Loading을 통해 웹 페이지의 성능을 최적화하고 사용자 경험을 향상할 수 있었습니다. 이러한 방법은 이미지나 동영상과 같은 리소스가 많은 페이지에서 특히 효과적일 것 같습니다.