TOAST UI

Applications

Chart Editor Grid Calendar Image-editor

Components

App Loader Auto Complete Color Picker Context Menu Date Picker Pagination Rolling Select Box Time Picker Tree

Tools

TOAST UI Doc ESLint Config Release Note

FE Guide

Posts

우선순위 힌트로 리소스 로딩 최적화하기

원문: https://web.dev/priority-hints/
저자: Leena Sohoni, Addy Osmani (Twitter, Github), Patrick Meenan (Twitter)
라이선스: CC BY 4.0

브라우저가 웹 페이지를 파싱하고 이미지, 스크립트 또는 CSS 같은 리소스를 검색하고 다운로드하기 시작하면 최적의 순서로 리소스를 다운로드하기 위해 각 리소스에 가져오기 우선순위를 할당한다. 이런 우선순위는 리소스의 종류와 문서의 위치에 따라 달라질 수 있다. 예를 들어, 뷰포트 내 이미지는 우선순위가 높음일 수 있지만 초기에 로드된 <link>의 우선순위나, <head>의 렌더링을 막는 CSS라면 매우 높음일 수 있다. 브라우저는 대체로 우선순위를 잘 할당하는 편이지만 모든 경우에 최선의 선택을 하진 않는다.

이번 아티클에서, 우리는 리소스의 상대적 중요도(높음 또는 낮음)를 암시할 수 있는 importance 속성과 우선순위 힌트(Priority Hints)를 이야기한다. 우선순위 힌트는 코어 웹 바이탈을 최적화하는 데 도움이 될 수 있다.

A filmstrip view comparing two tests of the Google Flights homepage. At bottom, Priority Hints are used to boost the priority of the hero image, resulting in a 0.7 second decrease in LCP. 구글 항공편 서비스 테스트에서 최대 콘텐트풀 페인트(LCP, Largest Contentful Paint)를 2.6초에서 1.9초로 개선한 우선순위 힌트

요약

우선순위 힌트가 도움이 될 수 있는 몇 가지 주요 영역:

이미지 요소에 importance="high"를 지정하여 LCP 이미지의 우선순위를 높이면, LCP가 더 빨리 일어난다.
현재 일반적으로 사용되는 방법(async 스크립트에 <link rel="preload">를 추가하는 것)보다 더 나은 의미 체계를 사용하여 async 스크립트의 우선순위를 높인다.
바디 영역 후반부의 스크립트 우선순위를 낮춰서 더 나은 방법으로 이미지를 처리한다.

이전 부터, 개발자들은 preload와 preconnect를 사용하여 리소스 우선순위에 영햐을 줄 수 있었지만, 제한적이었다. 우선순위 힌트는 이런 리소스 힌트(Resource Hints)를 보완해 주지만, 모두 적절한 위치에 있는지 이해하는 것이 필수적이다. preload를 사용하면, 브라우저에서 미리 로드하려는 중요한 리소스(critical resources)를 확인할 수 있다. 이는 스타일 시트에 포함된 글꼴, 배경 이미지 또는 스크립트에서 로드된 리소스와 같이 쉽게 검색할 수 없는 것에 유용하다. preconnect는 교차 출처 서버 연결을 준비하는 데 도움이 되며 Time-to-first-byte 같은 지표를 개선하는 데 도움이 될 수 있고 출처를 알고 있지만 반드시 필요한 리소스의 정확한 URL이 아닐 때 유용하다.

우선순위 힌트는 개발자가 특정 리소스의 중요도를 나타내는 데 사용할 수 있는 마크업 기반(importance 속성을 통해 사용할 수 있는) 신호이다. 자바스크립트 및 fetch API에 이런 힌트를 사용하여 데이터에 대한 리소스 가져오기 우선순위에 영향을 줄 수 있다. 우선순위 힌트는 preload를 보완할 수도 있다. 최대 콘텐트풀 이미지를 가져올 때 preload를 하더라도 여전히 우선순위가 낮을 것이다. 다른 조기 우선순위가 낮은 리소스에 의해 밀리는 경우, 우선순위 힌트를 사용하면 이미지 로딩 시간에 도움이 될 수 있다.

