Использование rel="prefetch" и другие методы предзагрузки страницы
- 7 сентября 2025
Ресурсные подсказки (Resource Hints) — это механизмы, позволяющие браузеру заранее загружать ресурсы или устанавливать соединения для ускорения навигации и загрузки страниц. Одним из таких механизмов является атрибут rel="prefetch"
, который указывает браузеру загружать ресурсы с низким приоритетом для возможного использования в будущем. Это сокращает время загрузки страниц и улучшает пользовательский опыт, особенно на сайтах с частыми переходами.
Контекст и поддержка
Ресурсные подсказки, включая rel="prefetch"
, определены в спецификации W3C Resource Hints и имеют статус Widely available в Baseline 2025. Они поддерживаются всеми современными браузерами (Chrome, Firefox, Safari, Edge) и могут применяться для различных типов ресурсов, таких как HTML-страницы, скрипты, стили, изображения и шрифты.
Как работает rel="prefetch"
Атрибут rel="prefetch"
в теге <link>
указывает браузеру загрузить ресурс в фоновом режиме с низким приоритетом. Это полезно для ресурсов, которые пользователь, вероятно, запросит в ближайшем будущем, например, следующей страницы в навигации.
<link rel="prefetch" href="page2.html" as="document">
Атрибут as="document"
уточняет тип ресурса, помогая браузеру оптимизировать загрузку. После предзагрузки page2.html
сохраняется в кэше браузера, что ускоряет переход по ссылке.
Другие ресурсные подсказки
Помимо prefetch
, существуют другие подсказки для оптимизации загрузки:
rel="preload"
: Высокоприоритетная загрузка ресурсов, необходимых для текущей страницы (например, критических CSS или шрифтов).rel="dns-prefetch"
: Предварительное разрешение DNS для домена, чтобы сократить время установления соединения.rel="preconnect"
: Установка соединения с сервером (DNS + TCP + TLS) до начала загрузки ресурса.
<link rel="preload" href="styles.css" as="style">
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://example.com">
Практический пример
Предположим, у вас есть интернет-магазин, и вы хотите ускорить переход на страницу категории товаров:
<head>
<link rel="prefetch" href="/category.html" as="document">
<link rel="preload" href="/main.css" as="style">
<link rel="preconnect" href="https://cdn.example.com">
</head>
<body>
<a href="/category.html">Перейти к категориям</a>
</body>
Здесь prefetch
загружает страницу /category.html
, preload
обеспечивает быструю загрузку критического CSS, а preconnect
ускоряет доступ к CDN.
Особенности и ограничения
- Приоритет загрузки:
prefetch
имеет низкий приоритет, поэтому не мешает загрузке текущей страницы, в отличие отpreload
. - Кэширование: Предзагруженные ресурсы сохраняются в HTTP-кэше или кэше Service Worker, но могут быть удалены при ограниченных ресурсах устройства.
- Кроссбраузерность:
prefetch
поддерживается всеми современными браузерами, но может игнорироваться в старых версиях или на устройствах с низкой пропускной способностью. - Риски: Избыточное использование
prefetch
может увеличить потребление трафика, особенно на мобильных устройствах.
Альтернативы и серверная предзагрузка
Ресурсные подсказки можно задавать не только через HTML, но и с помощью HTTP-заголовка Link
:
Link: </main.css>; rel=preload; as=style
Это полезно для серверной оптимизации, когда HTML генерируется динамически.
Рекомендации по использованию
- Используйте
prefetch
для страниц, на которые пользователь с высокой вероятностью перейдёт (например, следующая страница в пагинации). - Применяйте
preload
для критических ресурсов текущей страницы, таких как шрифты или основные скрипты. - Комбинируйте с
dns-prefetch
иpreconnect
для оптимизации загрузки с внешних доменов. - Избегайте предзагрузки множества ресурсов, чтобы не перегружать сеть.
- Проверяйте производительность с помощью инструментов, таких как Lighthouse или Chrome DevTools.
Ресурсные подсказки, такие как rel="prefetch"
, preload
, dns-prefetch
и preconnect
, позволяют оптимизировать загрузку ресурсов и улучшить производительность веб-приложений. Правильное их использование требует анализа пользовательских сценариев и приоритизации ресурсов, чтобы балансировать между скоростью и нагрузкой на сеть. Для углублённого изучения рекомендуем документацию MDN и W3C.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.