Fetch Priority API로 리소스 로드 최적화

Fetch Priority API는 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. 로드 최적화를 가능하게 하고 Core Web Vitals를 개선할 수 있습니다.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

브라우저 지원

  • Chrome: 102 <ph type="x-smartling-placeholder">
  • Edge: 102. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari 17.2. <ph type="x-smartling-placeholder">

소스

브라우저가 웹페이지를 파싱하고 이미지, 스크립트, CSS와 같은 리소스를 검색하고 다운로드하기 시작하면 최적의 순서로 다운로드할 수 있도록 가져오기 priority를 할당합니다. 일반적으로 리소스의 우선순위는 리소스의 내용과 문서 내 위치에 따라 다릅니다. 예를 들어 표시 영역 내 이미지에는 High 우선순위가 있을 수 있고, <head>에서 <link>를 사용하는 조기 로드 렌더링 차단 CSS의 우선순위는 Very High일 수 있습니다. 브라우저는 잘 작동하는 우선순위를 할당하는 데 능숙하지만 모든 경우에 최적화되지는 않을 수도 있습니다.

이 페이지에서는 Fetch Priority API 및 fetchpriority HTML 속성을 설명합니다. 이 속성을 사용하면 리소스의 상대적 우선순위 (high 또는 low)를 알 수 있습니다. 가져오기 우선순위는 Core Web Vitals를 최적화하는 데 도움이 됩니다.

요약

가져오기 우선순위가 도움이 될 수 있는 몇 가지 주요 영역은 다음과 같습니다.

  • 이미지 요소에 fetchpriority="high"를 지정하여 LCP 이미지의 우선순위를 높여 LCP 이미지가 더 빨리 발생하도록 합니다.
  • 현재 가장 일반적인 해킹 방법 (async 스크립트에 <link rel="preload"> 삽입)보다 더 나은 시맨틱스를 사용하여 async 스크립트의 우선순위를 높입니다.
  • 이미지의 시퀀싱을 더 잘 할 수 있도록 지연 본문 스크립트의 우선순위를 낮춥니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">Google 항공편 검색 홈페이지의 두 가지 테스트를 비교한 슬라이드 보기 하단의 가져오기 우선순위는 히어로 이미지의 우선순위를 높이는 데 사용되어 LCP가 0.7초 감소합니다. </ph>
가져오기 우선순위를 통해 Google 항공편 검색 테스트에서 최대 콘텐츠 페인트가 2.6초에서 1.9초로 개선되었습니다.

지금까지 개발자는 미리 로드와 사전 연결을 사용하여 리소스 우선순위에 영향을 미치는 정도가 제한적이었습니다. 미리 로드를 사용하면 브라우저에서 자연적으로 발견하기 전에 미리 로드하려는 주요 리소스를 브라우저에 알릴 수 있습니다. 이는 스타일시트에 포함된 글꼴, 배경 이미지 또는 스크립트에서 로드된 리소스와 같이 검색하기 어려운 리소스에 특히 유용합니다. 미리 연결은 교차 출처 서버에 대한 연결을 준비하는 데 도움이 되며 첫 바이트까지의 시간과 같은 측정항목을 개선하는 데 도움이 될 수 있습니다. 출처는 알고 있지만 필요한 리소스의 정확한 URL은 알고 있지 않은 경우에 유용합니다.

가져오기 우선순위는 이러한 리소스 힌트를 보완합니다. 이는 fetchpriority 속성을 통해 제공되는 마크업 기반 신호로, 개발자가 특정 리소스의 상대적 우선순위를 나타내는 데 사용할 수 있습니다. JavaScript 및 priority 속성과 함께 Fetch API를 통해 이러한 힌트를 사용하여 데이터에 대한 리소스 가져오기의 우선순위에 영향을 줄 수도 있습니다. 가져오기 우선순위는 미리 로드를 보완할 수도 있습니다. 콘텐츠가 포함된 최대 페인트 이미지를 가져옵니다. 이 이미지는 미리 로드되면 우선순위가 여전히 낮습니다. 우선순위가 낮은 다른 초기 리소스에서 푸시백하는 경우 우선순위 가져오기를 사용하면 이미지 로드 시간을 단축할 수 있습니다.

리소스 우선순위