우선순위 힌트는 크롬 96+(작성 당시 크롬 베타, 4주 후 안정화 버전)에서 origin trial로 사용할 수 있는 실험 기능이다. 개발자들이 사용해 보고 피드백을 제공하길 바란다. 이 기능이 유지되는 것은 개발자들의 피드백에 달려 있다. 크롬 플래그를 통해 우선순위 힌트를 사용해 볼 수도 있다.

리소스 우선순위

리소스 다운로드 순서는 페이지의 모든 리소스에 대해 브라우저에서 지정한 우선순위에 따라 다르다. 다양한 요인이 우선순위 계산 로직에 영향을 줄 수 있다. 예를 들어,

CSS, 폰트, 스크립트, 이미지 그리고 서드파티 리소스들은 다른 우선순위가 할당된다.
문서에서 리소스를 참조하는 위치나 순서도 리소스의 우선순위에 영향을 준다.
preload 리소스 힌트는 브라우저가 리소스를 더 빠르게 검색하여 문서가 로드되기 전 로드하여 우선순위에 영향을 주는 데 도움이 된다.
async or defer 스크립트도 우선순위 계산을 바꾼다.

다음 표에서는 이러한 요소를 고려하여 현재 크롬에서 대부분의 리소스 우선순위와 순서가 어떤지 보여준다.

	레이아웃 차단	레이아웃 차단 단계에서 로드	@cols=3:레이아웃 차단 단계에서 한 번에 하나씩 로드
Blink 우선순위	매우 높음	높음	중간	낮음	매우 낮음
개발자 도구 우선순위	가장 높음	높음	중간	낮음	가장 낮음
	주요 리소스
	CSS* (조기)		CSS* (지연)		CSS (불일치)
		스크립트 (조기** 또는 프리로드 스캐너가 아닐 때)	스크립트 (**지연)	스크립트 (비동기)
	폰트	폰트 (preload)
		import
		이미지 (뷰포트 내)		이미지
				미디어
				SVG 문서
					prefetch
		preload*
		XSL
	XHR (동기)	XHR/fetch* (비동기)
			favicon

* "as"를 사용하는 preload 또는 "type"을 사용하는 fetch는 요청하는 유형의 우선순위를 사용한다 (예: preload as="stylesheet"는 가장 높은 우선순위를 사용함). "as"가 없으면 XHR처럼 동작한다.

** "조기"는 preload 되지 않은 이미지가 요청되기 전에 요청되는 것으로 정의된다. ("지연"은 이후)

*** 미디어 유형이 일치하지 않는 CSS는 preload 스캐너에서 가져오지 않고 주요 파서가 해당 구문에 접근할 때만 처리가 된다. 이는 일반적으로 매우 늦게 가져오므로 "지연" 우선순위를 의미한다.

브라우저는 우선순위를 찾은 순서에 따라 동일한 우선순위로 계산된 리소스들을 다운로드한다.' 정도로 개선하는게 좋겠습니다. 크롬 개발자 도구의 네트워크 탭에서 페이지 로딩 시 리소스마다 할당된 우선순위를 확인할 수 있다. (표 상단을 우클릭하여 우선순위 열을 체크해야 한다.)

A screenshot of assets listed in the network tab of Chrome's DevTools. The columns read, from left to right: name, status, type, initiator, size, time, and priority. BBC 뉴스 상세 페이지에서 type = "font" 리소스의 우선순위

우선순위 힌트가 필요한 경우

브라우저 우선순위 로직과 이미 알려진 몇 가지 트릭을 사용하여 (리소스의) 다운로드 순서를 다음과 같이 조정할 수 있다.

다운로드하려는 순서에 따라 <script>, <link> 같은 리소스 태그를 배치한다. 우선순위가 같은 리소스는 보통 발견한 순서대로 로드된다.
preload 리소스 힌트를 사용하여 조기에 필요한 리소스들, 특히 브라우저가 조기에 쉽게 발견할 수 없는 리소스들을 더 일찍 다운로드한다.
async 또는 defer를 사용하여 다른 리소스를 차단하지 않고 스크립트를 다운로드한다.
브라우저가 더 중요한 상단부 리소스에 이용 가능한 대역폭을 사용할 수 있도록 하단부 콘텐츠는 지연 로드한다.

이런 기법들은 브라우저의 우선순위 계산을 제어하여 성능과 코어 웹 바이탈를 개선하는 데 도움이 된다. 예를 들어, 주요한 배경 이미지가 preload되어 있으면 브라우저가 이를 더 빨리 발견할 수 있어 최대 콘텐트풀 페인트(LCP)가 개선된다.

