이미지 우선순위 최적화

브라우저는 휴리스틱을 사용하여 이미지에 로드 우선순위를 할당하지만, 이러한 기본값은 페이지의 최대 콘텐츠 페인트 (LCP)와 항상 일치하지 않을 수 있습니다.

<img> 요소에 fetchpriority를 사용하면 브라우저에 이미지의 중요도를 명시적으로 알릴 수 있으므로 중요한 이미지는 더 빠르게 로드되고 필수적이지 않은 이미지는 대역폭을 두고 경쟁하지 않습니다.

loading=lazy 속성은 화면에서 충분히 벗어난 이미지가 다운로드되지 않도록 하여 이미지의 우선순위를 지정하는 데 도움이 됩니다.

구현 방법

1. LCP 이미지 식별: 최대 콘텐츠 페인트가 될 가능성이 가장 높은 이미지 (일반적으로 페이지 상단의 히어로 이미지)를 결정합니다.
2. LCP 우선순위 높이기: LCP 후보의 <img> 요소에 fetchpriority="high"를 추가합니다.
3. 중요하지 않은 이미지의 우선순위 낮추기: 보조 UI의 일부이거나 사용자 상호작용 후에만 표시되는 이미지 (예: 메가 메뉴, 모달, 화면 밖 캐러셀 슬라이드)의 경우 fetchpriority="low"를 추가합니다.
4. 지연 로드 최적화: LCP 이미지에 loading="lazy"를 사용하지 마세요. 표준 스크롤해야 볼 수 있는 이미지의 경우 사용자가 이미지 근처로 스크롤할 때까지 요청을 지연하는 데 loading="lazy"이면 충분합니다. 사용자가 스크롤할 때 정상적인 우선순위로 로드되어야 하므로 이러한 이미지에는 fetchpriority="low"를 추가하지 마세요. 기술적으로 '스크롤 없이 볼 수 있는 부분'에 있지만 처음에는 표시되지 않는 이미지 (예: 숨겨진 캐러셀 슬라이드 또는 메가 메뉴)에는 fetchpriority="low"를 사용하세요. 이러한 숨겨진 이미지의 경우 loading="lazy"를 사용해도 됩니다. 브라우저는 낮은 우선순위를 고려하면서 요청 타이밍을 처리합니다.
5. 기본 우선순위 선호: 이미지에 일반 로드 우선순위가 있어야 하는 경우 fetchpriority 속성을 auto로 설정하는 대신 완전히 생략합니다. 이는 브라우저의 기본 휴리스틱을 사용하면서 HTML을 더 깔끔하게 유지하기 위한 스타일 규칙입니다.

예시 코드

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

권장사항

• 필수: 항상 LCP 이미지에 fetchpriority="high"를 적용합니다.
• 필수: 네트워크 경합과 우선순위 향상 효과의 희석을 방지하려면 최대 1~2개의 중요한 이미지에만 fetchpriority="high"를 사용하세요.
• 필수: 기술적으로 '스크롤 없이 볼 수 있는 부분'에 있지만 처음에는 숨겨져 있는 이미지 (예: 숨겨진 캐러셀 슬라이드, 메가 메뉴 이미지)에는 fetchpriority="low"를 사용합니다.
• 필수: 이미 loading="lazy"를 사용 중인 표준 스크롤해야 볼 수 있는 이미지에는 fetchpriority="low"를 사용하지 마세요. 이러한 이미지는 표시 영역에 들어가면 일반 우선순위로 로드되어야 합니다.
• 권장사항: fetchpriority="auto"를 사용하지 마세요. 기본 우선순위를 원하는 경우 속성을 완전히 생략하여 HTML을 깔끔하게 유지하세요.
• fetchpriority="high"를 loading="lazy"와 결합하지 마세요.
• 지원 중단된 importance 속성을 사용하지 마세요. fetchpriority로 대체되었으며 어떤 브라우저에서도 지원되지 않습니다.
• 지원 중단된 loading="auto" 값을 사용하지 마세요. 처음에는 Chrome에서 지원되었지만 삭제되었으며 현재는 어떤 브라우저에서도 지원되지 않습니다.

대체 전략

fetchpriority 속성은 <img> 요소의 점진적 개선입니다. 브라우저에서 지원하지 않는 경우 속성이 무시되고 브라우저는 기본 우선순위 휴리스틱을 사용합니다.