next/image 최적화: LCP·CLS·원격 이미지 설정 기준

이미지 역할 분리

LCP hero 이미지와 아래쪽 보조 이미지는 로딩 전략이 다르다.

critical vs lazy

width/height 또는 fill 컨테이너 비율로 레이아웃 공간을 먼저 확보한다.

prevent CLS

반응형 레이아웃에서 실제 표시 폭을 알려 불필요하게 큰 파일 다운로드를 막는다.

responsive

remotePatterns로 허용 도메인과 경로를 좁혀 외부 이미지 최적화 범위를 통제한다.

security

LCP

첫 화면 대표 이미지는 priority와 빠른 서버 응답이 중요하다. hero 이미지를 lazy로 두면 LCP가 밀릴 수 있다.

above the fold

CLS

이미지 영역이 늦게 생기면 화면이 흔들린다. 고정 크기나 aspect-ratio로 공간을 예약한다.

layout stability

Remote

외부 이미지는 remotePatterns 없이 최적화할 수 없다. 도메인 전체 허용보다 프로토콜, hostname, pathname을 좁힌다.

allowlist

sizes fill 이미지는 실제 breakpoint에 맞는 sizes를 가진다.

alt 의미 있는 이미지는 설명 alt, 장식 이미지는 빈 alt를 사용한다.

LCP 측정 최적화 뒤 Lighthouse와 실제 필드 지표를 구분해 본다.

images: {
  remotePatterns: [{ protocol: "https", hostname: "images.example.com" }]
}