Preload (предзагрузка) — это команда в разметке страницы, которая указывает браузеру достать конкретный файл заранее, до того как он понадобится при обычном разборе HTML. Задаётся строкой <link rel=preload> в блоке <head> с атрибутом as, который сообщает тип ресурса: font, style, image или script. Что это значит на практике: браузер поднимает приоритет файла и запрашивает его в числе первых, а не когда доберётся до соответствующей строки в коде.
Эта подсказка влияет на скорость первой отрисовки и на метрику LCP из набора Core Web Vitals, где порог зоны Хорошо — 2.5 секунды. Чаще всего команду ранней загрузки вешают на шрифт, который иначе браузер обнаружит только после разбора CSS, и на фоновое изображение главного экрана. Проверить приоритеты запросов можно во вкладке Network браузерного DevTools.
§ 01Зачем нужен
Браузер по умолчанию находит ресурсы последовательно: сначала читает HTML, затем CSS, и только потом узнаёт про шрифт, прописанный внутри стилей. Тег предзагрузки ломает эту цепочку и заставляет запросить критичный файл сразу. Для чего нужно: убрать задержку, когда текст ждёт шрифт, а главный экран ждёт своё фоновое изображение. Основные кандидаты на прелоад — веб-шрифты в форматах woff2, LCP-изображение и критичный CSS. Ресурсы, которые видны сразу при разборе HTML (обычные <img> в верстке), в этой подсказке не нуждаются.
§ 02Как настраивается
Строка ставится в <head> как можно выше и требует двух атрибутов: rel=preload и as. Для шрифта нужен ещё crossorigin, иначе браузер загрузит файл дважды: <link rel=preload href=/font.woff2 as=font type=font/woff2 crossorigin>. Атрибут as обязателен — без него браузер не поймёт приоритет и тип. Для адаптивных картинок добавляют imagesrcset и imagesizes. В сборках на Webpack или Vite эту директиву браузеру часто вставляет плагин автоматически для критичных чанков.
LCP 4.1 → 2.3 c — Интернет-магазин косметики на Shopify добавил для hero-баннера и основного шрифта. LCP упал с 4.1 до 2.3 с за 5 недель, конверсия мобильного трафика выросла на 11%. Замер через PageSpeed Insights и CrUX-75th.
LCP 3.6 → 2.0 c — B2B SaaS-платформа для аналитики с MRR $180k повесила preload на критичный CSS и WOFF2-шрифт лендинга. LCP снизился с 3.6 до 2.0 с за 4 недели, доля 'good' в Core Web Vitals выросла до 82%. Динамика по GA4 и Search Console CWV-отчёту.
§ 03Подводные камни
Чрезмерный прелоад вредит: если предзагрузить десяток файлов, они конкурируют за канал с действительно критичным ресурсом и отодвигают его. Забытый crossorigin на шрифте даёт двойную загрузку одного файла. Ресурс, указанный в подсказке, но не использованный на странице в первые секунды, вызывает предупреждение в консоли: preloaded but not used. Отличается прелоад от prefetch тем, что предзагрузка тянет файл для текущей страницы с высоким приоритетом, а prefetch готовит ресурс для вероятного следующего перехода в фоне.
§ 04Как проверить, что работает
Откройте DevTools, вкладку Network, и отсортируйте запросы по приоритету: предзагруженный шрифт или картинка должны идти с меткой High в самом начале. Колонка Initiator покажет, что запрос инициирован строкой из <head>, а не поздним парсингом CSS. Эффект на скорость меряют в PageSpeed Insights и в разделе Core Web Vitals: смотрят, сдвинулось ли значение LCP ближе к порогу 2.5 секунды. Полевые данные по реальным пользователям берут из отчёта CrUX. Предупреждения о лишних или неиспользованных ресурсах видны в консоли браузера.