이미지 Lazy Loading 최적화

문제 상황

  • 모든 슬라이드 이미지를 한 번에 로드하면 초기 로딩 시간이 길어짐
  • 하지만 단순 lazy loading만 적용하면 슬라이드 전환 시 이미지 로딩 지연 발생

    • 원인

  • Swiper에서 모든 슬라이드가 DOM에 존재하면 Next.js가 모두 미리 로드
  • loading="lazy" 속성만으로는 세밀한 제어 불가능

    • 해결 방법

  • 조건부 렌더링으로 필요한 이미지만 로드 (현재 슬라이드 +2)

    • 결과

  • 초기 로딩: 3개 이미지만 로드 (0, 1, 2번 슬라이드)
  • 슬라이드 전환 시: 미리 다다음 이미지까지 로드하여 부드러운 UX
  • 네트워크 요청 최소화 및 메모리 사용량 감소
  • 한 번 로드된 이미지는 캐시되어 뒤로가기 시에도 즉시 표시