**Полный список Resource Hints:** ```html ``` **modulepreload vs preload для JS:** ```html ``` **Fetch Priority API (`fetchpriority`):** ```html Hero баннер

``` ```javascript // Fetch API с priority const response = await fetch('/api/critical-data', { priority: 'high', }); // Фоновая синхронизация -- низкий приоритет const bgData = await fetch('/api/sync', { priority: 'low', }); ``` **Практический паттерн -- полная оптимизация head:** ```html ``` **Speculation Rules API (Chrome 121+) -- следующее поколение prefetch:** ```html ``` ## 📌 Реальные кейсы 🔹 **fetchpriority="high" на LCP-изображении**: Google измерил улучшение LCP на 400ms на типичном сайте с каруселью, где hero-изображение конкурировало с другими картинками за bandwidth. 🔹 **modulepreload в SPA**: Vite автоматически добавляет `` для каждого чанка в production-сборке. Это убирает каскадные задержки загрузки модулей. 🔹 **Speculation Rules в e-commerce**: при наведении на карточку товара браузер prerender-ит страницу товара. Переход ощущается мгновенным (0ms). ## Частые ошибки ```html

``` ## Резюме - Resource Hints: preload (сейчас), prefetch (потом), preconnect (соединение), dns-prefetch (DNS), modulepreload (ES-модули) - Fetch Priority API: `fetchpriority="high|low|auto"` для явного управления приоритетом - Работает на img, script, link, iframe и в Fetch API (`priority` option) - Используй fetchpriority="high" на LCP-элементе -- это один из самых простых способов улучшить LCP - Speculation Rules API -- следующий шаг: prerender целых страниц на основе правил ---

Что такое Resource Hints и Fetch Priority API?