Атрибут fetchpriority (от английского fetch priority, «приоритет загрузки») подсказывает браузеру, какой файл скачивать раньше, а какой позже. Закрывающий тег для него не нужен: атрибут пишется внутри открывающего тега, например fetchpriority="high", а у самого <img> закрывающего тега нет.
У атрибута три значения: high, low и auto. Это подсказка, а не команда: браузер учитывает её по своим правилам. Я проверил, как записи читаются в разметке и в скрипте, и как меняется приоритет запроса картинки, и описал только то, что подтвердилось.
<img src="hero.jpg" alt="Главное фото"
width="1200" height="600"
fetchpriority="high">В этой статье
- Что такое атрибут fetchpriority в HTML и зачем он нужен
- Для каких тегов работает fetchpriority: img, link и script
- Какие значения принимает fetchpriority: high, low и auto
- Чем fetchpriority отличается от loading, decoding и preload
- Когда повысить приоритет, а когда понизить
- Fetchpriority вместе с loading="lazy"
- Fetchpriority у link и script
- Fetchpriority в JavaScript: свойство fetchPriority
- Частые ошибки в атрибуте fetchpriority
- Шпаргалка по атрибуту fetchpriority
Что такое атрибут fetchpriority в HTML и зачем он нужен
Когда на странице много файлов, браузер сам решает, в каком порядке их просить у сервера. Обычно он угадывает неплохо, но не всегда: например, главная картинка вверху страницы может оказаться в общей очереди с остальными. Атрибут fetchpriority позволяет сказать: этот файл важнее остальных, а этот можно отложить.
Он отвечает только за порядок запросов. Он не решает, нужно ли скачивать файл вообще: это делает loading. Не меняет он и этап обработки скачанной картинки, о нём рассказывает decoding.
high: файл важнее соседей, браузеру лучше запросить его раньше.low: файл можно запросить позже соседей.auto: выбор за браузером. Так работает всё без атрибута.
В справочнике MDN это называется «Fetch Priority API», а раньше то же самое называли «Priority Hints». Подробнее в описании на MDN.
Для каких тегов работает fetchpriority: img, link и script
По описанию на MDN атрибут относится к <img>, <link> и <script>. Я создал разные элементы и проверил, есть ли у них свойство fetchPriority. Оно оказалось только у этих трёх.
| Тег | Что приоритизируется | Пример записи |
|---|---|---|
<img> | Файл картинки | <img src="a.jpg" alt="" fetchpriority="high"> |
<link> | Файл, который подключает ссылка: стили, предзагрузка | <link rel="preload" as="image" href="a.jpg" fetchpriority="high"> |
<script> | Файл скрипта | <script src="app.js" fetchpriority="low"></script> |
У <iframe>, <video>, <picture>, <source>, <input> и <canvas> свойства нет, в SVG у элемента image тоже. Если картинка лежит внутри <picture>, атрибут пишут у вложенного img, а не у source.
Пример: у каких элементов есть fetchPriority
Выберите элемент и посмотрите, есть ли у него свойство в вашем браузере.
Проверку выполняет ваш браузер, результат может отличаться от моих замеров.
Какие значения принимает fetchpriority: high, low и auto
Допустимы три значения. Любые другие браузер не отвергает, но считает их равными auto. Ниже результаты проверки свойства img.fetchPriority в браузере, на котором я проверял.
| Запись | Свойство img.fetchPriority | Пример записи |
|---|---|---|
high | high | fetchpriority="high" |
low | low | fetchpriority="low" |
auto | auto | fetchpriority="auto" |
HIGH | high: регистр не важен | fetchpriority="HIGH" |
highest | auto: такого значения нет | fetchpriority="highest" |
high с пробелом в начале | auto: пробел делает значение неверным | fetchpriority=" high" |
| Пустое значение | auto | fetchpriority="" |
| Атрибута нет | auto | <img src="a.jpg" alt=""> |
Значение auto по умолчанию, поэтому писать его незачем.
Пример: какие значения fetchpriority принимает браузер
Выберите значение и посмотрите, что записано в атрибуте и что вернуло свойство.
Свойство возвращает ваш браузер, результат может отличаться от моих замеров.
Чем fetchpriority отличается от loading, decoding и preload
Эти настройки часто путают, потому что все они связаны с картинками и скоростью. Но каждая отвечает на свой вопрос.
| Настройка | На какой вопрос отвечает | Пример записи |
|---|---|---|
loading | Когда начать скачивание: сразу или ближе к показу | loading="lazy" |
fetchpriority | В каком порядке запрашивать файлы | fetchpriority="high" |
decoding | Как превращать скачанный файл в пиксели | decoding="async" |
rel="preload" | Запросить файл заранее, до разбора остальной разметки | <link rel="preload" as="image" href="a.jpg"> |
Предзагрузка и приоритет дополняют друг друга. Как описано на MDN, в примере с главной картинкой используют обе: preload запрашивает файл заранее, а fetchpriority="high" поднимает его в очереди.
Когда повысить приоритет, а когда понизить
Выбор зависит от роли картинки на странице. Это рекомендации по смыслу, а не результаты замеров по скорости.
| Случай | Что записать | Пример записи |
|---|---|---|
| Главная картинка вверху страницы | high | <img src="hero.jpg" alt="" fetchpriority="high"> |
| Картинки в карусели, кроме первой | low | <img src="slide2.jpg" alt="" fetchpriority="low"> |
| Картинки ниже первого экрана | Обычно loading="lazy" | <img src="a.jpg" alt="" loading="lazy"> |
| Второстепенный скрипт | low | <script src="stats.js" fetchpriority="low"></script> |
| Всё остальное | Ничего не писать | <img src="a.jpg" alt=""> |
В моём замере в браузере, на котором я проверял, запрос картинки с fetchpriority="high" получил приоритет High, с low получил Low, а картинка без атрибута получила Medium. Но это начальный приоритет одного запроса. Как это отразится на скорости страницы, зависит от других файлов, и обещать ускорение нельзя. MDN предупреждает, что атрибут нужно использовать умеренно: если поднять приоритет у многих файлов, преимущество исчезает.
Отдельное замечание: high имеет смысл ставить на одну-две самые важные картинки, а не на все.
Fetchpriority вместе с loading="lazy"
Эти два атрибута решают разные задачи, но иногда оказываются на одной картинке. Важно понимать, что именно из них что делает.
Я проверил такой случай: картинка с loading="lazy" и fetchpriority="high", расположенная в первом экране. Она запросилась с приоритетом High, то есть отложенная загрузка её не задержала, потому что картинка и так была в зоне видимости. Для картинки ниже первого экрана решающим остаётся loading: ленивая картинка скачивается, когда приближается к видимой области.
<!-- первая картинка: сразу и с высоким приоритетом -->
<img src="hero.jpg" alt="" fetchpriority="high">
<!-- остальные: позже -->
<img src="a.jpg" alt="" loading="lazy">Практическое правило: главную картинку не делают ленивой, и приоритет high пишут именно ей. Остальным хватит loading="lazy". Подробнее о ленивой загрузке в статье про loading.
Fetchpriority у link и script
Атрибут работает не только у картинок. У <link> он меняет приоритет файла, который подключается ссылкой, а у <script> приоритет скрипта.
| Задача | Как записать | Пример записи |
|---|---|---|
| Предзагрузить главную картинку с высоким приоритетом | Атрибут у link с rel="preload" | <link rel="preload" as="image" href="hero.jpg" fetchpriority="high"> |
| Понизить приоритет необязательного скрипта | Атрибут у script | <script src="stats.js" fetchpriority="low"></script> |
| Поднять приоритет важного скрипта | Атрибут у script | <script src="app.js" fetchpriority="high"></script> |
Для этих двух тегов я проверил только наличие свойства, а влияние на порядок запросов описано по MDN и материалу DebugBear: браузер может поднять или понизить приоритет, итог зависит от самого браузера.
Fetchpriority в JavaScript: свойство fetchPriority
В скрипте атрибут доступен как свойство fetchPriority с большой буквой P. Запись в свойство меняет атрибут, а чтение приводит значение к допустимому.
| Действие | Что получилось | Пример записи |
|---|---|---|
| Чтение без атрибута | Вернулось auto | img.fetchPriority |
| Запись допустимого значения | Атрибут в разметке изменился | img.fetchPriority = 'low' |
| Запись неверного значения | Атрибут записан как есть, свойство возвращает auto | img.fetchPriority = 'junk' |
Для картинки, созданной скриптом, свойство лучше записать до присвоения src, чтобы приоритет был известен к моменту запроса.
const img = new Image();
img.fetchPriority = 'high';
img.src = 'hero.jpg';
console.log(img.fetchPriority); // "high"Частые ошибки в атрибуте fetchpriority
Большинство ошибок связано с ожиданием слишком сильного эффекта и со смешением приоритета с ленивой загрузкой.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
fetchpriority="highest", fetchpriority="fast" | Неизвестное значение читается как auto | Писать только high, low или auto |
fetchpriority=" high" | Пробел делает значение неверным | Писать без пробелов |
fetchpriority="auto" | Это и так значение по умолчанию | Убрать атрибут |
high у каждой картинки | Когда всё важно, выделить главное нельзя | Оставить high одной-двум картинкам |
| Ждут от атрибута гарантии | Это подсказка, итог зависит от браузера | Проверять результат во вкладке сети |
fetchpriority вместо loading | Приоритет не откладывает загрузку | Для отложенной загрузки использовать loading="lazy" |
loading="lazy" на главной картинке | Файл запрашивается позже, чем нужно | Убрать lazy и поставить high |
Атрибут у source или picture | У этих тегов свойства нет, атрибут ничего не делает | Писать атрибут у вложенного img |
Атрибут у iframe, video, canvas | В моей проверке у них свойства нет | Не рассчитывать на атрибут, искать другие способы |
Записывают fetchpriority после src в скрипте | Запрос мог уже уйти с обычным приоритетом | Присваивать свойство до src |
Ждут, что low ускорит страницу | Понижение освобождает очередь, но выигрыш не гарантирован | Сравнить загрузку до и после во вкладке сети |
Шпаргалка по атрибуту fetchpriority
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Запросить файл раньше | Значение high | <img src="hero.jpg" alt="" fetchpriority="high"> |
| Запросить файл позже | Значение low | <img src="a.jpg" alt="" fetchpriority="low"> |
| Оставить выбор браузеру | Без атрибута | <img src="a.jpg" alt=""> |
| Допустимые значения | Три значения без пробелов | high | low | auto |
| Теги | img, link, script | <script src="a.js" fetchpriority="low"></script> |
| Картинка в picture | Атрибут у вложенного img | <picture><source srcset="a.webp"><img src="a.jpg" alt="" fetchpriority="high"></picture> |
| Прочитать значение | Свойство fetchPriority | img.fetchPriority |
| Не путать | loading отвечает за момент скачивания | loading="lazy" |
