performance review

next/image 최적화는 LCP, CLS, 원격 이미지 정책으로 검증한다

최종 점검은 “속성을 넣었는가”가 아니라 실제 비용이 줄었는가입니다. 첫 화면 시간, 레이아웃 안정성, 외부 이미지 설정을 분리해서 본다.

LCP

첫 화면 대표 이미지만 빠르게 요청되어야 한다.

prioritypreload

CLS

이미지가 늦게 와도 문서 흐름이 밀리지 않아야 한다.

width/heightfill

Remote

외부 이미지는 허용된 출처와 경로만 최적화한다.

remotePatterns
검증 축좋은 상태나쁜 신호다음 조치
LCP hero 이미지가 첫 요청 묶음에 포함된다. 스크롤 아래 이미지도 함께 priority 처리됨 첫 화면 대표 이미지 하나만 남긴다.
CLS 이미지 공간이 로딩 전에 예약된다. 이미지가 뜨며 본문이 아래로 밀림 크기나 부모 높이, aspect ratio를 고정한다.
Remote 허용된 host와 path만 통과한다. 외부 이미지가 400/403으로 실패 `remotePatterns`를 좁고 명확하게 둔다.
KB 모바일에서 작은 후보 이미지를 받는다. 모바일도 데스크톱급 원본 다운로드 `sizes`와 원본 크기를 다시 맞춘다.
images: { remotePatterns: [ { protocol: "https", hostname: "images.example.com", pathname: "/cdn/**" } ] }