핵심 요약
카카오엔터테인먼트가 Next/Image를 도입해 스테이지 홈의 이미지 로딩을 최적화하고, 50개 이미지 중 화면에 보이는 26개만 로드하도록 바꿨으며 전체 용량을 25MB에서 589KB로 대폭 감소시켰습니다.
구현 방법
- Next/Image 도입으로 lazy loading 자동 적용 및 로딩 대상 이미지 축소
- viewport에 보이는 영역에 맞춘 srcSet, 디바이스별 최적 이미지 서빙
- webp 포맷 변환 및 placeholder로 로딩 안정성 확보
- 캐시 정책 설정(next.config.js의 images.minimumCacheTTL 또는 CDN Cache-Control)
주요 결과
- 총 로드 용량 25MB → 589KB로 감소
- 개별 이미지 500KB → 40KB로 축소
- 로딩 시간 1.11s → 386ms로 대폭 단축
