Оптимизация загрузки ресурсов с помощью хинтов приоритета (Priority Hints)
Лина Сохони, Эдди Османи и Патрик Минан рассказали про хинты приоритета — механизм для упрощения оптимизации загрузки ресурсов — "Optimizing resource loading with Priority Hints".
Хинты приоритета (Priority Hints) — это атрибут importance HTML-элементов <img>, <link>, <script> , <iframe> и одноимённая опция в fetch(). Они поддерживают три приоритета: low, high и auto. Пример ускорения загрузки LCP-изображения: <img src="lcp_image.png" importance="high">.
Хинты приоритета используются в качестве сигналов на уровне разметки документа. Благодаря им у разработчиков появляются удобные рычаги для регулирования последовательности загрузки ресурсов. Управлять приоритетом можно было и раньше с помощью preload, но это требовало ручной кропотливой работы, приводящей к частым ошибкам в приоритизации загрузки. Также хинты приоритета решают задачи, которые невозможно или неудобно решать с помощью preload: уменьшение приоритета загрузки скриптов, увеличение приоритета async-скриптов.
Хинты приоритета также доступны в fetch(): fetch('https://...', {importance: 'low'}. По умолчанию fetch() загружает ресурсы с высоким приоритетом. С помощью хинта теперь можно уменьшать приоритет загрузки.
Поддержка атрибута importance существовала ранее в Chrome 73-76, но была удалена из-за проблем с preload, которые исправили в Chrome 95. Хинты приоритета будут доступны в рамках Origin Trial в Chrome 96-100.