fetchpriority와 preload — LCP 이미지를 먼저 불러오게 만들기 | 기술노트

Q: fetchpriority와 preload를 둘 다 써야 하나요?

일반 로 마크업에 이미 존재하면 fetchpriority만으로 충분합니다. CSS 배경 이미지나 JS로 뒤늦게 삽입되는 이미지처럼 파서가 늦게 발견하는 경우에만 preload를 추가하세요.

Q: LCP 요소가 이미지가 아니라 텍스트면요?

그때는 폰트 로딩이 관건입니다. 폰트를 preload하고 font-display: swap 과 폴백 메트릭을 조정해 텍스트가 빨리 그려지게 하세요.

fetchpriority는 리소스의 상대적 우선순위를 브라우저에 직접 알려주는 HTML 속성이다. LCP(Largest Contentful Paint)를 차지하는 대표 이미지에 fetchpriority="high"를 주면, 브라우저가 그 이미지를 다른 리소스보다 먼저 내려받아 첫 화면의 큰 그림이 더 빨리 뜬다.

LCP는 Core Web Vitals 중에서도 "첫인상"을 좌우하는 지표다. 그리고 대부분의 페이지에서 LCP 요소는 히어로 이미지 하나다. 그 한 장을 얼마나 빨리 띄우느냐가 점수의 절반을 가른다.

브라우저는 무엇이 중요한지 처음엔 모른다

HTML을 파싱하는 순간, 브라우저는 이미지가 화면 어디에 얼마나 크게 놓일지 아직 모른다. 그래서 기본적으로 이미지는 '낮음(Low)' 우선순위로 시작한다. 레이아웃이 잡히고 그게 뷰포트 안 큰 요소임을 안 뒤에야 우선순위를 올리는데, 그땐 이미 다른 리소스에 대역폭을 뺏긴 뒤다.

여기서 몇 백 ms가 새어나간다. 특히 모바일·느린 회선에서 뼈아프다. 나도 처음엔 이미지 용량만 줄이면 되는 줄 알았는데, 정작 병목은 "언제 요청되느냐"였다.

해결책 세 가지 손잡이

1. LCP 이미지엔 fetchpriority="high"

<img
  src="/hero.avif"
  width="1200" height="600"
  fetchpriority="high"
  alt="메인 배너"
/>

이 한 줄이 브라우저에게 "이건 처음부터 중요해"라고 못박는다. width/height를 함께 명시해 자리(aspect ratio)를 잡아주면 CLS도 같이 예방된다.

2. 뒤늦게 발견되는 이미지엔 preload

이미지가 CSS 배경이거나 자바스크립트로 나중에 삽입된다면, 파서가 늦게 발견한다. 이럴 땐 <head>에서 미리 예약한다.

<link rel="preload" as="image"
  href="/hero.avif"
  fetchpriority="high">

반응형 이미지라면 imagesrcset과 imagesizes를 함께 붙여 실제로 다운로드될 후보와 일치시켜야 한다. 안 그러면 preload한 파일과 실제 렌더 파일이 달라 이중 다운로드가 난다.

3. 중요하지 않은 것은 낮춰라

대역폭은 한정돼 있다. 첫 화면 밖 이미지엔 loading="lazy"를, 덜 급한 요청엔 fetchpriority="low"를 줘서 히어로 이미지가 우선권을 갖게 비켜준다. 우선순위는 상대적이라, 하나를 올리는 것만큼 나머지를 내리는 것도 효과가 있다.

흔한 실수 모음

실수	결과
LCP 이미지에 loading=lazy	우선순위가 되레 내려가 LCP 악화
여러 이미지에 high 남발	우선순위가 무의미해짐
preload와 실제 srcset 불일치	같은 이미지 두 번 다운로드
width/height 생략	CLS 발생

솔직히 가장 흔한 사고는 첫 번째다. 이미지 전부에 무지성으로 loading="lazy"를 걸어두고 "왜 LCP가 안 좋지?" 하는 케이스. 히어로 이미지만큼은 lazy를 절대 걸면 안 된다.

확인하는 법

적용 전후를 DevTools Network 탭의 Priority 컬럼에서 눈으로 비교하면 된다. 히어로 이미지가 High로 잡히는지, 요청 시점이 앞당겨졌는지 본다. 그다음 Lighthouse나 실사용자 데이터로 LCP 수치를 확인한다. Next.js를 쓴다면 <Image priority>가 내부적으로 fetchpriority high와 preload를 붙여주므로, 위 개념을 이해하고 있으면 왜 그런지 납득이 된다.

자주 묻는 질문

fetchpriority와 preload를 둘 다 써야 하나요?

일반 <img>로 마크업에 이미 존재하면 fetchpriority만으로 충분합니다. CSS 배경 이미지나 JS로 뒤늦게 삽입되는 이미지처럼 파서가 늦게 발견하는 경우에만 preload를 추가하세요.

LCP 요소가 이미지가 아니라 텍스트면요?

그때는 폰트 로딩이 관건입니다. 폰트를 preload하고 font-display: swap과 폴백 메트릭을 조정해 텍스트가 빨리 그려지게 하세요.

high를 여러 개 주면 다 빨라지나요?

아닙니다. 우선순위는 상대적이라 모두 high면 아무것도 우선되지 않습니다. LCP 후보 하나에만 집중하는 게 원칙입니다.

어느 브라우저에서 동작하나요?

크로미움 계열은 오래전부터, 사파리·파이어폭스도 지원해 실무 적용 가능합니다. 미지원 브라우저는 속성을 무시할 뿐 페이지가 깨지지 않습니다.