가끔 이런 방법들은 애플리케이션의 리소스 우선순위를 최적화하는데 충분하지 않을 수 있다. 다음과 같이 우선순위 힌트가 도움이 될 수 있는 시나리오를 생각해 볼 수 있다.

상단부 이미지가 몇 개 있지만, 모든 이미지들의 우선순위가 같을 필요는 없다. 예를 들어 캐러샐 이미지의 경우 첫 번째로 보이는 이미지만 우선순위가 높으면 된다.
뷰포트 안에 있는 히어로 이미지(역자 주: 히어로 이미지 - 일반적으로 전면과 중앙에 웹 페이지에서 눈에 띄게 배치되는 큰 웹 배너 이미지)들은 낮은 우선순위에서 시작한다. 레이아웃 작업이 완료되면, 크롬은 뷰포트 내에 히어로 이미지들을 발견하고 우선순위를 올린다(불행히도 개발자 도구는 최종 우선순위만 표시한다 - WebPageTest는 둘 다 표시할 것이다). 이는 일반적으로 이미지 로드에 상당한 지연을 준다. 마크업에서 우선순위 힌트를 높음으로 제공하면 훨씬 빨리 로딩을 시작하게 된다. CSS 배경으로 포함된 LCP 이미지를 조기 발견하는 데는 여전히 preload가 필요하고 preload에 importance="high"를 조합할 수 있다. 그렇지 않으면 이미지는 기본적으로 "낮음" 우선순위로 시작된다.
스크립트를 async나 defer로 선언하면 브라우저에게 스크립트를 비동기로 로드하도록 지시한다. 하지만, 위 표에서 볼 수 있듯 이런 스크립트엔 "낮음" 우선순위가 할당된다. 특히 사용자 경험에 중요한 영향을 주는 스크립트의 경우에 비동기 다운로드를 보장하면서 우선순위를 높이고 싶을 것이다.
자바스크립트 fetch() API를 사용하여 리소스나 데이터를 비동기적으로 가져올 수 있다. 브라우저는 fetch에 "높음" 우선순위를 할당한다. 모든 fetch가 "높음" 우선순위로 실행되는 것을 원하지 않고 대신 다른 우선순위 힌트를 사용하고 싶은 상황이 있을 수 있다. 이는 백그라운드 API 호출을 실행하고 자동 완성과 같이 사용자 입력에 응답하는 API 호출과 섞을 때 우선순위를 지정하는게 유용할 수 있다. 백그라운드 API 호출은 "낮음" 우선순위로, 대화형 API 호출은 "높음" 우선순위로 지정할 수 있다.
브라우저는 CSS와 폰트를 "높음" 우선순위로 지정하지만 이런 모든 리소스들이 LCP에 다 똑같이 중요하지 않거나 필요하지 않을 수도 있다. 우선순위 힌트를 사용하면 이런 리소스 중 일부의 우선순위를 낮출 수 있다.

`importance` 속성

Origin Trial로 제공되는 우선순위 힌트 관련 실험 기능을 사용하면 importance 속성을 사용하여 우선순위 힌트를 제공할 수 있다. 해당 속성은 link, img, script, iframe 태그에서 사용할 수 있다. 이 속성을 사용하면 지원되는 태그를 사용하여 다운로드할 때 CSS, 폰트, 스크립트, 이미지 및 iframe과 같은 리소스 유형에 우선순위를 지정할 수 있다. 중요도 속성은 다음 세 가지 값 중 하나다:

high: 사용자가 리소스를 높은 우선순위로 간주하고 브라우저의 휴리스틱(역자 주: 경험적인 지식을 통해 대략적인 해결책을 찾는 과정)이 리소스를 차단하지 않는 한 브라우저가 리소스를 높은 우선순위에 두길 원한다.
low: 사용자가 리소스를 낮은 우선순위로 간주하고 브라우저의 휴리스틱이 허용되는 경우 낮은 우선순위에 두길 원한다.
auto: 이는 기본값으로 별도 사용자가 원하는 선호가 없으며 브라우저가 적절하게 우선순위를 결정하도록 한다.

다음은 마크업 및 스크립트에서 importance 속성을 사용하는 몇 가지 예시이다.

