Ресурсные подсказки: Prefetch, Preload, Preconnect, DNS-Prefetch
Ресурсные подсказки (resource hints) — это HTML-директивы, которые помогают браузеру оптимизировать загрузку ресурсов. Сообщая браузеру о необходимых ресурсах заранее, вы можете устранить сетевые задержки, сократить время блокировки рендеринга и значительно улучшить производительность загрузки страницы. Понимание различий между каждой подсказкой необходимо для их правильного применения.
Обзор ресурсных подсказок
| Подсказка | Назначение | Приоритет | Когда использовать |
|---|---|---|---|
| dns-prefetch | Разрешение DNS для внешнего домена | Низкий | Сторонние ресурсы |
| preconnect | DNS + TCP + TLS-рукопожатие | Средний | Критичные сторонние источники |
| prefetch | Загрузка ресурса для будущей навигации | Низкий | Ресурсы следующей страницы |
| preload | Загрузка ресурса для текущей страницы | Высокий | Критичные ресурсы текущей страницы |
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
- Соответствие политике Content Security Policy
- Поведение кэширования
| Значение as | Тип ресурса |
|---|---|
| script | JavaScript-файлы |
| style | CSS-стили |
| font | Веб-шрифты (всегда нужен crossorigin) |
| image | Изображения |
| fetch | Fetch/XHR-запросы |
| document | HTML-документы (для iframe) |
Частые ошибки при Preload
- Отсутствие атрибута as: Без него браузер загружает ресурс дважды.
- Предзагрузка неиспользуемых ресурсов: Если предзагруженный ресурс не использован в течение 3 секунд, Chrome выдает предупреждение. Это тратит трафик впустую.
- Отсутствие crossorigin для шрифтов: Шрифты всегда загружаются через CORS. Без crossorigin предзагруженный ресурс не может быть сопоставлен с запросом шрифта.
- Слишком много preload: Предзагрузка всего — то же самое, что предзагрузка ничего. Ограничьте до 3-5 критичных ресурсов.
Схема принятия решений
Используйте этот алгоритм для выбора подходящей подсказки:
- Ресурс на стороннем домене? Начните с dns-prefetch или preconnect.
- Ресурс критичен для текущей страницы? Используйте preload.
- Ресурс нужен для будущей страницы? Используйте prefetch.
- Нужно полное соединение немедленно? Используйте preconnect.
- Это низкоприоритетный внешний домен? Используйте dns-prefetch.
Измерение эффекта
Всегда измеряйте влияние ресурсных подсказок с помощью:
- Chrome DevTools, вкладка Network: Ищите в колонке Initiator значения «preload» или «prefetch».
- WebPageTest waterfall: Сравните каскадные диаграммы до и после для визуализации улучшений.
- Lighthouse: Проверяйте аудиты «Preconnect to required origins» и «Preload key requests».
- Core Web Vitals: Мониторьте улучшения LCP и FCP в реальных метриках пользователей.
Итоги
Ресурсные подсказки — мощные инструменты оптимизации загрузки страницы, но они требуют аккуратного применения. Используйте dns-prefetch для низкоприоритетных внешних доменов, preconnect для критичных сторонних источников, preload для необходимых ресурсов текущей страницы и prefetch для предполагаемых будущих навигаций. Всегда измеряйте результаты и не злоупотребляйте подсказками — их избыток может ухудшить, а не улучшить производительность.