Реализация Speculative Loading (Speculation Rules API) для сайта

Реализация Speculative Loading (Speculation Rules API) для сайта

Speculation Rules API — браузерный механизм для prefetch и prerender страниц до того, как пользователь кликнул по ссылке. Позволяет добиться мгновенной навигации на поддерживаемых браузерах.

Отличие от классического prefetch

Классический <link rel="prefetch"> загружает HTML документ в кэш. Prerender через Speculation Rules идёт дальше — браузер фактически рендерит страницу в скрытой вкладке, включая выполнение JS, загрузку субресурсов, построение дерева DOM. При переходе пользователь видит уже готовую страницу.

Поддержка: Chrome 109+, Edge 109+. Firefox и Safari — только prefetch без prerender.

Базовая конфигурация

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/product/*" },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "where": { "href_matches": "/*" },
      "eagerness": "conservative"
    }
  ]
}
</script>

Уровни eagerness

Document Rules vs List Rules

List Rules — явный список URL:

{
  "prerender": [
    { "urls": ["/checkout", "/cart"] }
  ]
}

Document Rules — правила на основе href паттернов:

{
  "prefetch": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/admin/*" } },
          { "not": { "href_matches": "*.pdf" } }
        ]
      }
    }
  ]
}

Динамическое управление через JS

// Программное добавление правил спекулятивной загрузки
const script = document.createElement('script')
script.type = 'speculationrules'
script.text = JSON.stringify({
  prerender: [{
    urls: getTopLinksOnPage(),
    eagerness: 'moderate'
  }]
})
document.head.appendChild(script)

Ограничения и что учесть

• Серверная аналитика — prerender инициирует настоящий HTTP-запрос. GA4 и Plausible корректно обрабатывают это через Activation API (страница становится активной только при реальном переходе), но серверные счётчики могут раздуться
• Авторизованные запросы — prerender не работает для страниц с Cache-Control: no-store
• Мутирующие side-эффекты — страницы, которые списывают деньги или отправляют письма при загрузке, не должны попадать в prerender
• Лимит — браузер ограничивает количество одновременных prerender (обычно 2 страницы)

Проверка работы

Chrome DevTools → Application → Speculation Rules показывает статус каждого правила. document.prerendering — true если страница сейчас рендерится спекулятивно.

document.addEventListener('prerenderingchange', () => {
  if (!document.prerendering) {
    // страница активирована — можно инициализировать аналитику
    initAnalytics()
  }
})

Срок выполнения

Базовая настройка для статического сайта — 1 день. Интеграция с динамическими правилами и учёт аналитики — 2–3 дня.