<!-- 이 상단부 이미지는 높은 우선순위가 되지 않았으면 한다. -->
<img src="/images/in_viewport_but_not_important.svg" importance="low" alt="I'm an unimportant image!">

<!-- 리소스를 조기에 가져오고 우선순위를 낮추고 싶다. -->
<link rel="preload" href="/js/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'low'}).then(data => {
    // 낮은 우선순위 fetch 트리거
  });
</script>

<!-- 이 iframe은 서드 파티 콘텐츠로 낮은 우선순위로 로드될 수 있다. -->
<iframe src="https://example.com" width="600" height="400" importance="low"></iframe>

iframe에 우선순위 힌트가 설정되면, 그 우선순위는 해당 iframe의 주요 리소스에만 적용이 된다. 그 iframe이 로드하는 모든 하위 리소스들은 다른 리소스에 적용되는 동일한 규칙을 통해 우선순위가 지정된다.

브라우저 우선순위와 `importance`

다음 표와 같이 importance 속성을 다양한 리소스에 적용하여 잠재적으로 계산된 우선순위를 높이거나 낮출 수 있다. importance="auto"(◉)는 해당 유형의 리소스 기본 우선순위를 나타낸다.

	레이아웃 차단	레이아웃 차단 단계에서 로드	@cols=3:레이아웃 차단 단계에서 한 번에 하나씩 로드
Blink 우선순위	매우 높음	높음	중간	낮음	매우 낮음
개발자 도구 우선순위	가장 높음	높음	중간	낮음	가장 낮음
주요 리소스	◉
CSS* (조기)	⬆◉	⬇
CSS* (지연)		⬆	◉	⬇
스크립트 (조기** 또는 프리로드 스캐너가 아닐 때)		⬆◉		⬇
스크립트* (지연)		⬆	◉	⬇
스크립트 (async/defer)		⬆		◉⬇
폰트	◉
폰트 (preload)		⬆◉		⬇
import		◉
이미지 (뷰포트 내)		⬆◉		⬇
이미지		⬆		◉⬇
미디어 (비디오/오디오)		⬆		◉⬇
SVG 문서		⬆		◉⬇
XHR (동기) - deprecated	◉
XHR/fetch* (비동기)		⬆◉		⬇
preload*		⬆◉		⬇
prefetch					◉
favicon			◉
XSL		◉

** "조기"는 preload 되지 않은 이미지가 요청되기 전에 요청되는 것으로 정의된다. ("지연"은 이후)

◉: importance="auto" ⬆: importance="high" ⬇: importance="low"

뷰포트 내 이미지는 "낮음" 우선순위로 시작한 다음 레이아웃 이후 "높음"으로 올라간다. 마크업에 importance를 사용하여 태그를 만들면 즉시 "높음"으로 시작할 수 있고 로드가 훨씬 빨라진다.

사용 예시

importance 속성을 사용하여 우선순위 힌트가 필요할 수 있는 시나리오를 해결할 수 있다.

LCP 이미지 우선순위 상승

importance="high"를 지정하여 LCP 또는 주요 이미지들의 우선순위를 올릴 수 있다.

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

다음은 우선순위 힌트를 적용한 LCP 배경 이미지가 있는 구글 항공편 서비스 페이지와 그렇지 않은 것을 비교한다. 우선순위를 높음으로 설정하여 LCP를 2.6초에서 1.9초로 개선했다.

gif 우선순위 힌트를 사용하도록 구글 항공편 서비스 페이지를 다시 작성하기 위해 Cloudflare 작업자를 통해 수행한 테스트이다.

상단부 이미지의 낮은 우선순위

최상단 이미지들 중 캐러셀이 있다면, 일부는 아주 중요하지 있고 importance 속성을 낮게 두는 방식으로 사용할 수 있다.

<ul class="carousel">
  <img src="img/carousel-1.jpg" importance="high">
  <img src="img/carousel-2.jpg" importance="low">
  <img src="img/carousel-3.jpg" importance="low">
  <img src="img/carousel-4.jpg" importance="low">
</ul>

초기 Oodle 앱 실험에서 로드 시 나타나지 않는 이미지의 우선순위를 낮추기 위해 이것을 사용했고, 로딩 시간을 2초로 줄이는 데 도움이 되었다.

preload된 리소스의 낮은 우선순위

