Resource Hints: Prefetch, Preload, Preconnect и DNS-Prefetch

Ресурсные подсказки: Prefetch, Preload, Preconnect, DNS-Prefetch

Ресурсные подсказки (resource hints) — это HTML-директивы, которые помогают браузеру оптимизировать загрузку ресурсов. Сообщая браузеру о необходимых ресурсах заранее, вы можете устранить сетевые задержки, сократить время блокировки рендеринга и значительно улучшить производительность загрузки страницы. Понимание различий между каждой подсказкой необходимо для их правильного применения.

Обзор ресурсных подсказок

DNS-Prefetch

Подсказка dns-prefetch говорит браузеру выполнить DNS-разрешение для домена до того, как будут запрошены какие-либо ресурсы с этого домена. DNS-запросы обычно занимают 20-120 мс, поэтому их раннее разрешение убирает эту задержку из критического пути.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.analytics.com">
<link rel="dns-prefetch" href="https://api.example.com">

Когда использовать DNS-Prefetch

• Сторонние домены, используемые на странице (аналитика, шрифты, CDN, рекламные сети)
• API документацию-эндпоинты на других поддоменах
• Любые внешние домены, на которые ссылаются CSS или JavaScript

Ограничения

DNS-prefetch только разрешает доменное имя в IP геолокацию. Он не устанавливает TCP-соединение и не выполняет TLS-рукопожатие. Для критичных ресурсов preconnect более эффективен.

Preconnect

Подсказка preconnect идет дальше dns-prefetch. Она выполняет DNS-разрешение, устанавливает TCP-соединение и завершает TLS-рукопожатие — все до запроса какого-либо ресурса. Это может сэкономить 100-500 мс на каждом соединении в сетях с высокой задержкой.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://api.example.com">

Атрибут crossorigin

Атрибут crossorigin критически важен и часто неправильно понимается. Когда ресурс будет загружен с CORS (шрифты, fetch API запросы), необходимо включить crossorigin в preconnect-ссылку. Без него браузер устанавливает другое соединение, которое нельзя переиспользовать для CORS-запросов, полностью теряя эффект preconnect.

Когда использовать Preconnect

• Google Fonts (оба домена: googleapis.com и gstatic.com)
• Критичные CDN-источники
• API-серверы, используемые сразу при загрузке страницы
• Провайдеры аутентификации

Важные предупреждения

• Ограничьте до 4-6 источников: Каждый preconnect потребляет CPU и сетевые ресурсы. Слишком много preconnect может навредить производительности.
• Используйте только для немедленных запросов: Неиспользуемые соединения закрываются через 10 секунд в большинстве браузеров.

Prefetch

Подсказка prefetch запрашивает ресурс, который, вероятно, понадобится при будущей навигации. Браузер загружает его с низким приоритетом в свободное время и сохраняет в HTTP-кэше для дальнейшего использования.

<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/assets/js/checkout.js">
<link rel="prefetch" href="/api/products?page=2" as="fetch">

Когда использовать Prefetch

• Следующая страница в многошаговом процессе (мастер, оформление заказа)
• JavaScript-бандлы для вероятных следующих маршрутов
• Данные для предполагаемых действий пользователя
• Ресурсы, нужные после взаимодействия пользователя (содержимое модалов, раскрывающиеся секции)

Поведение Prefetch

Предзагруженные ресурсы скачиваются с наименьшим приоритетом. Они не конкурируют с критичными ресурсами текущей страницы. Браузер может полностью пропустить prefetch, если сеть медленная или устройство использует лимитированное соединение.

Preload

Подсказка preload — самая мощная из ресурсных подсказок. Она говорит браузеру немедленно загрузить ресурс, необходимый для текущей страницы. В отличие от prefetch, preload загружает с высоким приоритетом, и ресурс должен использоваться на текущей странице.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/css/critical.css" as="style">
<link rel="preload" href="/assets/js/app.js" as="script">
<link rel="preload" href="/hero-image.webp" as="image">

Атрибут as

Атрибут as обязателен для preload. Он сообщает браузеру тип загружаемого ресурса, что определяет:

• Приоритет запроса
• Правильные заголовки Accept
• Соответствие политике CSP
• Поведение кэширования

Частые ошибки при Preload

• Отсутствие атрибута as: Без него браузер загружает ресурс дважды.
• Предзагрузка неиспользуемых ресурсов: Если предзагруженный ресурс не использован в течение 3 секунд, Chrome выдает предупреждение. Это тратит трафик впустую.
• Отсутствие crossorigin для шрифтов: Шрифты всегда загружаются через CORS. Без crossorigin предзагруженный ресурс не может быть сопоставлен с запросом шрифта.
• Слишком много preload: Предзагрузка всего — то же самое, что предзагрузка ничего. Ограничьте до 3-5 критичных ресурсов.

Схема принятия решений

Используйте этот алгоритм для выбора подходящей подсказки:

1. Ресурс на стороннем домене? Начните с dns-prefetch или preconnect.
2. Ресурс критичен для текущей страницы? Используйте preload.
3. Ресурс нужен для будущей страницы? Используйте prefetch.
4. Нужно полное соединение немедленно? Используйте preconnect.
5. Это низкоприоритетный внешний домен? Используйте dns-prefetch.

Измерение эффекта

Всегда измеряйте влияние ресурсных подсказок с помощью:

• Chrome DevTools, вкладка Network: Ищите в колонке Initiator значения «preload» или «prefetch».
• WebPageTest waterfall: Сравните каскадные диаграммы до и после для визуализации улучшений.
• Lighthouse: Проверяйте аудиты «Preconnect to required origins» и «Preload key requests».
• PageSpeed анализ: Мониторьте улучшения LCP и FCP в реальных метриках пользователей.

Итоги

Ресурсные подсказки — мощные инструменты оптимизации загрузки страницы, но они требуют аккуратного применения. Используйте dns-prefetch для низкоприоритетных внешних доменов, preconnect для критичных сторонних источников, preload для необходимых ресурсов текущей страницы и prefetch для предполагаемых будущих навигаций. Всегда измеряйте результаты и не злоупотребляйте подсказками — их избыток может ухудшить, а не улучшить производительность.