Resource Priority

정의

같은 순간에 받아야 할 리소스가 여러 개일 때 "무엇을 먼저 받을지" 브라우저가 정하는 규칙, 그리고 그 순서를 개발자가 조정하는 방법이다. 브라우저는 리소스 유형(이미지·스크립트·CSS 등)과 문서 내 위치에 따라 다운로드 우선순위(priority, 네트워크 요청을 처리하는 순번)를 자동으로 매긴다. fetchpriority 속성으로 이 순번을 힌트로 덮어쓸 수 있다.

왜 필요한가

브라우저는 한 번에 열 수 있는 연결 수에 제한이 있어, 리소스가 많으면 줄을 세워 순서대로 받는다. 이때 정작 사용자가 먼저 봐야 할 히어로 이미지가 아래쪽 광고 이미지나 부수 스크립트에 밀려 뒤늦게 도착하면, LCP(가장 큰 콘텐츠가 그려지기까지의 시간)가 나빠진다. 브라우저의 자동 우선순위는 "위치·유형"만 보므로, 정말 중요한 리소스가 뭔지는 개발자가 힌트로 알려줘야 한다.

동작 원리

1. 브라우저는 HTML을 파싱하며 preload scanner(본격 렌더 전에 문서를 훑어 받아둘 리소스를 미리 찾는 장치)로 리소스를 발견한다.
2. 각 리소스에 유형·위치 기반 기본 우선순위(높음/낮음 등)를 매긴다 — 예: 뷰포트 안 이미지는 대체로 낮게 시작한다.
3. fetchpriority="high"가 붙어 있으면 그 힌트를 반영해 순번을 끌어올린다. fetchpriority="low"는 반대로 내린다.
4. <link rel="preload">는 아직 파서가 도달하지 않은 리소스도 미리 받도록 요청을 앞당긴다.

실무 적용

• LCP 후보인 첫 화면 이미지에는 fetchpriority="high"를 고려한다. Next.js Image의 priority가 내부적으로 이 힌트를 붙여준다.
• 접힌 영역의 이미지나 나중에 필요한 스크립트는 우선순위를 낮게 두거나 지연 로드한다.

트레이드오프

우선순위를 올린 리소스는 다른 요청을 밀어낸다. 여러 리소스에 high를 남발하면 "다 높음 = 다 보통"이 되어 힌트가 무의미해진다. 진짜 병목 하나에만 적용하는 것이 기본이다.

사용하면 안 되는 경우

• 리소스가 적어 애초에 경쟁이 없는 페이지 — 브라우저 기본 우선순위로 충분하다.
• LCP 요소가 무엇인지 측정으로 확정하지 않은 상태 — 엉뚱한 리소스를 올리면 오히려 악화된다.

흔한 실수

• 모든 이미지에 priority/fetchpriority="high"를 붙여 우선순위 신호를 희석한다.
• preload만 걸고 실제로 그 리소스가 렌더 경로의 병목인지 확인하지 않아, 대역폭만 낭비한다.

관련 개념

• largest-contentful-paint — 우선순위 조정으로 개선하려는 대상 지표