Preload — это что? Определение в глоссарии Никиты Вихрова

Preload — атрибут <link rel="preload">, который запускает скачивание ресурса как можно раньше. Используют для критичных шрифтов, главной картинки hero-блока (LCP), важного JS.

Преимущество — ресурс уже в кеше браузера к моменту, когда HTML-парсер до него доходит. Опасность — злоупотреблять им: каждый preload отжирает полосу у других ресурсов, может ухудшить общую загрузку.

<head>

<!-- LCP-картинка — загружаем приоритетно -->
<link rel="preload" as="image"
      href="/hero-1200.webp">

<!-- Шрифт — без preload UI «дёрнется» -->
<link rel="preload" as="font"
      href="/font.woff2" crossorigin>

Preload: говорит браузеру «загрузи это сразу, без ожидания CSS». Ускоряет LCP

Пример из практики

<link rel="preload" href="hero.webp" as="image"> — главная картинка hero готова к моменту рендера.

← предыдущийPreconnect следующий →Product Reviews Update