TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.05K subscribers
Post #1048 3.72K
Оптимизация загрузки ресурсов с помощью хинтов приоритета (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.

#performance

https://web.dev/priority-hints/
web.dev Optimize resource loading with the Fetch Priority API | Articles | web.dev The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
  • 🔥 1
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →