Next.js 이미지 최적화가 느려진 원인을 원본 크기부터 확인한 기록

처음에는 Next.js 문제가 아니라고 생각했다

상품 사진 페이지에서 목록은 빨랐지만 상세 화면만 늦었다. 변환 작업 때문이라고 짐작했는데 Network 탭의 WebP도 1MB가 넘었고 원본 JPEG는 8MB였다. 화면에는 가로 640px로만 보이는 상황이었다. CSS의 width만 줄이는 것과 전송 파일을 줄이는 것은 다른 문제였다.

요청 폭부터 맞췄다

fill 카드에서 sizes를 빠뜨린 것이 첫 수정이었다.

<div className="relative aspect-video">
  <Image
    src={photo.url}
    alt={photo.alt}
    fill
    sizes="(max-width: 768px) 100vw, 640px"
    className="object-cover"
  />
</div>

원본 업로드도 긴 변 2400px로 제한했다. 화면 컴포넌트만 고쳐서는 이미 큰 파일을 올리는 비용이 남기 때문이다. 사진은 품질 75부터 비교했지만 글자가 있는 UI 캡처는 PNG 유지 여부를 따로 확인했다.

제가 남긴 기준

모바일 첫 이미지 300KB 안팎, 상세 원본은 필요할 때만 다운로드하도록 했다.

• sizes가 실제 레이아웃과 맞는가
• 원본 업로드 상한이 있는가
• Content-Type과 응답 크기를 확인했는가
• CDN이 이전 변환 파일을 주고 있지 않은가

변환 라이브러리를 바꾸기 전에 요청 폭, 원본 크기, 레이아웃을 먼저 맞추니 원인이 훨씬 빨리 좁혀졌다.