리소스 다운로드 순서는 브라우저에 할당된 확인할 수 있습니다 우선순위 계산에 영향을 줄 수 있는 요소 논리에는 다음이 포함됩니다.

  • CSS, 글꼴, 스크립트, 이미지, 타사 리소스와 같은 리소스 유형입니다.
  • 문서가 리소스를 참조하는 위치 또는 순서입니다.
  • async 또는 defer 속성이 스크립트에 사용되는지 여부

다음 표는 Chrome에서 대부분의 리소스의 우선순위를 지정하고 순서를 지정하는 방식을 보여줍니다.

<ph type="x-smartling-placeholder">
  레이아웃 차단 단계에서 로드 레이아웃 차단 단계에서 한 번에 하나씩 로드
깜빡임
우선순위		 VeryHigh 높음 중간 낮음 VeryLow
DevTools
Priority		 최고 높음 중간 낮음 최저
기본 리소스
CSS (초기**) CSS (후기**) CSS (미디어 불일치***)
스크립트 (미리** 또는 미리 로드 스캐너에서 아님) 스크립트 (지연**) 스크립트 (비동기)
글꼴 글꼴 (rel=preload)
가져오기
이미지 (표시 영역 내) 이미지 (처음 5개 이미지 > 10,000px2) 이미지
미디어 (동영상/오디오)
프리페치
XSL
XHR (동기) XHR/fetch* (비동기)

브라우저는 동일한 계산된 우선순위를 가진 리소스를 검색된 순서대로 다운로드합니다. Chrome 개발자 도구의 네트워크 탭에서 페이지를 로드할 때 다른 리소스에 할당된 우선순위를 확인할 수 있습니다. 표 제목을 마우스 오른쪽 버튼으로 클릭하고 선택하여 우선순위 열을 포함해야 합니다.

<ph type="x-smartling-placeholder">
</ph> 여러 글꼴 리소스가 나열되어 있는 Chrome DevTools의 Network 탭 모두 우선순위가 가장 높습니다.
BBC 뉴스 세부정보 페이지의 리소스 type = "font" 우선순위
<ph type="x-smartling-placeholder">
</ph> 여러 글꼴 리소스가 나열되어 있는 Chrome DevTools의 Network 탭 우선순위 낮음과 높음이 혼합되어 있습니다.
BBC 뉴스 세부정보 페이지의 리소스 type = "script"에 대한 우선순위

우선순위가 변경되면 큰 요청 행 설정 또는 도움말에서 초기 및 최종 우선순위를 모두 확인할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> Chrome DevTools의 Network 탭 &#39;Big 요청 행&#39; 설정이 선택되고 우선순위 열에 우선순위가 높음인 첫 번째 이미지가 표시되고 그 아래에는 다른 초기 우선순위가 &#39;중간&#39;인 첫 번째 이미지가 표시됩니다. 도움말에도 동일하게 나와 있습니다.
DevTools에서 우선순위 변경.

가져오기 우선순위는 언제 필요한가요?

이제 브라우저의 우선순위 지정 로직을 이해했으므로 페이지의 다운로드 순서를 조정하여 성능과 Core Web Vitals를 최적화할 수 있습니다. 다음은 리소스 다운로드 우선순위에 영향을 주기 위해 변경할 수 있는 항목의 예입니다.

  • <script> 및 <link>와 같은 리소스 태그를 브라우저에서 다운로드할 순서대로 배치합니다. 우선순위가 같은 리소스는 일반적으로 검색된 순서대로 로드됩니다.
  • preload 리소스 힌트를 사용하여 필요한 리소스를 더 일찍 다운로드하세요. 특히 브라우저에서 조기에 쉽게 검색되지 않는 리소스의 경우 더욱 그렇습니다.
  • async 또는 defer를 사용하여 다른 리소스를 차단하지 않고 스크립트를 다운로드합니다.
  • 브라우저에서 스크롤해야 볼 수 있는 부분의 리소스에 사용 가능한 대역폭을 사용할 수 있도록 스크롤해야 볼 수 있는 부분의 콘텐츠를 지연 로드하세요.

이러한 기법을 사용하면 브라우저의 우선순위 계산을 제어하여 성능과 코어 웹 바이탈을 개선할 수 있습니다. 예를 들어 중요한 배경 이미지가 미리 로드되면 훨씬 먼저 검색되어 최대 콘텐츠 페인트 (LCP)를 개선할 수 있습니다.

