Preload: что это и как ускорить загрузку

Preload — директива загрузки ресурсов до их обнаружения парсером. Ускоряет LCP, загрузку шрифтов и критических скриптов. Используется через link rel=preload.

Что такое Preload

Preload — директива Resource Hints, указывающая браузеру загрузить ресурс как можно раньше, ещё до того как парсер HTML его обнаружит в коде страницы. Это критически важно для ресурсов, которые нужны ранней отрисовке страницы.

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

Зачем нужен Preload

Браузер парсит HTML последовательно. По умолчанию он обнаруживает ресурсы только когда доходит до соответствующего тега. Preload говорит браузеру: «начни загружать этот ресурс прямо сейчас, не жди».

Preload помогает:

Улучшить LCP — hero-изображения загружаются до обнаружения тега <img>
Шрифты — текст отображается с правильным шрифтом без FOUT
Критические скрипты — JavaScript загружается параллельно с разбором HTML
CSS — критические стили доступны сразу

Синтаксис Preload

<!-- Preload изображения -->
<link rel="preload" href="/hero.jpg" as="image">

<!-- Preload шрифта (crossorigin обязателен!) -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload CSS -->
<link rel="preload" href="/critical.css" as="style">

<!-- Preload JavaScript -->
<link rel="preload" href="/app.js" as="script">

<!-- Preload с fetchpriority для LCP -->
<link rel="preload" href="/hero.jpg" as="image" fetchpriority="high">

Значения атрибута as

| Значение | Тип ресурса | |----------|------------| | image | Изображения (JPG, PNG, WebP) | | font | Веб-шрифты | | style | CSS файлы | | script | JavaScript файлы | | document | HTML документы (для iframe) | | fetch | API запросы (fetch/XHR) |

FetchPriority для LCP

<!-- Высший приоритет для hero-изображения -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

<!-- И сам тег изображения -->
<img src="/hero.webp" fetchpriority="high" alt="Hero">

fetchpriority="high" говорит браузеру загрузить ресурс с максимальным приоритетом — эффективнее чем просто preload.

Preload шрифтов

<!-- Preload только реально используемых шрифтов -->
<link rel="preload" as="font" href="/fonts/inter-400.woff2"
      type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/fonts/inter-700.woff2"
      type="font/woff2" crossorigin="anonymous">

crossorigin обязателен для шрифтов — без него браузер загрузит шрифт дважды.

Resource Hints: Prefetch и Preconnect

Помимо preload существуют другие Resource Hints:

<!-- Prefetch: загрузить ресурс для следующей страницы -->
<link rel="prefetch" href="/next-page.js">

<!-- Preconnect: установить соединение заранее -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- DNS Prefetch: разрешить DNS заранее -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

Распространённые ошибки

Preload без использования ресурса генерирует предупреждение в консоли:

The resource /image.jpg was preloaded using link preload but not used.

Preload только для ресурсов, реально используемых при первой отрисовке страницы.

Проверка на reChecker

Используйте Полную проверку сайта для комплексного анализа производительности. Инструмент проверит наличие preload для критических ресурсов и другие факторы скорости загрузки.

FAQ

Сколько ресурсов можно preload? Нет жёсткого ограничения, но preload больше 5-6 критических ресурсов снижает приоритет каждого. Preload только то, что действительно нужно для первого отображения.

Preload работает с HTTP/2? Да. HTTP/2 Server Push — альтернативный механизм (сервер отправляет ресурс без запроса браузера). Preload + HTTP/2 дополняют друг друга.

Как проверить что preload работает? Chrome DevTools → Network → сортировка по Initiator. Preload ресурсы инициированы из <head> и имеют приоритет High или Highest.