<link rel="preload">를 사용하여 리소스를 미리 로드하면 리소스가 곧 필요할 것이라는 신호를 브라우저에 보냅니다. 하지만 미리 로드는 리소스 유형의 기본 우선순위를 상속하며, 특히 이미지의 경우 이 우선순위가 낮습니다. fetchpriority를 사용하면 이 상대적 우선순위를 미세 조정할 수 있습니다. 특히 이미지 미리 로드가 높은 우선순위로 미리 로드되도록 하여 더 일찍 시작하고 더 많은 대역폭 리소스를 사용할 수 있습니다.
구현 방법
- 미리 로드 후보 식별: 브라우저에서 초기에 발견하지 못하지만 (예: CSS의 동영상 포스터 이미지 또는 배경 이미지) 페이지의 모양에 필수적인 리소스를 찾습니다.
- 중요 이미지 미리 로드 우선순위 높이기: LCP 이미지 또는 기본적으로 우선순위가 지정되지 않은 다른 중요 이미지의 경우
<link rel="preload" fetchpriority="high">를 사용하여 다른 미리 로드보다 우선순위가 높도록 합니다. 글꼴은 기본적으로 이미 우선순위가 높습니다. - 중요하지 않은 미리 로드의 우선순위 낮추기: 초기 렌더링에 중요하지 않은 리소스 (예: 배경 동영상 또는 보조 글꼴)의 경우
<link rel="preload" fetchpriority="low">를 사용합니다. - 리소스 유형과 조정:
as유형마다 기본 우선순위가 다릅니다. 필요한 경우fetchpriority를 사용하여 이러한 기본값을 재정의하세요.
예시 코드
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
권장사항
- 필수: 네트워크 경합과 우선순위 향상 효과의 희석을 방지하려면 최대 1~2개의 중요한 이미지 미리 로드에만
fetchpriority="high"를 사용하세요. - 필수: 최대 콘텐츠 페인트 (LCP) 이미지에
fetchpriority="high"를 사용합니다. - 권장사항: 대역폭 경합을 방지하기 위해 페이지의 총 미리 로드 수를 최대 이미지 2개, 필수 글꼴 2~3개로 제한합니다.
- 브라우저가 조기에 시작하되 중요한 리소스 (특히 중요하지 않은 글꼴)를 희생하지 않도록 하려면 미리 로드에
fetchpriority="low"를 사용하세요. - 미리 로드가 사용되도록
as속성을 올바르게 지정해야 합니다. - 권장사항: 배경 이미지의 미리 로드에 의존하는 대신
<img>태그를 통해 HTML에서 중요한 리소스 (예: LCP 이미지)를 정적으로 검색할 수 있도록 합니다. - 권장사항: 글꼴 미리 로드에 항상
crossorigin속성이 있는지 확인합니다 (동일 출처인 경우에도). - 지원 중단된
importance속성을 사용하지 마세요.fetchpriority로 대체되었습니다.
대체 전략
<link rel="preload">의 fetchpriority 속성은 점진적 개선입니다. 이를 지원하지 않는 브라우저는 해당 리소스 유형의 기본 우선순위를 사용하여 리소스를 미리 로드합니다. 호환성을 보장하려면 항상 올바른 as 및 type 속성을 제공하세요.