이러한 핸들만으로는 애플리케이션에 맞게 리소스의 우선순위를 지정하기에는 충분하지 않은 경우도 있습니다. 다음은 가져오기 우선순위가 도움이 될 수 있는 몇 가지 시나리오입니다.

  • 스크롤 없이 볼 수 있는 부분에 여러 개의 이미지가 있지만 모든 이미지의 우선순위가 같아서는 안 됩니다. 예를 들어 이미지 캐러셀에서는 첫 번째로 표시되는 이미지에만 높은 우선순위가 필요하고 일반적으로 화면 밖에 있는 다른 이미지는 낮은 우선순위를 갖도록 설정할 수 있습니다.
  • 표시 영역 내 이미지는 일반적으로 Low 우선순위에서 시작합니다. 레이아웃이 완료되면 Chrome은 레이아웃이 표시 영역에 있음을 감지하여 우선순위를 높입니다. 이로 인해 일반적으로 히어로 이미지와 같은 중요한 이미지를 로드하는 데 상당한 지연이 추가됩니다. 마크업에 가져오기 우선순위를 제공하면 이미지가 High 우선순위에서 시작하여 훨씬 일찍 로드를 시작할 수 있습니다. 이를 어느 정도 자동화하기 위해 Chrome은 처음 5개의 큰 이미지를 Medium 우선순위로 설정하므로 도움이 되지만 명시적인 fetchpriority="high"가 더 좋습니다.

    CSS 배경으로 포함된 LCP 이미지를 조기에 찾으려면 여전히 미리 로드가 필요합니다. 배경 이미지의 효과를 높이기 위해 우선순위는 미리 로드에 fetchpriority='high'를 포함합니다.
  • 스크립트를 async 또는 defer로 선언하면 브라우저가 스크립트를 비동기식으로 로드합니다. 그러나 우선순위 표에 나와 있는 것처럼 이러한 스크립트에는 '낮음' 우선순위가 있습니다. 특히 사용자 환경에 중요한 스크립트의 경우 비동기 다운로드를 보장하면서 우선순위를 높이는 것이 좋습니다.
  • JavaScript fetch() API를 사용하여 리소스 또는 데이터를 비동기식으로 가져오면 브라우저에서 High 우선순위를 할당합니다. 특히 백그라운드 API 호출과 사용자 입력에 응답하는 API 호출을 혼합하는 경우 일부 가져오기를 더 낮은 우선순위로 실행해야 할 수 있습니다. 백그라운드 API 호출을 Low 우선순위로, 대화형 API 호출을 High 우선순위로 표시합니다.
  • 브라우저는 CSS와 글꼴에 High 우선순위를 할당하지만 이러한 리소스 중 일부는 다른 리소스보다 중요할 수 있습니다. 가져오기 우선순위를 사용하여 중요하지 않은 리소스의 우선순위를 낮출 수 있습니다 (초기 CSS는 렌더링 차단이므로 일반적으로 High 우선순위여야 합니다).

fetchpriority 속성

link, img 또는 script 태그를 사용하여 다운로드하는 경우 fetchpriority HTML 속성을 사용하여 CSS, 글꼴, 스크립트, 이미지와 같은 리소스 유형의 다운로드 우선순위를 지정합니다. 다음 값을 사용할 수 있습니다.

  • 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 문서로도 제공 가능).

<ph type="x-smartling-placeholder">
  레이아웃 차단 단계에서 로드 레이아웃 차단 단계에서 한 번에 하나씩 로드
깜빡임
우선순위		 VeryHigh 높음 중간 낮음 VeryLow
DevTools
Priority		 최고 높음 중간 낮음 최저
기본 리소스 ◉
CSS (초기**) ⬆◉ ⬇
CSS (후기**) ⬆ ◉ ⬇
CSS (미디어 불일치***) ⬆*** ◉⬇
스크립트 (미리** 또는 미리 로드 스캐너에서 아님) ⬆◉ ⬇
스크립트 (지연**) ⬆ ◉ ⬇
스크립트 (async/defer) ⬆ ◉⬇
글꼴 ◉
글꼴 (rel=preload) ⬆◉ ⬇
가져오기 ◉
이미지 (표시 영역 내 - 레이아웃 이후) ⬆◉ ⬇
이미지 (처음 5개 이미지 > 10,000px2) ⬆ ◉ ⬇
이미지 ⬆ ◉⬇
미디어 (동영상/오디오) ◉
XHR (동기화) - 지원 중단됨 ◉
XHR/fetch* (비동기) ⬆◉ ⬇
프리페치 ◉
XSL ◉

