优化图片优先级

Web 功能： 提取优先级 延迟加载图片和 iframe

浏览器会使用启发法为图片分配加载优先级，但这些默认设置可能并不总是与网页的 Largest Contentful Paint (LCP) 一致。

在 <img> 元素上使用 fetchpriority，您可以向浏览器明确表明图片的重要性，从而确保关键图片加载速度更快，而非必需图片不会争用带宽。

loading=lazy 属性可防止在图片距离屏幕足够远时下载图片，这有助于进一步确定图片的优先级。

如何实现

  1. 确定 LCP 图片：确定哪张图片最有可能成为 Largest Contentful Paint（通常是网页顶部的主打图片）。
  2. 提高 LCP 优先级：将 fetchpriority="high" 添加到 LCP 候选元素的 <img> 元素中。
  3. 降低非关键图片的优先级：对于属于次要界面或仅在用户互动后才显示的图片（例如大型菜单、模态窗口或屏幕外轮播幻灯片），请添加 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> 元素的渐进增强。如果浏览器不支持该属性，则会忽略该属性，并使用其默认优先级启发法。