Fetchpriority를 통해 자원 로드 최적화

배경

프리 로딩을 사용하면 전체 웹 페이지 로딩이 완료되기 전에 주요 콘텐츠를 로드하여 사용자에게 더 나은 경험을 제공하고 대기 시간을 줄일 수 있습니다. 그러나 경우에 따라 프리 로드된 리소스의 우선 순위를 추가로 분류해야 합니다. 프리 로딩만으로는 리소스 우선 순위 지정을 완전히 제어할 수 없으므로 fetchpriority 속성이 도입되어 이를 보완합니다.

목표

• 리소스 검색의 우선 순위에 영향을 줍니다.
• 프리 로드된 리소스의 로딩 순서를 보완합니다.

우선 순위는 브라우저에 대한 리소스의 상대적 중요도를 나타냅니다. 적절한 우선 순위 지정은 최적의 로딩을 보장하여 웹 사용자 경험을 향상시킵니다.

리소스 우선 순위

브라우저가 웹 페이지 구문 분석을 시작하고 이미지, JavaScript, CSS 및 기타 리소스를 다운로드할 때 각 리소스에 다운로드 우선 순위를 나타내는 fetchpriority 플래그를 할당합니다.

리소스가 다운로드되는 순서는 CSS, 글꼴, 스크립트, 이미지 및 타사 리소스에 할당된 여러 요소로 결정되는 이 우선 순위 플래그에 따라 달라집니다.

• 문서 내 리소스의 위치 또는 순서가 우선 순위에 영향을 미칩니다.
• 프리 로딩 리소스 힌트는 브라우저가 리소스를 더 빨리 검색하도록 도와 문서 구문 분석이 완료되기 전에 로드할 수 있어 우선 순위에 영향을 미칩니다.
• 스크립트의 async 또는 defer 속성이 우선 순위 계산에 영향을 미칩니다.

브라우저는 검색된 순서대로 리소스를 다운로드합니다. DevTools 네트워크에서 할당된 우선 순위를 확인할 수 있습니다.

그러나 리소스에 할당된 기본 우선 순위가 모든 시나리오에서 항상 최적인 것은 아닙니다.

우선 순위 힌트를 사용해야 하는 경우

기술적 사용 사례:

• 우선 순위 요구 사항이 다른 여러 above-the-fold 이미지: 이미지 캐러셀에서는 처음 보이는 이미지에만 가장 높은 우선 순위를 부여해야 합니다.
• viewport 내의 이미지가 처음에 낮은 우선 순위로 표시된 경우: Chrome은 레이아웃이 완료된 후 이미지가 보이는 것을 감지하면 자동으로 우선 순위를 높여 로딩이 지연될 수 있습니다. 우선 순위 힌트를 사용하면 더 높은 우선 순위로 더 빨리 로드할 수 있습니다.
• async 또는 defer로 표시된 스크립트: 이러한 스크립트에는 "낮음" 우선 순위가 할당됩니다. 그러나 사용자 경험에 중요한 특정 스크립트는 비동기 로딩을 유지하면서도 우선 순위가 높아져야 할 수 있습니다.
• CSS 및 글꼴: 브라우저는 기본적으로 CSS 및 글꼴에 높은 우선 순위를 할당하지만 모든 글꼴이 똑같이 중요한 것은 아닙니다. 우선 순위 힌트는 중요도가 낮은 리소스의 우선 순위를 낮추는 데 도움이 될 수 있습니다.
• fetch()로 리소스 가져오기: 브라우저는 기본적으로 fetch() 요청에 높은 우선 순위를 할당합니다. 경우에 따라 모든 요청에 높은 우선 순위를 부여해서는 안 됩니다. 백그라운드 API 호출은 낮은 우선 순위로 표시할 수 있고, 대화형 API 호출은 높은 우선 순위로 표시할 수 있습니다.
• 제한된 네트워크 대역폭 환경: 리소스가 사용 가능한 대역폭을 놓고 경쟁할 때 우선 순위 지정 이점이 특히 중요해집니다.

fetchpriority 속성

fetchpriority 속성은 세 가지 값을 허용합니다.

• high: 리소스가 중요하다고 간주되어 브라우저에서 우선 순위를 지정해야 합니다.
• low: 리소스가 덜 중요하며 우선 순위가 낮아야 합니다.
• auto: 브라우저가 기본 로직에 따라 우선 순위를 결정합니다.

사용 예:

<!-- 이 above-the-fold 이미지는 중요하지 않으므로 우선 순위를 낮춥니다. -->
<img
  src="/images/in_viewport_but_not_important.svg"
  fetchpriority="low"
  alt="I'm an unimportant image!"
/>

<!-- 리소스에 대한 초기 가져오기를 시작하되 우선 순위를 낮추려고 합니다. -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low" />

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

<!-- 이 iframe의 타사 콘텐츠는 낮은 우선 순위로 로드할 수 있습니다. -->
<iframe src="https://example.com" width="600" height="400" fetchpriority="low"></iframe>

LCP 이미지 우선 순위 높이기