fetchpriority는 상대적 우선순위를 설정합니다. 즉, 명시적으로 우선순위를 High 또는 Low로 설정하는 대신 기본 우선순위를 적당한 만큼 올리거나 낮춥니다. 이로 인해 우선순위가 High 또는 Low인 경우가 많지만 항상 그런 것은 아닙니다. 예를 들어 fetchpriority="high"가 있는 중요한 CSS는 'Very High'/'Highest' 이러한 요소에서 fetchpriority="low"를 사용하면 'High' 우선순위가 있습니다. 두 경우 모두 명시적으로 우선순위를 High 또는 Low로 설정하는 일은 없습니다.

사용 사례

리소스를 가져올 우선순위에 관한 추가 힌트를 브라우저에 제공하려면 fetchpriority 속성을 사용합니다.

LCP 이미지의 우선순위 높이기

fetchpriority="high"를 지정하면 LCP 또는 기타 중요한 이미지의 우선순위를 높일 수 있습니다.

<img src="lcp-image.jpg" fetchpriority="high">

다음은 가져오기 우선순위를 사용하거나 사용하지 않고 로드된 LCP 배경 이미지가 포함된 Google 항공편 검색 페이지를 비교한 것입니다. 우선순위를 높게 설정하자 LCP가 2.6초에서 1.9초로 향상되었습니다.

<ph type="x-smartling-placeholder">
</ph>
Cloudflare 작업자를 사용하여 우선순위 가져오기를 사용하여 Google 항공편 검색 페이지를 다시 작성한 실험

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>

이미지 2~4는 표시 영역 밖에 표시되지만 '충분히 가까이' 있다고 간주될 수 있습니다. high로 부스트하여 load=lazy 속성이 추가되더라도 로드됩니다. 따라서 fetchpriority="low"이 이에 대한 올바른 솔루션입니다.

이전의 Oodle 앱 실험에서는 로드 시 표시되지 않는 이미지의 우선순위를 낮추기 위해 이를 사용했습니다. 페이지 로드 시간이 2초 감소했습니다.

<ph type="x-smartling-placeholder">
</ph> Oodle 앱의 이미지 캐러셀에 사용될 때 가져오기 우선순위를 나란히 비교한 모습 왼쪽에서 브라우저가 캐러셀 이미지의 기본 우선순위를 설정하지만 오른쪽 예시보다 약 2초 더 느리게 이미지를 다운로드하고 페인팅합니다. 이는 첫 번째 캐러셀 이미지에만 더 높은 우선순위를 설정합니다. <ph type="x-smartling-placeholder">
</ph> 첫 번째 캐러셀 이미지에만 높은 우선순위를 사용하면 페이지가 더 빠르게 로드됩니다.

미리 로드된 리소스의 우선순위 낮추기

미리 로드된 리소스가 다른 중요한 리소스와 경쟁하지 않도록 우선순위를 낮추면 됩니다. 이미지, 스크립트, CSS에 이 방법을 사용하세요.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

스크립트 우선순위 다시 지정

페이지가 대화형이어야 하는 스크립트는 빠르게 로드되어야 하지만, 더 중요한 렌더링 차단 리소스를 차단하지는 않아야 합니다. 높은 우선순위로 async로 표시할 수 있습니다.

<script src="async_but_important.js" async fetchpriority="high"></script>

특정 DOM 상태에 의존하는 경우 스크립트를 async로 표시할 수 없습니다. 그러나 페이지가 나중에 실행되는 경우 더 낮은 우선순위로 로드할 수 있습니다.

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

이렇게 하면 이 스크립트에 도달할 때 파서가 계속 차단되지만 그 전의 콘텐츠에 우선순위를 부여할 수 있습니다.

완성된 DOM이 필요한 경우 defer 속성 (DOMContentLoaded 이후에 순서대로 실행됨)을 사용하거나 페이지 하단의 async를 사용할 수도 있습니다.

중요하지 않은 데이터 가져오기의 우선순위 낮추기

