사이트의 모든 이미지에 지연 로딩을 거는 것은 좋은 습관입니다. 화면 밖 이미지를 미리 내려받지 않으니 초기 로딩이 가벼워집니다. 그런데 딱 하나, 첫 화면의 큰 이미지에는 걸면 안 됩니다. 그 이미지야말로 지금 당장 필요한 이미지이기 때문입니다.
체감 속도는 무엇으로 측정되는가
페이지가 빠르게 느껴지는지는 첫 화면에서 가장 큰 요소가 언제 그려지는가로 잘 설명됩니다. 대체로 히어로 이미지이거나 큰 제목입니다. 나머지가 아무리 빨리 도착해도 그 큰 요소가 늦으면 페이지는 느리게 느껴집니다.
그래서 첫 화면 이미지에 대해서는 질문이 하나로 좁혀집니다 — 브라우저가 이 이미지의 존재를 얼마나 빨리 알아차리는가. 요청이 늦게 시작되면 파일이 아무리 작아도 늦게 그려집니다.
세 가지만 지키면 됩니다
첫째, 마크업 안에 평범한 이미지 태그로 둡니다. HTML 에 직접 적힌 이미지는 브라우저가 문서를 훑으면서 즉시 발견해 요청을 시작합니다. 반면 스타일시트의 배경 이미지는 CSS 를 받아 해석한 뒤에야, 스크립트가 넣는 이미지는 스크립트가 실행된 뒤에야 발견됩니다.
둘째, 지연 로딩을 걸지 않고 우선순위를 높입니다. 첫 화면 이미지는 지금 필요한 자원이라고 브라우저에 알려 주는 편이 좋습니다.
<!-- 첫 화면 히어로 -->
<img src="/img/hero-1200.webp"
srcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w, /img/hero-1800.webp 1800w"
sizes="(min-width: 992px) 60vw, 100vw"
width="1200" height="750"
fetchpriority="high"
alt="…">
<!-- 화면 아래 이미지는 반대로 -->
<img src="/img/section.webp" loading="lazy" decoding="async"
width="800" height="500" alt="…">셋째, 크기 속성을 반드시 적습니다. width 와 height 가 있으면 브라우저가 이미지 도착 전에 자리를 비워 둡니다. 없으면 이미지가 도착하는 순간 그만큼 아래 내용이 밀려나 화면이 튑니다 — 폰트 교체로 생기는 흔들림과 같은 종류의 문제입니다.
미리 받기는 만능이 아닙니다
이미지가 CSS 배경이거나 슬라이더 안에 있어 구조를 바꾸기 어려울 때는 미리 받기(preload) 로 발견 시점을 앞당길 수 있습니다. 다만 여기에는 함정이 있습니다 — 여러 개를 미리 받으면 서로 경쟁합니다. 폰트 여러 조각과 이미지 여러 장을 동시에 미리 받으면, 정작 가장 큰 요소가 밀립니다.
가장 빠른 히어로 이미지는 없는 이미지입니다
마지막으로 디자인 쪽 선택지를 하나 남깁니다. 첫 화면을 타이포그래피와 색면으로 구성하면 큰 이미지 요청 자체가 사라집니다. 그러면 가장 큰 요소는 제목 텍스트가 되고, 텍스트는 폰트만 제때 도착하면 이미지보다 훨씬 빨리 그려집니다.
사진이 반드시 필요한 사업이라면 물론 이미지를 씁니다. 다만 “히어로에는 큰 사진이 있어야 한다” 는 것은 관습이지 요건이 아닙니다 — 첫 화면에 무엇을 둘지는 성능 결정이기도 하다는 점을 디자인 단계에서 함께 생각하면 선택지가 넓어집니다.
같은 주제를 점검표 형태로 정리한 글이 첫 화면 이미지 프리로드 점검표에 있고, 이미지 최적화 전반은 이미지와 미디어 연재에서 다룹니다. 실제 페이지의 병목을 측정해 고치는 작업은 최적화 지원 사업에 포함됩니다.