이미지·스크립트·폰트가 렌더링에 미치는 영향을 줄입니다.
HTML 성능은 파일 크기뿐 아니라 어떤 리소스를 언제 발견하고 어떤 우선순위로 내려받는지에 좌우됩니다.
img의 width·height는 초기 비율을 알려 레이아웃 이동을 줄이고 loading=lazy는 첫 화면 밖 이미지에 사용합니다.
script defer는 HTML 파싱과 병렬로 받고 DOM 완성 뒤 순서대로 실행합니다. type=module도 기본적으로 지연 실행됩니다.
preload와 fetchpriority는 정말 중요한 첫 화면 자원에 제한해 네트워크 우선순위 경쟁을 만들지 않습니다.
첫 화면 핵심 이미지까지 무조건 lazy로 두면 LCP가 늦어질 수 있습니다.
직접 바꿔보세요첫 이미지에는 크기와 높은 우선순위를, 아래 이미지는 lazy를 적용한 이유를 설명하세요.