[성능최적화] swiper lazy loading

1. 문제상황

현재 메인 화면에서는 이미지가 swiper로 감싸져있어서, 한번 메인페이지에 진입할 때 화면에 노출되지 않은 이미지들도 한번에 호출된다.

그랬을 때, 이미지의 크기가 크기 때문에 이미지 호출이 느린 경우가 있어 페이지가 느려보인다.

swiper lazy-loading

      <img
        src="path/to/logo-small.png"
        srcset="path/to/logo-large.png 2x"
        loading="lazy"
      />

(참고: https://swiperjs.com/swiper-api#lazy-loading)

swiper를 넘겨서 옆의 이미지가 나왔을 때, 이미지를 불러오는 기능이다.
swiper는 freemode 빼고는 너무 잘 만들어진 라이브러리다
[before]

이전에는 이미지를 옆으로 넘겨도 이미지가 불러와져있다.

[after]

이미지가 swiper를 넘겼을 때 로드되는 모습을 볼 수 있다.

뭔가 스와이퍼를 넘길때 가시성 등을 줘서 조금 더 빨리 불러오면 좋겠는데..! 고민해봐야지