표시 폭과 전송 폭 비교
카드에서 320px로 보이는 이미지를 2000px 원본으로 받지 않는지 확인합니다.
이미지 최적화 기준
next/image 적용 후에는 네트워크에서 받은 실제 파일 크기, LCP 이미지, 영역 예약 여부를 함께 봐야 합니다.
CLS 방지
width, height 또는 비율이 있는 부모로 이미지 도착 전 공간을 확보합니다.
Layout Shift
LCP 후보 지정
첫 화면 대표 이미지만 priority를 주고 나머지는 기본 지연 로딩을 유지합니다.
Largest Contentful Paint
remotePatterns 관리
외부 도메인은 허용 범위를 좁히고, alt 텍스트는 이미지 의미에 맞게 작성합니다.
next.config.js