예를 들어 Google Flights 웹 페이지에서 Largest Contentful Paint (LCP) 점수가 낮은 주요 원인 중 하나는 배경 이미지의 느린 로딩입니다. fetchpriority 속성을 사용하여 로딩 우선 순위를 높일 수 있습니다.

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

우선 순위를 높음으로 설정하면 LCP가 2.6초에서 1.9초로 향상됩니다.

above-the-fold 이미지의 우선 순위 낮추기

fetchpriority 속성을 사용하여 캐러셀에서 보이지 않는 이미지와 같이 중요도가 낮은 above-the-fold 이미지의 우선 순위를 낮출 수 있습니다.

<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>

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

미리 로드된 리소스가 다른 중요한 리소스와 경쟁하지 않도록 우선 순위를 명시적으로 낮출 수 있습니다.

<!-- 중요하지 않은 미리 로드된 스크립트에만 우선 순위 낮추기 -->
<link rel="preload" as="script" href="critical-script.js" />
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low" />

<!-- 다른 리소스를 차단하지 않고 CSS 미리 로드 -->
<link
  rel="preload"
  as="style"
  href="theme.css"
  fetchpriority="low"
  onload="this.rel='stylesheet'"
/>

스크립트 우선 순위 조정

페이지에 다른 리소스를 차단해서는 안 되는 중요한 대화형 스크립트가 포함되어 있는 경우 비동기식으로 로드하면서 우선 순위를 높게 표시할 수 있습니다.

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

스크립트가 특정 DOM 요소에 의존하는 경우 async로 표시할 수 없습니다. 그러나 above-the-fold 렌더링에 필수적이지 않은 경우 우선 순위를 낮출 수 있습니다.

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

가져오기 우선 순위 조정

기본적으로 브라우저는 높은 우선 순위로 fetch() 요청을 실행합니다. 중요하지 않은 데이터 요청의 우선 순위를 낮출 수 있습니다.

// 중요한 유효성 검사 데이터(기본 높은 우선 순위)
let authenticate = await fetch('/user');

// 중요도가 낮은 콘텐츠 데이터(낮은 우선 순위 권장)
let suggestedContent = await fetch('/content/suggested', { priority: 'low' });

고려 사항

우선 순위 힌트는 특정 사용 사례에서 성능을 향상시킬 수 있지만 몇 가지 유의해야 할 사항이 있습니다.

• fetchpriority 속성은 지시어가 아니라 힌트입니다. 브라우저는 개발자 기본 설정을 존중하려고 시도하지만 내부 우선 순위 지정 로직에 따라 이를 재정의할 수 있습니다.

• 우선 순위 힌트와 프리 로딩을 혼동하지 마십시오. 다음과 같은 서로 다른 용도로 사용됩니다.

  • 프리 로딩은 리소스 가져오기를 강제하는 반면, 우선 순위 힌트는 제안일 뿐입니다.
  • 프리 로딩은 관찰하고 측정하기가 더 쉽습니다.

• 우선 순위 힌트는 우선 순위 수준에 대한 더 세분화된 제어를 제공하여 프리 로딩을 보완합니다. LCP 이미지가 페이지 상단에서 미리 로드된 경우 high 우선 순위 힌트를 사용해도 큰 효과가 없을 수 있습니다. 그러나 중요도가 낮은 리소스 이후에 프리 로딩이 발생하면 high 우선 순위 힌트가 LCP를 개선할 수 있습니다. 중요한 CSS 배경 이미지의 경우 fetchpriority="high"를 사용하십시오.

• CDN에는 HTTP/2 우선 순위 지정에 대한 통합 구현이 없습니다.

브라우저가 우선 순위 힌트를 전달하더라도 CDN은 요청된 우선 순위 순서를 존중하지 않을 수 있습니다.

추가 참고 사항

importance 속성

importance 우선 순위 힌트는 2018년에 Chrome에서 실험적 기능으로 처음 도입된 다음 2021년에 다시 검토되었습니다. 웹 표준 프로세스의 일부로 이후 대체되었습니다.

• HTML에서 속성의 이름이 fetchpriority로 변경되었습니다.
• JavaScript에서 priority 옵션으로 대체되었습니다.

---

Leapcell은 백엔드 프로젝트 호스팅을 위한 최고의 선택입니다.

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발합니다.

무료로 무제한 프로젝트 배포

• 사용량에 대해서만 비용을 지불합니다. 요청이나 요금이 없습니다.

최고의 비용 효율성

• 유휴 요금 없이 사용한 만큼만 지불합니다.
• 예: 25달러로 평균 응답 시간 60ms에서 694만 개의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI입니다.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합입니다.
• 실행 가능한 인사이트를 위한 실시간 메트릭 및 로깅입니다.

손쉬운 확장성 및 고성능

• 쉬운 동시성 처리를 위한 자동 확장입니다.
• 운영 오버헤드가 제로입니다. 구축에만 집중하세요.

설명서에서 자세히 알아보세요!

X에서 팔로우하세요: @LeapcellHQ