LCP 향상: fetchpriority='high'에 대한 가이드

Source: Dev.to

fetchpriority란?

fetchpriority는 리소스의 상대적 중요성을 브라우저에 알려주는 힌트입니다. 브라우저가 무엇을 먼저 로드할지 대체로 잘 추측하지만, 텔레파시를 하는 것은 아닙니다. fetchpriority="high"를 추가하면 중요한 자산을 로딩 큐의 앞쪽으로 이동시킬 수 있습니다.

브라우저가 페이지를 파싱할 때 각 리소스에 우선순위 수준(낮음, 보통, 높음, 매우 높음)을 할당합니다:

• 이미지: 보통 낮음 또는 보통
• 스크립트와 CSS: 보통 높음

우선순위를 수동으로 설정하면 이러한 기본값을 무시하고, “히어로” 요소가 덜 중요한 작업 뒤에 끼어들지 않게 합니다.

Largest Contentful Paint (LCP) 에 대한 영향

LCP는 가장 큰 이미지나 텍스트 블록이 화면에 보이게 되는 시점을 측정합니다. 히어로 이미지가 LCP 요소라면 fetchpriority="high"는 다음을 가능하게 합니다:

• 대기 시간 감소 – 브라우저가 이미지를 더 빨리 다운로드하기 시작합니다.
• 대역폭 최적화 – 해당 자산에 더 많은 네트워크 “파이프”가 할당됩니다.
• UX 향상 – 사용자가 주요 콘텐츠를 더 빨리 보게 되어 이탈률이 낮아집니다.

실제 테스트에서는 속성을 올바르게 적용했을 때 LCP가 20‑30 % 개선된 사례가 보고되었습니다.

fetchpriority 사용 방법

이미지

[Image: New Summer Collection]

중요한 자산 사전 로드

비핵심 리소스 우선순위 낮추기

[Image: Secondary image]

일반 가이드라인

• 과용 금지 – 모든 요소에 “high”를 지정하면 힌트가 의미를 잃습니다. 화면 상단에 보이는 가장 중요한 1‑2개의 요소에만 사용하세요.
• lazy loading과 결합 – 페이지 상단 자산에는 fetchpriority="high"를, 나머지는 loading="lazy"를 적용합니다. 같은 이미지에 두 속성을 동시에 사용하지 마세요.

힌트 테스트하기

Chrome DevTools → Network 탭을 열고 Priority 열을 활성화합니다. 각 요청에 할당된 우선순위를 확인할 수 있어 힌트가 제대로 적용됐는지 검증할 수 있습니다.

결론

fetchpriority="high"는 개발자 성능 툴킷에서 간단하지만 강력한 도구입니다. 마법의 막대는 아니지만, 브라우저에게 사용자에게 진정으로 중요한 것에 집중하라고 크게 외치는 메가폰 역할을 합니다.