Реалізація 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
• Мутуючі побічні ефекти — сторінки, що списують гроші або відправляють листи при завантаженні, не повинні бути prerender
• Ліміт — браузер обмежує кількість одночасних prerender (зазвичай 2 сторінки)

Перевірка

Chrome DevTools → Application → Speculation Rules показує статус кожного правила. document.prerendering — true, якщо сторінка зараз спекулятивно рендериться.

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

Тривалість

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