Prefetch
Prefetch - это механизм предварительной загрузки ресурсов (HTML-страниц, скриптов, стилей), который позволяет браузеру загружать их в фоновом режиме до того, как пользователь совершит переход, сокращая время загрузки и улучшая восприятие производительности сайта.
В интернет-маркетинге prefetch используется для ускорения перехода на посадочные страницы из рекламных кампаний. Например, если пользователь нажимает на баннер в Яндекс.Директ, браузер может предварительно загрузить ресурсы лендинга ещё до клика, сокращая время ожидания.
Prefetch отличается от preload тем, что загружает ресурсы для будущих переходов, а не для текущей страницы. Технология является частью современных подходов к оптимизации Core Web Vitals и повышению конверсии.
Кратко
[править]Prefetch - это механизм, который позволяет браузеру заранее загрузить следующую страницу в фоновом режиме. При переходе пользователя по ссылке страница уже готова к отображению, что исключает время ожидания.
Что такое Prefetch
[править]Prefetch - это декларативный механизм подсказок браузеру, указывающий, какие ресурсы могут понадобиться в ближайшем будущем. Браузер загружает эти ресурсы с низким приоритетом в фоновом режиме, не блокируя отображение текущей страницы. Когда пользователь действительно переходит по ссылке, ресурсы уже находятся в кэше, что делает загрузку практически мгновенной.
Существует два основных типа:
- Link prefetch - предварительная загрузка целых HTML-страниц.
- DNS prefetch - предварительное разрешение доменных имён в IP-адреса.
Как работает Prefetch
[править]- Разработчик добавляет в HTML страницы тег `<link rel="prefetch" href="...">` или HTTP-заголовок.
- Браузер обнаруживает подсказку и в фоновом режиме, когда основной поток не занят, начинает загрузку указанного ресурса.
- Загруженный ресурс сохраняется в кэше браузера с низким приоритетом.
- При переходе пользователя по ссылке браузер берёт ресурс из кэша, мгновенно отображая страницу.
<!-- Предварительная загрузка следующей страницы --> <link rel="prefetch" href="/next-page.html"> <!-- Предварительное разрешение DNS для стороннего домена --> <link rel="dns-prefetch" href="https://api.example.com">
Преимущества
[править]- Ускорение навигации: переходы между страницами становятся практически мгновенными.
- Улучшение Core Web Vitals: снижает время загрузки (LCP) и увеличивает скорость реакции на взаимодействие (INP).
- Повышение конверсии: сокращение времени ожидания снижает количество отказов на посадочных страницах.
- Не блокирует текущую страницу: загрузка происходит с низким приоритетом в фоне.
Недостатки
[править]- Избыточная загрузка: если пользователь не переходит по ссылке, трафик и ресурсы сервера тратятся впустую.
- Ограниченная поддержка: старые браузеры могут не поддерживать prefetch.
- Сложность отладки: трудно проверить, действительно ли prefetch сработал, без специальных инструментов разработчика.
- Риск перегрузки: чрезмерное использование может привести к ненужной нагрузке на сервер и клиент.
Где используется
[править]| Сценарий | Применение |
|---|---|
| Интернет-магазины | Предварительная загрузка страницы корзины или оформления заказа после добавления товара |
| Рекламные лендинги | Загрузка ресурсов целевой страницы после клика по баннеру (через предварительную подсказку на странице-посреднике) |
| Многостраничные формы | Предварительная загрузка следующего шага формы, чтобы пользователь не ждал перехода |
| Сайты с пагинацией | Предварительная загрузка следующей страницы списка товаров или статей |
Сравнение Prefetch, Preload и Prerender
[править]| Характеристика | Prefetch | Preload | Prerender |
|---|---|---|---|
| Назначение | Ресурсы для следующей навигации | Ресурсы для текущей страницы | Полная страница для следующего перехода |
| Приоритет загрузки | Низкий (фон) | Высокий | Средний |
| Тип ресурсов | HTML, скрипты, стили | Скрипты, стили, шрифты, изображения | Полный HTML-документ |
| Кэширование | Да (в кэше браузера) | Да (в кэше браузера) | Да (в кэше браузера) |
| Когда использовать | Переходы между страницами | Критические ресурсы текущей страницы | Гарантированный следующий шаг |
Часто задаваемые вопросы
[править]Что такое Prefetch?
[править]Это подсказка браузеру, указывающая, какую страницу или ресурс стоит загрузить заранее, на случай если пользователь перейдёт по ссылке. Когда переход происходит, страница уже готова к отображению.
Где используется Prefetch?
[править]В интернет-магазинах, на лендингах, в многостраничных форматах и на любых сайтах, где пользователь с высокой вероятностью перейдёт на следующую страницу.
Чем Prefetch отличается от Preload?
[править]Prefetch загружает ресурсы для будущих страниц, не мешая текущей. Preload загружает важные ресурсы текущей страницы с высоким приоритетом. Preload предназначен для ресурсов, необходимых немедленно, а prefetch - для ресурсов, которые могут понадобиться в ближайшее время.
