Использование rel="prefetch" и другие методы предзагрузки страницы

  • 7 сентября 2025

HTML

HTML Academy

Ресурсные подсказки (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.

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники