230930 개발일지 TIL - React에서 Swiper의 Lazy Loading 활용

프로젝트를 하던 중 성능 최적화를 위해 Swiper의 Lazy Loading를 활용하기로 했다.

React에서 Swiper의 Lazy Loading 활용

Lazy loading은 웹 페이지의 로딩 속도를 향상시키기 위한 기술로, 필요할 때만 콘텐츠(이미지, 비디오 등)를 로드하는 방식을 말한다. 웹 페이지의 초기 로딩 시간을 줄이고, 사용하지 않는 콘텐츠에 대한 네트워크 대역폭 사용을 방지하므로 전반적인 성능 개선에 도움이 된다.

Swiper7 이상 버전에서는 Lazy모듈이 기본적으로 내장되어 있으므로 별도로 import 할 필요가 없다. 따라서 lazy prop만 Swiper 컴포넌트에 전달하면 된다.

<Swiper
  modules={[Navigation,Pagination ,Scrollbar,A11y]}
  spaceBetween={20}
  slidesPerView={2.2}
  lazy={{ loadPrevNext: true }}
>

위 코드에서 lazy={{ loadPrevNext: true }} 옵션은 현재 활성화된 슬라이드 외에도 이전 슬라이드와 다음 슬라이드의 콘텐츠를 미리 로딩하도록 설정한다.

즉, 사용자가 슬라이더를 조작하여 다음이나 이전 슬라이드로 넘어갈 때, 해당 슬라이드의 콘텐츠가 이미 로딩되어 있으므로 화면 표시 지연 없이 바로 보여줄 수 있다. 이렇게 하면 웹사이트나 앱의 사용자 경험이 크게 향상된다.

주의점
다만 모든 이미지를 한 번에 로딩하는 것보다는 좋지만 여전히 추가적인 네트워크 요청과 데이터 사용량을 발생시키므로 신중하게 사용해야 한다.

Lazy loading은 성능 최적화의 한 방법이지만 모든 상황에 적합한 것이 아니라 사용자의 네트워크 환경, 웹사이트의 콘텐츠 유형 등을 고려하여 적절하게 활용해야 한다.