Чтобы нарисовать страницу, браузеру нужно получить все необходимые для этого ресурсы. Первым делом браузер получает HTML и начинает его разбирать. В процессе браузер строит DOM и ищет все ресурсы, которые используются на странице: CSS, JS, изображения, видео, SVG и так далее. Параллельно с парсером, используется ещё один механизм — сканер предварительной загрузки. Его задача — искать ресурсы не дожидаясь, пока парсер до них дойдёт.
В конечном итоге все найденные ресурсы передаются в сетевой процесс, где распределяются по приоритету и начинают загружаться. При работе над производительностью сайта часто смотрят на сетевой водопад — график загрузки ресурсов. Некоторые оптимизации заключаются в том, чтобы изменить положение ресурсов в водопаде, сдвинуть их выше, ниже, или вовсе убрать.
Атрибут
fetchpriority можно указывать у элементов, которые загружают ресурсы: <link>, <script>, <img> и <iframe>. В качестве значений принимаются high, low и auto. Атрибут предназначен для изменения стандартного приоритета загрузки ресурса. Значение high делает ресурс более приоритетным, а low — менее приоритетным. Значение auto возвращает поведение по умолчанию, предоставляя браузеру выбор приоритета.В HTML уже есть некоторые возможности для управления приоритетом, например:
-
loading у <img> и <iframe>-
preload у <video>-
defer, async и type="module" у <script>-
<link rel="preload">fetchpriority — ещё одна такая возможность. Какие есть варианты использования:- Загрузить важную картинку, которая влияет на LCP, с высоким приоритетом
- Понизить приоритет картинок в карусели, которые отображаются только при переключении слайда
- Предварительно загружать некритические ресурсы с низким приоритетом
- Понизить приоритет классического блокирующего скрипта в конце
<body>- Повысить приоритет асинхронного скрипта
Приоритет также можно указывать в функции
fetch():const response = await fetch('/resource', { priority: 'low' });Подробнее о Fetch Priority API можно прочитать в статье на web.dev.
#ydkhtml #html #performance
