Справочник HTML & CSS

fetchpriority

Подсказка, насколько срочен ресурс по сравнению с другими того же типа, — например, чтобы главный баннер загрузился раньше остальных картинок.

Синтаксис

<img src="hero.jpg" alt="…" fetchpriority="high">

Параметры

Параметр	Тип	Описание
fetchpriority	high \| low \| auto	`high` — загрузить раньше, `low` — позже, `auto` — решает браузер (по умолчанию).

Примеры

Большой баннер вверху получает приоритет, маленькая декоративная картинка подождёт:

<img src="/media/photo-800x500.jpg" alt="Our cafe" width="400" height="250" fetchpriority="high">
<img src="/media/photo-200x200.jpg" alt="A cup" width="100" height="100" fetchpriority="low">

Примечания

Работает у <img>, <link>, <script> и <iframe>. Типичное применение — самая большая картинка первого экрана: от неё зависит, как быстро страница выглядит загруженной (LCP). Не ставьте high всему подряд — тогда приоритета не будет ни у чего. Это подсказка, а не приказ. Поддерживается всеми актуальными браузерами с 2024 года.

См. также

<img> — Картинка.
loading — Отложенная загрузка картинок и фреймов, которые пока не видны.
<link> — Подключает к странице внешний ресурс: файл стилей, иконку сайта, шрифт.
<script> — Подключает или встраивает JavaScript; `<noscript>` показывает запасное содержимое, если скрипты выключены.

Вопросы и ответы по теме

Как ускорить загрузку страницы

В учебнике

Изображения — Тег img, атрибуты src и alt, размеры, подпись figure и figcaption, форматы картинок и отложенная загрузка.

Спасибо, что читаете!