preload 리소스와 다른 주요 리소스들과의 경쟁을 막기 위해, 우선순위를 낮추는 힌트를 제공할 수 있다. 이미지, 스크립트, CSS에 이 기법을 사용할 수 있다.

<!-- preload 스크립트 중 중요하지 않은 건에 낮은 우선순위를 부여 -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" importance="low">

<!-- preload CSS와 히어로 이미지가 다른 리소스들을 차단하지 않도록 처리 -->
<link rel="preload" as="style" href="theme.css" importance="low" onload="this.rel=stylesheet">

스크립트의 우선순위 재지정

페이지의 일부를 대화형으로 만드는데 필요한 스크립트는 필수적이지만 다른 리소스를 차단해서는 안 된다. 이를 위해 우선순위가 높은 비동기로 처리할 수 있다.

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

특정 DOM 상태에 의존하는 스크립트는 비동기로 처리할 수 없다. 하지만 이것이 페이지의 아래쪽에 있는 경우 더 낮은 우선순위로 다운로드하게 만들 수 있다.

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

중요하지 않은 데이터를 가져올 때 낮은 우선순위 처리

브라우저는 "높음" 우선순위로 fetch를 실행한다. 동시에 실행될 수 있는 fetch가 여러 개 있는 경우 더 중요한 데이터를 처리하는데 "높음"인 기본 우선순위를 사용하고, 덜 중요한 데이터일 경우 "낮음" 우선순위를 사용할 수 있다.

// 중요한 데이터 정합성 체크 (기본값인 "높음" 사용)
let authenticate = await fetch('/user');

// 덜 중요한 콘텐츠 데이터 (낮은 우선순위)
let suggestedContent = await fetch('/content/suggested', {importance: 'low'});

우선순위 힌트 구현 참고 사항

우선순위 힌트는 위에서 설명한 대로 특정한 상황에서 성능을 향상시킬 수 있다. 이 기능이 미치는 실제 영향에 대해 Origin Trial을 통해 깊게 이해할 수 있는 기회로 삼고자 한다. 따라서 피드백에 대한 명확한 기대치를 정하는 것이 중요하다.

importance 속성은 지시문이 아니라 힌트다. 브라우저는 개발자들의 설정을 따르려고 할 것이다. 하지만 충돌이 발생할 경우 브라우저가 리소스 우선순위에 대한 자체의 기본 설정을 적용할 수 있다.
우선순위 힌트는 preload와 혼동되어서는 안 된다. 구분되어야 하는 이유는 다음과 같다 우선순위 힌트는 우선순위를 세분화하여 preload를 보완할 수 있다. 페이지 상단의 LCP 이미지에 대해 preload가 이미 지정된 경우, "높음" 우선순위 힌트가 대단한 이점을 가져오지 않을 수 있다. 하지만 preload가 덜 중요한 다른 리소스들 뒤에 있다면 "높음" 우선순위 힌트는 LCP를 향상시킬 수 있다. 만약 주요 이미지가 CSS 배경 이미지인 경우, importance="high"로 preload를 해야 한다.
- preload는 힌트가 아닌 필수이다.
- preload의 영향을 관찰하고 측정하는 것이 더 쉽다.
우선순위 지정으로 인해 얻을 눈에 띄는 이점은 사용 가능한 네트워크 대역폭에서 많은 리소스들이 경합할 때 적절한 순서를 지정할 수 있다는 것이다. 이는 병렬 다운로드가 불가한 HTTP/1.x 연결이나 대역이 낮은 HTTP/2 연결에서 가능하다. 우선순위 지정은 이런 환경에서 병목 현상을 해결할 수 있다.
CDN은 HTTP/2 우선순위를 균일하게 구현하지 않는다. 브라우저가 우선순위 힌트를 사용하여 우선순위를 전달하더라도 CDN은 리소스의 우선순위를 필요한 순서대로 다시 지정하지 않을 수 있다. 이것이 우선순위 힌트의 테스트를 어렵게 만든다. 우선순위는 브라우저 내에서 내부적으로 그리고 우선순위 지정을 지원하는 프로토콜(HTTP/2와 HTTP/3)에서 모두 적용되므로 CDN 또는 출처의 지원과 관계없이 내부 브라우저 우선순위 지정에만 효용성이 있다.
초기 설계에서 우수 사례로 우선순위 힌트를 도입하는 것이 어려울 수 있다. 이는 이후 개발 사이클에 적용할 수 있는 최적화이다. 페이지에서 서로 다른 리소스들에 할당된 우선순위를 확인할 수 있으며, 예상과 일치하지 않는 경우 추가 최적화를 위해 우선순위 힌트를 도입할 수 있다.

