preload и prefetch: приоритет шрифтов, LCP и «следующая» страница

Разница между подсказками ресурса, когда preload ускоряет LCP, а когда создаёт лишнюю конкуренцию за полосу.

rel=preload поднимает приоритет конкретного ресурса в рамках текущей навигации; злоупотребление preload на десятках файлах ухудшает картину.

rel=prefetch подходит для вероятного следующего шага (следующая страница воронки), не блокируя критический путь текущей.

- [Preload critical assets — web.dev](https://web.dev/articles/preload-critical-assets) — Когда и что preload-ить.

- [Link types: prefetch — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch) — Семантика prefetch.

---

## Связка с LCP

Если LCP — <img>, убедитесь, что он discoverable из HTML и не прячется за CSS background без preload — иначе браузер поздно начнёт загрузку.

Проверяйте приоритеты во вкладке Network → Priority в Chrome DevTools после изменений.

#производительность#LCP#HTTP

Читайте также