Оптимизировать приоритет изображений

Браузеры используют эвристические алгоритмы, чтобы назначать приоритеты загрузки изображений, но эти настройки по умолчанию не всегда соответствуют показателю Largest Contentful Paint (LCP) вашей страницы.

Используя fetchpriority в элементе <img>, вы можете явно указать браузеру на важность изображения, чтобы важные изображения загружались быстрее, а неважные не конкурировали за пропускную способность.

Атрибут loading=lazy предотвращает скачивание изображений, которые находятся далеко за пределами экрана, что позволяет задать приоритет для изображений.

Рекомендации по внедрению

1. Определите изображение, которое будет использоваться для LCP. Выберите изображение, которое, скорее всего, будет использоваться для отрисовки самого крупного контента (обычно это главное изображение в верхней части страницы).
2. Повысьте приоритет LCP. Добавьте fetchpriority="high" в элемент <img> для кандидата на LCP.
3. Снизьте приоритет некритичных изображений. Для изображений, которые являются частью вторичного интерфейса или показываются только после взаимодействия с пользователем (например, мегаменю, модальные окна или слайды карусели за пределами экрана), добавьте fetchpriority="low".
4. Оптимизируйте отложенную загрузку. Никогда не используйте loading="lazy" для изображения LCP. Для стандартных изображений в нижней части страницы достаточно использовать 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">

Рекомендации

• ОБЯЗАТЕЛЬНО. Всегда применяйте fetchpriority="high" к изображению LCP.
• ОБЯЗАТЕЛЬНО. Используйте fetchpriority="high" только для одного или двух самых важных изображений, чтобы избежать перегрузки сети и снижения приоритета.
• ОБЯЗАТЕЛЬНО. Используйте fetchpriority="low" для изображений, которые технически находятся в верхней части страницы, но изначально скрыты (например, скрытые слайды карусели, изображения в мегаменю).
• ОБЯЗАТЕЛЬНО. Не используйте fetchpriority="low" для стандартных изображений в нижней части страницы, для которых уже используется loading="lazy". Эти изображения должны загружаться с обычным приоритетом, как только они попадают в область просмотра.
• РЕКОМЕНДУЕТСЯ не использовать fetchpriority="auto". Если вы хотите использовать приоритет по умолчанию, не добавляйте атрибут, чтобы не загромождать HTML-код.
• НЕ комбинируйте fetchpriority="high" с loading="lazy".
• НЕ ИСПОЛЬЗУЙТЕ устаревший атрибут importance. Он заменен на fetchpriority и не поддерживается ни одним браузером.
• НЕ ИСПОЛЬЗУЙТЕ устаревшее значение loading="auto". Изначально он поддерживался в Chrome, но затем был удален и сейчас не поддерживается ни в одном браузере.

Резервная стратегия

Атрибут fetchpriority – это прогрессивное улучшение для элемента <img>. Если браузер не поддерживает этот атрибут, он игнорируется, и браузер использует эвристику приоритета по умолчанию.