크롬 95 이후 preload 사용

우선순위 힌트 기능은 크롬 73~76에서 트라이얼로 사용할 수 있었지만 크롬 95에서 수정된 preload의 우선순위 문제로 릴리즈되지 않았다. 크롬 95 이전에는 다른 요청보다 우선순위가 높더라도 <link rel='preload'>를 통해 처리되는 요청은 항상 preload 스캐너에서 볼 수 있는 다른 요청보다 먼저 시작되었다.

크롬 95의 수정 사항 및 우선순위 힌트의 개선을 통해 개발자가 파서에서 감지 못한 preload 리소스(폰트, import, 배경 LCP 이미지)를 미리 로드하기 위해 의도한 목적에 따라 적용하길 바란다. preload 힌트의 배치는 리소스가 미리 로드되는 시기에 영향을 미친다. preload 사용의 핵심 사항은 다음과 같다

HTTP 헤더에 preload를 포함하면 다른 모든 것보다 우선된다.
일반적으로 preload는 "중간" 우선순위보다 높은 항목에 대해 파서가 발견하는 대로 로드된다. 따라서 HTML 시작부에 preload를 포함할 때 주의해야 한다.
폰트의 preload는 head의 끝부분이나 body의 시작 부분에서 가장 잘 동작한다.
import의 preload(동적 import()나 modulepreload)는 import가 필요한 스크립트 태그 다음 수행되어야 한다(실제 스크립트가 먼저 로드/파싱 된다). 기본적으로 스크립트 태그가 종속성을 로드할 스크립트를 로드하는 경우 종속성에 대한 <link rel=preload>가 상위 스크립트 태그 뒤에 있는지 확인해야 한다. 그렇지 않으면 종속성이 기본 스크립트보다 먼저 로드될 수 있다. 종속성이 로드되는 동안 적절한 순서로 주요 스크립트를 처리할 수 있다.
이미지 preload는 우선순위가 낮고(우선순위 힌트가 없다면) 비동기 스크립트 및 기타 낮은 우선순위의 태그를 기준으로 정렬되어야 한다.

Origin Trial

우선순위 힌트 기능은 크롬 96에서 99까지 Origin Trial로 제공된다. 버전 96은 이미 미리 사용해 보고 싶은 개발자들을 위해 Canary에서 이미 제공된다. Trial에 도메인을 등록하고 테스트하려는 페이지의 head에 토큰을 포함할 수 있다.

크롬의 실험적 웹 플랫폼 기능 플래그를 활성화하여 기능을 테스트할 수도 있다.

Trial 사용

다음은 다른 우선순위들로 스크립트 파일과 이미지들의 모음 간 비교다. 이미지와 스크립트의 기본 우선순위는 크롬 94에서 적용된다는 점을 유의 바란다. 반면 importance 속성을 통해 적용되는 우선순위는 크롬 96에서 테스트할 때 적용된다.

다음은 HTML 파일에 포함된 관련 마크업이다.

<!-- <head> 내 trial 토큰을 포함 -->
<meta http-equiv="origin-trial" content="{Replace with origin trial token}">

<!-- 스크립트 파일의 낮은 우선순위 -->
<script src="script.js" importance="low"></script>

<!-- 이미지의 우선순위 조작 -->
<img src="Background.jpg" width="400" importance="low">
<img src="Sunset.jpg" width="400" importance="high">

<!-- 아무 것도 지정하지 않는 다면 importance="auto"가 기본으로 동작한다. -->
<img src="Flower.jpg">

크롬 94의 우선순위 - 안정화 버전

크롬 96의 우선순위 - Canary

결론

개발자들은 preload 동작의 수정 사항과 최근 Core Web Vital 및 LCP에 중점을 둔 우선순위 힌트에 관심이 있을 것이다. 이제 원하는 로딩 순서를 달성하기 위해 사용할 수 있는 추가 기법이 생겼다. 더 많은 개발자들이 평가판을 등록하고 사용 가능한 채널을 통해 피드백을 주길 바란다.

#browser

이진우2021.11.17

Back to list