핵심 요약
올리브영은 NEXT.JS 이미지 최적화를 런타임에 수행하고, /_next/image 경로로 변환 이미지를 캐시 재사용하며 Accept 헤더에 맞춰 AVIF/WebP를 제공한다. 첫 요청 64ms, 이후 5ms로 빨라진다. WebP: sharp 64ms, Squoosh 228ms; AVIF: sharp 202ms, Squoosh 1.24s. Edge에서 AVIF 지원은 제한적이다.
구현 방법
- /_next/image 경로에서 이미지 최적화 모듈 사용
- dist/.next/cache/images에 캐시 저장 및 재사용
- X-Nextjs-Cache: HIT/MISS로 캐시 여부 확인
- SVG/GIF 예외 및 unoptimized 옵션 가능
주요 결과
- 첫 요청 64ms, 재요청 5ms로 재사용 효과 확인
- WebP: sharp 64ms, Squoosh 228ms
- AVIF: sharp 202ms, Squoosh 1.24s
- Accept에 따른 포맷 결정, Edge의 AVIF 지원 제한 주의
