Preload

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

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

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

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

Самая частая ошибка — preload шрифта без атрибута crossorigin. Шрифты всегда грузятся в CORS-режиме, поэтому браузер делает два запроса: один по preload без crossorigin, второй уже из CSS — и предзагрузка превращается в двойную трату трафика вместо ускорения. Правильно: . Проверяется в DevTools → Network: если файл скачался дважды, в консоли висит предупреждение "resource was preloaded but not used".

Для LCP-картинки preload часто избыточен — современнее повесить на атрибут fetchpriority="high", он поднимает приоритет без отдельного тега и работает с responsive-источниками srcset. Preload же незаменим, когда критичный ресурс зашит вглубь: шрифт внутри @font-face в подключённом CSS или фоновая картинка в background-image, до которых парсер дойдёт поздно. И Яндекс, и Google в PageSpeed/Lighthouse явно советуют preload именно для таких ресурсов в блоке "Предзагрузка ключевых запросов" — лишний preload, наоборот, помечается как "не использован в течение нескольких секунд".