브라우저가 높은 우선순위로 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 가져오기 우선순위로 LCP가 크게 개선되지 않을 수 있습니다. 하지만 다른 리소스가 로드된 후에 미리 로드가 발생하면 high 가져오기 우선순위가 LCP를 더 개선할 수 있습니다. 중요한 이미지가 CSS 배경 이미지인 경우 fetchpriority = "high"를 사용하여 미리 로드합니다.

  • 우선순위 지정으로 인한 로드 시간 개선은 더 많은 리소스가 가용 네트워크 대역폭을 두고 경쟁하는 환경에서는 더욱 중요합니다. 이는 병렬 다운로드가 불가능한 HTTP/1.x 연결이나 대역폭이 낮은 HTTP/2 또는 HTTP/3 연결에서 일반적입니다. 이러한 경우 우선순위를 정하면 병목 현상을 해결하는 데 도움이 될 수 있습니다.

  • CDN은 HTTP/2 우선순위 지정을 균일하게 구현하지 않으며, HTTP/3에 대해서도 유사하게 구현하지 않습니다. 브라우저가 가져오기 우선순위의 우선순위를 전달하더라도 CDN은 지정된 순서대로 리소스의 우선순위를 다시 지정하지 않을 수 있습니다. 이로 인해 가져오기 우선순위를 테스트하기가 어렵습니다. 우선순위는 브라우저 내에서 내부적으로 그리고 우선순위 지정을 지원하는 프로토콜 (HTTP/2 및 HTTP/3)에 모두 적용됩니다. 브라우저가 리소스를 요청할 때 우선순위가 변경되는 경우가 많으므로 CDN 또는 원본 지원과 관계없이 내부 브라우저 우선순위 지정에만 가져오기 우선순위를 사용하는 것이 여전히 좋습니다. 예를 들어 이미지와 같이 우선순위가 낮은 리소스는 브라우저가 중요한 <head> 항목을 처리하는 동안 요청을 보류하는 경우가 많습니다.

  • 초기 설계 시 가져오기 우선순위를 권장사항으로 도입하지 못할 수도 있습니다. 개발 주기 후반에 페이지의 여러 리소스에 우선순위가 할당될 수 있으며, 우선순위가 기대에 미치지 못하는 경우 가져오기 우선순위를 도입하여 추가로 최적화할 수 있습니다.

개발자는 의도된 목적으로 미리 로드를 사용하여 파서에서 감지되지 않는 리소스 (글꼴, 가져오기, 백그라운드 LCP 이미지)를 미리 로드해야 합니다. preload 힌트의 위치는 리소스가 미리 로드되는 시점에 영향을 미칩니다.

가져오기 우선순위는 리소스를 가져올 때 가져오는 방법에 관한 것입니다.

미리 로드 사용 팁

미리 로드를 사용할 때는 다음 사항에 유의하세요.

  • HTTP 헤더에 미리 로드를 포함하면 로드 순서의 다른 모든 항목보다 앞에 배치합니다.
  • 일반적으로 미리 로드는 우선순위가 Medium 이상인 항목의 파서가 로드하는 순서대로 로드됩니다. HTML 시작 부분에 미리 로드를 포함할 경우 주의해야 합니다.
  • 글꼴 미리 로드는 머리의 끝이나 본문의 시작 부분에 가장 적합할 것입니다.
  • 가져오기 미리 로드 (동적 import() 또는 modulepreload)는 가져오기가 필요한 스크립트 태그 이후에 실행되어야 하므로 종속 항목이 로드되는 동안 스크립트를 평가할 수 있도록 스크립트가 먼저 로드되거나 파싱되어야 합니다.
  • 이미지 미리 로드에는 기본적으로 Low 또는 Medium 우선순위가 있습니다. 비동기 스크립트 및 기타 우선순위가 낮거나 가장 낮은 태그를 기준으로 순서를 정합니다.

기록

가져오기 우선순위는 2018년에 Chrome에서 오리진 트라이얼로 실험한 후 2021년에 importance 속성을 사용하여 다시 실험되었습니다. 당시에는 우선순위 힌트라고 불렸습니다. 이후 인터페이스는 웹 표준 프로세스의 일부로 HTML용 fetchpriority 및 JavaScript의 Fetch API용 priority로 변경되었습니다. 혼동을 줄이기 위해 이제 이 API 가져오기 우선순위를 호출합니다.

결론

개발자들은 미리 로드 동작의 수정, 최근 Core Web Vitals 및 LCP에 중점을 둔 가져오기 우선순위에 관심을 가질 것입니다. 이제 원하는 로드 순서를 달성하는 데 사용할 수 있는 추가 노브가 제공됩니다.