Fetch Priority API는 리소스에 대한 상대적인 우선순위를 브라우저에 나타냅니다. 로드를 최적화하고 코어 웹 바이탈을 개선할 수 있습니다.
브라우저가 웹페이지를 파싱하고 이미지, 스크립트, CSS와 같은 리소스를 발견하고 다운로드하기 시작하면 리소스를 최적의 순서로 다운로드하려고 시도하기 위해 가져오기 priority를 할당합니다. 이러한 우선순위는 리소스의 종류와 문서에서의 위치에 따라 달라질 수 있습니다. 예를 들어 표시 영역 내 이미지의 우선순위는 High일 수 있지만, <head>의 <link>를 통해 조기에 로드된 렌더링 차단 CSS의 우선순위는 Very High일 수 있습니다. 브라우저는 잘 작동하는 우선순위를 할당하는 데 능숙하지만 모든 경우에 최적화되어 있지는 않습니다.
이 도움말에서는 리소스의 상대적 우선순위 (high 또는 low)를 암시할 수 있는 fetchpriority HTML 속성과 Fetch Priority API에 관해 설명합니다. Fetch Priority는 코어 웹 바이탈을 최적화하는 데 도움이 됩니다.
요약
가져오기 우선순위가 도움이 되는 몇 가지 주요 영역은 다음과 같습니다.
- 이미지 요소에
fetchpriority="high"를 지정하여 LCP 이미지의 우선순위를 높여 LCP가 더 빨리 발생하도록 합니다. - 흔히 사용되는 현재 해킹 (
async스크립트에<link rel="preload">삽입)보다 더 나은 의미 체계를 사용하여async스크립트의 우선순위를 높입니다. - 이미지 시퀀싱을 개선할 수 있도록 지연 본문 스크립트의 우선순위를 낮춥니다.
지금까지 개발자는 preload 및 preconnect를 사용하여 리소스 우선순위에 영향을 미치는 경우가 어느 정도 있었지만, 그 영향은 제한적이었습니다. 가져오기 우선순위는 이러한 리소스 힌트를 보완하지만, 리소스 힌트가 어디에 속하는지 이해하는 것이 중요합니다. 미리 로드를 사용하면 중요한 리소스가 자연적으로 발견되기 전에 조기에 로드하고자 하는 리소스를 브라우저에 알릴 수 있습니다. 이 기능은 스타일시트에 포함된 글꼴, 배경 이미지 또는 스크립트에서 로드된 리소스와 같이 쉽게 찾을 수 없는 리소스에 특히 유용합니다. 사전 연결은 교차 출처 서버에 대한 연결을 준비하는 데 도움이 되며 Time-to-first-byte과 같은 측정항목을 개선하는 데 도움이 될 수 있습니다. 출처는 알고 있지만 필요한 리소스의 정확한 URL은 아닐 때 유용합니다.
가져오기 우선순위는 개발자가 특정 리소스의 상대적 우선순위를 나타내는 데 사용할 수 있는 마크업 기반 신호 (fetchpriority 속성을 통해 사용 가능)입니다. 또한 JavaScript 및 priority 속성과 함께 Fetch API를 통해 이러한 힌트를 사용하여 데이터의 리소스 가져오기 우선순위에 영향을 줄 수 있습니다. 또한 가져오기 우선순위는 미리 로드를 보완할 수 있습니다. 최대 콘텐츠 렌더링 시간 이미지를 가져옵니다. 미리 로드되면 우선순위가 낮습니다. 우선순위가 낮은 다른 리소스에 의해 푸시백되는 경우 Fetch Priority를 사용하면 이미지가 로드되는 데 걸리는 시간을 단축할 수 있습니다.
가져오기 우선순위는 Chrome 101 이상에서 사용 가능합니다.
리소스 우선순위
리소스 다운로드 순서는 페이지의 모든 리소스에 대해 브라우저에 할당된 우선순위에 따라 다릅니다. 다양한 요소가 우선순위 계산 로직에 영향을 미칠 수 있습니다. 예를 들면 다음과 같습니다.
- CSS, 글꼴, 스크립트, 이미지 및 타사 리소스에는 서로 다른 우선순위가 할당됩니다.
- 문서에서 리소스를 참조하는 위치나 순서도 리소스의 우선순위에 영향을 줍니다.
preload리소스 힌트를 사용하면 브라우저에서 리소스를 더 빠르게 검색할 수 있으므로 문서에서 리소스를 로드하기 전에 로드되며 우선순위에 영향을 줍니다.async또는defer스크립트의 우선순위 계산이 변경되었습니다.
다음 표에서는 이러한 요인을 고려하여 현재 Chrome에서 대부분의 리소스의 우선순위와 순서가 어떻게 지정되는지 보여줍니다.
| 레이아웃 차단 단계에서 로드 | 레이아웃 차단 단계에서 한 번에 하나씩 로드 | ||||
|---|---|---|---|---|---|
| 깜빡임 우선순위 |
VeryHigh | 높음 | 중간 | 낮음 | VeryLow |
| DevTools 우선순위 |
최고 | 높음 | 중간 | 낮음 | 낮음 |
| 기본 리소스 | |||||
| CSS (초기**) | CSS (늦게**) | CSS (미디어 불일치***) | |||
| 스크립트 (프리로드 스캐너에서 초기** 또는 사용 안 함) | 스크립트 (늦게**) | 스크립트 (비동기) | |||
| 글꼴 | 글꼴 (rel=preload) | ||||
| 가져오기 | |||||
| 이미지 (표시 영역 내) | 이미지 (처음 5개 이미지 > 10,000px2) | 이미지 | |||
| 미디어 | |||||
| SVG 문서 | |||||
| 프리페치 | |||||
| XSL | |||||
| XHR (동기화) | XHR/가져오기* (비동기) | ||||
브라우저는 발견된 순서대로 계산된 우선순위가 같은 리소스를 다운로드합니다. 페이지를 로드할 때 Chrome 개발자 도구 네트워크 탭에서 다른 리소스에 할당된 우선순위를 확인할 수 있습니다. 표 제목을 마우스 오른쪽 버튼으로 클릭하여 우선순위 열을 포함해야 합니다.
type = "font" 리소스의 우선순위
우선순위가 변경되는 경우 대규모 요청 행 설정을 사용하여 초기 및 최종 우선순위를 모두 볼 수 있습니다. 큰 요청 행 설정과 관계없이 도움말에도 동일한 내용이 표시됩니다.
가져오기 우선순위는 언제 필요한가요?
브라우저의 우선순위 지정 로직에 대한 지식은 다운로드 순서를 조정할 수 있는 몇 가지 기존 노브를 제공합니다. 할 수 있습니다
- 다운로드하려는 순서에 따라
<script>및<link>와 같은 리소스 태그를 배치합니다. 우선순위가 같은 리소스는 일반적으로 탐색된 순서대로 로드됩니다. preload리소스 힌트를 사용하여 필요한 리소스를 더 일찍 다운로드합니다. 특히 브라우저에서 일찍 쉽게 찾을 수 없는 리소스에 대해 다운로드할 수 있습니다.async또는defer를 사용하여 다른 리소스를 차단하지 않고 스크립트를 다운로드합니다.- 브라우저가 스크롤 없이 볼 수 있는 부분에 있는 중요한 리소스에 사용 가능한 대역폭을 사용할 수 있도록 스크롤해야 볼 수 있는 부분의 콘텐츠를 지연 로드하세요.
이러한 기법을 사용하면 브라우저의 우선순위 계산을 제어하여 성능과 코어 웹 바이탈을 개선할 수 있습니다. 예를 들어 중요한 배경 이미지가 미리 로드되면 훨씬 일찍 발견되어 최대 콘텐츠 렌더링 시간 (LCP)을 개선할 수 있습니다.
때때로 이러한 핸들은 애플리케이션에 맞게 리소스의 우선순위를 최적화하기에 충분하지 않을 수 있습니다. 다음은 우선순위 가져오기가 도움이 될 수 있는 몇 가지 시나리오입니다.
- 스크롤 없이 볼 수 있는 부분에 여러 개의 이미지가 있지만 모든 이미지의 우선순위가 동일할 필요는 없습니다. 예를 들어 이미지 캐러셀에서 가장 먼저 표시되는 이미지만 다른 이미지보다 우선순위가 높습니다.
- 표시 영역 내 히어로 이미지는 일반적으로 '낮음' 우선순위에서 시작합니다. Chrome 117에서는 처음 5개의 큰 이미지가 '중간'으로 설정되지만 여기에는 히어로 이미지가 포함될 수도 있고 포함되지 않을 수도 있습니다. 레이아웃이 완료되면 Chrome은 사용자가 표시 영역에 있음을 감지하고 우선순위를 높입니다. 이로 인해 일반적으로 이미지 로드가 상당히 지연됩니다. 마크업에서 가져오기 우선순위를 제공하면 이미지를 '높음' 우선순위에서 시작하고 훨씬 일찍 로드할 수 있습니다.
CSS 배경으로 포함된 LCP 이미지를 조기에 검색하는 데는 미리 로드가 필요하며, 미리 로드에fetchpriority='high'를 포함하여 가져오기 우선순위와 결합할 수 있습니다. 그렇지 않으면 이미지의 우선순위가 '낮음' 또는 '중간'으로 시작됩니다. - 스크립트를
async또는defer로 선언하면 브라우저에 스크립트를 비동기식으로 로드하도록 지시합니다. 그러나 이전 표에서 볼 수 있듯이 이러한 스크립트에는 우선순위가 '낮음'으로 지정됩니다. 특히 사용자 환경에 중요한 스크립트의 경우 비동기식 다운로드를 보장하면서 우선순위를 높이는 것이 좋습니다. - JavaScript
fetch()API를 사용하여 리소스 또는 데이터를 비동기식으로 가져올 수 있습니다. 브라우저에 의해 가져오기에 '높음' 우선순위가 할당됩니다. 모든 가져오기 작업을 '높음' 우선순위로 실행하지 않고 대신 다른 가져오기 우선순위를 사용하려는 경우가 있을 수 있습니다. 이는 백그라운드 API 호출을 실행하고 이를 자동 완성과 같이 사용자 입력에 응답하는 API 호출과 혼합할 때 유용할 수 있습니다. 백그라운드 API 호출은 '낮음' 우선순위로, 대화형 API 호출은 '높음' 우선순위로 태그할 수 있습니다. - 브라우저는 CSS 및 글꼴에 '높음' 우선순위를 할당하지만 이러한 모든 리소스가 LCP에 똑같이 중요하거나 필요하지 않을 수 있습니다. 가져오기 우선순위를 사용하여 이러한 리소스 중 일부의 우선순위를 낮출 수 있습니다.
fetchpriority 속성
fetchpriority HTML 속성을 사용하여 가져오기 우선순위를 제공할 수 있습니다. 이 속성은 link, img, script 태그와 함께 사용할 수 있습니다. 이 속성을 사용하면 지원되는 태그를 사용하여 다운로드할 때 CSS, 글꼴, 스크립트, 이미지와 같은 리소스 유형의 우선순위를 지정할 수 있습니다.
fetchpriority 속성에는 다음 세 가지 값 중 하나가 허용됩니다.
high: 리소스의 우선순위가 높다고 간주하고, 브라우저의 휴리스틱이 이를 방지하지 않는 한 브라우저에서 우선순위를 지정하도록 합니다.low: 리소스의 우선순위가 낮다고 간주하고 휴리스틱이 허용하는 경우 브라우저에서 리소스의 우선순위를 낮춥니다.auto: 선호하는 속성이 없으며 브라우저가 적절한 우선순위를 결정하도록 하는 기본값입니다.
다음은 마크업에서 fetchpriority 속성과 스크립트에 해당하는 priority 속성을 사용하는 몇 가지 예입니다.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
브라우저 우선순위 및 fetchpriority
다음 그림과 같이 fetchpriority 속성을 다양한 리소스에 적용하여 계산된 우선순위를 높이거나 낮출 수 있습니다. 각 행의 fetchpriority="auto" (◉)은 해당 리소스 유형의 기본 우선순위를 나타냅니다 (Google 문서로도 사용 가능).
| 레이아웃 차단 단계에서 로드 | 레이아웃 차단 단계에서 한 번에 하나씩 로드 | ||||
|---|---|---|---|---|---|
| 깜빡임 우선순위 |
VeryHigh | 높음 | 중간 | 낮음 | VeryLow |
| DevTools 우선순위 |
최고 | 높음 | 중간 | 낮음 | 낮음 |
| 기본 리소스 | ◉ | ||||
| CSS (초기**) | ⬆◉ | ⬇ | |||
| CSS (늦게**) | ⬆ | ◉ | ⬇ | ||
| CSS (미디어 불일치***) | ⬆*** | ◉⬇ | |||
| 스크립트 (프리로드 스캐너에서 초기** 또는 사용 안 함) | ⬆◉ | ⬇ | |||
| 스크립트 (늦게**) | ⬆ | ◉ | ⬇ | ||
| 스크립트 (async/defer) | ⬆ | ◉⬇ | |||
| 글꼴 | ◉ | ||||
| 글꼴 (rel=preload) | ⬆◉ | ⬇ | |||
| 가져오기 | ◉ | ||||
| 이미지 (표시 영역에 있음 - 레이아웃 후) | ⬆◉ | ⬇ | |||
| 이미지 (처음 5개 이미지 > 10,000px2) | ⬆ | ◉ | ⬇ | ||
| 이미지 | ⬆ | ◉⬇ | |||
| 미디어 (동영상/오디오) | ⬆ | ◉⬇ | |||
| SVG 문서 | ⬆ | ◉⬇ | |||
| XHR (동기화) - 지원 중단됨 | ◉ | ||||
| XHR/가져오기* (비동기) | ⬆◉ | ⬇ | |||
| 프리페치 | ◉ | ||||
| XSL | ◉ | ||||
fetchpriority는 상대적 우선순위를 설정합니다. 즉, 우선순위를 명시적으로 '높음' 또는 '낮음'으로 설정하는 대신 적절한 금액만큼 기본 우선순위를 높이거나 낮춥니다. 그러면 브라우저가 상대적 우선순위를 결정합니다. '높음' 또는 '낮음'으로 표시되는 경우가 많지만 항상 그런 것은 아닙니다. 예를 들어 fetchpriority="high"가 있는 중요한 CSS는 여전히 '매우 높음'/'가장 높은' 우선순위를 유지하며, fetchpriority="low"를 사용하면 우선순위가 계속 '높음'으로 유지됩니다. 두 경우 모두 우선순위가 명시적으로 '높음' 또는 '낮음'으로 설정되지 않습니다.
사용 사례
fetchpriority 속성을 사용하여 리소스를 가져올 우선순위에 관한 추가 힌트를 브라우저에 제공하려는 시나리오를 처리할 수 있습니다.
LCP 이미지의 우선순위 높이기
fetchpriority="high"를 지정하여 LCP 또는 기타 중요한 이미지의 우선순위를 높일 수 있습니다.
<img src="lcp-image.jpg" fetchpriority="high">
다음 비교에서는 가져오기를 우선순위로 로드한 것과 사용하지 않고 LCP 배경 이미지가 로드된 Google 항공편 검색 페이지를 보여줍니다. 우선순위를 높음으로 설정하면 LCP가 2.6초에서 1.9초로 개선되었습니다.
스크롤 없이 볼 수 있는 부분 이미지의 우선순위 낮추기
fetchpriority="low"를 사용하여 스크롤 없이 볼 수 있는 이미지(예: 이미지 캐러셀)에서 중요하지 않을 수 있는 이미지의 우선순위를 낮출 수 있습니다.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
이전 Oodle 앱 실험에서는 로드 시 표시되지 않는 이미지의 우선순위를 낮추기 위해 이를 사용했습니다. 로드 시간을 2초 단축할 수 있었습니다.
미리 로드된 리소스의 우선순위 낮춤
미리 로드된 리소스가 다른 중요한 리소스와 경쟁하지 않도록 하려면 힌트를 제공하여 우선순위를 낮추면 됩니다. 이미지, 스크립트 및 CSS에 이 기법을 사용할 수 있습니다.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
스크립트 우선순위 다시 지정
페이지의 일부를 대화형으로 만드는 데 필요한 스크립트는 필수적이지만 다른 리소스를 차단해서는 안 됩니다. 이를 높은 우선순위로 비동기로 표시할 수 있습니다.
<script src="async_but_important.js" async fetchpriority="high"></script>
스크립트가 특정 DOM 상태에 의존하는 경우 비동기로 표시할 수 없습니다. 하지만 페이지 최하위 수준에 있는 경우 그림과 같이 낮은 우선순위로 다운로드될 수 있습니다.
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
중요하지 않은 데이터 가져오기의 우선순위 낮추기
브라우저가 높은 우선순위로 fetch를 실행합니다. 동시에 실행될 수 있는 가져오기가 여러 개 있는 경우, 더 중요한 데이터를 가져올 때는 높은 기본 우선순위를 사용하고 덜 중요한 데이터는 낮출 수 있습니다.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
우선순위 구현 참고사항 가져오기
가져오기 우선순위를 사용하면 위에서 설명한 특정 사용 사례에서 성능을 개선할 수 있습니다. 다음과 같은 몇 가지 사항에 유의해야 합니다.
fetchpriority속성은 힌트이며 지시어가 아닙니다. 브라우저는 개발자의 환경설정을 준수하려고 합니다. 충돌이 발생하는 경우 브라우저가 리소스 우선순위에 대한 환경설정을 필요에 따라 적용할 수도 있습니다.가져오기 우선순위를 미리 로드와 혼동해서는 안 됩니다. 둘 다 다른 이유는 다음과 같습니다.
- 미리 로드는 힌트가 아니라 필수 가져오기입니다.
- 미리 로드를 사용하면 브라우저가 리소스를 조기에 검색할 수 있지만 여전히 기본 우선순위로 리소스를 가져옵니다. 반대로, 가져오기 우선순위를 사용하면 검색 가능성에 도움이 되지 않지만, 가져오기 우선순위를 높이거나 낮출 수 있습니다.
- 미리 로드의 효과를 더 쉽게 관찰하고 측정할 수 있습니다.
가져오기 우선순위를 사용하면 우선순위 지정의 세분화 정도를 늘려 미리 로드를 보완할 수 있습니다. LCP 이미지의
<head>에서 첫 번째 항목 중 하나로 미리 로드를 이미 지정한 경우high가져오기 우선순위를 사용해도 큰 이득을 얻지 못할 수 있습니다. 그러나 미리 로드가 다른 리소스 다음에 있는 경우high가져오기 우선순위를 통해 LCP를 개선할 수 있습니다. 중요한 이미지가 CSS 배경 이미지인 경우fetchpriority = "high"를 사용하여 미리 로드해야 합니다.우선순위 지정에 따른 주목할 만한 이점은 더 많은 리소스가 사용 가능한 네트워크 대역폭을 두고 경합하는 환경에서 더 중요합니다. 이는 병렬 다운로드가 불가능하거나 대역폭이 낮은 HTTP/2 연결인 HTTP/1.x 연결에서 일반적입니다. 이러한 상황에서 우선순위를 지정하면 병목 현상이 해결될 수 있습니다.
CDN은 HTTP/2 우선순위를 균일하게 구현하지 않습니다. 브라우저가 Fetch Priority를 사용하여 제안된 우선순위를 전달하더라도 CDN은 필요한 순서로 리소스의 우선순위를 다시 지정하지 않을 수 있습니다. 따라서 가져오기 우선순위를 테스트하기가 어려워집니다. 우선순위는 브라우저 내부와 우선순위 지정을 지원하는 프로토콜 (HTTP/2 및 HTTP/3)을 통해 모두 적용됩니다. CDN 또는 출처 지원과 별개로 내부 브라우저 우선순위 지정에만 사용하는 것이 좋습니다. 이는 브라우저에서 리소스를 요청할 때 종종 변경되기 때문입니다. 예를 들어 이미지와 같은 우선순위가 낮은 리소스는 브라우저에서 중요한
<head>항목을 처리하는 동안 요청이 보류되는 경우가 많습니다.초기 설계에서는 가져오기 우선순위를 권장사항으로 도입하지 못할 수도 있습니다. 나중에 개발 주기에서 적용할 수 있는 최적화 방법입니다. 페이지의 여러 리소스에 할당되는 우선순위를 확인할 수 있으며 우선순위가 기대에 미치지 못하는 경우 추가 최적화를 위해 가져오기 우선순위를 도입할 수 있습니다.
Chrome 95 이후 미리 로드 사용
우선순위 가져오기 기능은 Chrome 73~76에서 평가판에 사용할 수 있었지만 Chrome 95에서 수정된 미리 로드의 우선순위 지정 문제로 인해 출시되지 않았습니다. Chrome 95 이전에는 다른 요청의 우선순위가 더 높더라도 <link rel=preload>를 통해 실행된 요청이 항상 미리 로드 스캐너에서 확인한 다른 요청보다 먼저 시작됩니다.
Chrome 95의 수정사항과 Fetch Priority 기능이 개선됨에 따라 개발자는 파서가 감지하지 않는 리소스 (글꼴, 가져오기, 백그라운드 LCP 이미지)를 미리 로드하는 데 의도된 목적으로 미리 로드를 사용하기 시작할 것입니다. preload 힌트의 배치는 리소스가 미리 로드되는 시점에 영향을 미칩니다. 미리 로드 사용 시 요점은 다음과 같습니다.
- HTTP 헤더에 미리 로드를 포함하면 다른 모든 것보다 우선하게 됩니다.
- 일반적으로 미리 로드는 우선순위가 '중간'보다 높은 경우 파서가 가져온 순서대로 로드됩니다. 따라서 HTML의 시작 부분에 미리 로드를 포함하는 경우 주의해야 합니다.
- 글꼴 미리 로드는 머리의 끝부분이나 본문의 시작 부분에서 가장 잘 작동할 것입니다.
- 미리 로드(동적
import()또는modulepreload)는 가져오기가 필요한 스크립트 태그 다음에 실행되어야 실제 스크립트가 먼저 로드/파싱됩니다. 기본적으로 스크립트 태그가 종속 항목 로드를 트리거하는 스크립트를 로드하는 경우 종속 항목의<link rel=preload>가 상위 스크립트 태그 다음에 있는지 확인합니다. 그러지 않으면 종속 항목이 기본 스크립트 전에 로드될 수 있습니다. 올바른 순서로 종속 항목이 로드되는 동안 기본 스크립트를 파싱/평가할 수 있습니다. - 이미지 미리 로드의 우선순위는 '낮음' 또는 '중간'(가져오기 우선순위 없음)이며 비동기 스크립트 및 기타 우선순위가 낮거나 가장 낮은 태그를 기준으로 정렬해야 합니다.
기록
Fetch Priority는 2018년에 Chrome에서 오리진 트라이얼로 처음 실험한 후 2021년에 importance 속성을 사용하여 다시 실험했습니다. 당시에는 우선순위 힌트라고 했습니다. 이후 인터페이스는 웹 표준 프로세스의 일부로 HTML의 경우 fetchpriority, 자바스크립트의 Fetch API의 경우 priority로 변경되었습니다. 혼동을 줄이기 위해 이제 이 API를 가져오기 우선순위라고 합니다.
결론
미리 로드 동작이 수정되고 최근에는 코어 웹 바이탈과 LCP에 중점을 둔 가져오기 우선순위에 개발자들이 관심을 가질 가능성이 높습니다. 이제 원하는 로드 시퀀스를 달성하는 데 사용할 수 있는 추가 노브가 있습니다.