Speculation Rules API pozwala przeglądarkom na wstępne pobieranie (prefetch) lub wstępne renderowanie (prerender) prawdopodobnych przyszłych nawigacji, aby zapewnić znacznie szybsze ładowanie stron; jest to rozwiązanie zaprojektowane dla witryn wielostronicowych i obecnie eksperymentalne w wielu przeglądarkach.

Czym jest Speculation Rules API

Speculation Rules API zapewnia deklaratywny sposób informowania przeglądarki, które adresy URL dokumentów należy wstępnie pobrać (prefetch) lub wstępnie wyrenderować (prerender) w oparciu o interakcje użytkownika, listy lub reguły dokumentu. Ma na celu zastąpienie starszych, mniej bezpiecznych technik prerenderowania i zapewnienie programistom większej kontroli nad tym, kiedy i jak odbywa się spekulacja.

Dlaczego warto z niego korzystać

Korzyści obejmują szybszą postrzeganą nawigację, zmniejszone opóźnienia w typowych przepływach oraz bardziej jawną, możliwą do audytu konfigurację zachowania spekulacji. Jest to szczególnie przydatne w przypadku aplikacji wielostronicowych (MPA), w których powszechne są nawigacje obejmujące cały dokument.

Podstawowa składnia i umiejscowienie

Najczęstszym sposobem rejestrowania reguł jest blok JSON wewnątrz znacznika skryptu przy użyciu type="speculationrules". Reguły mogą zawierać listy adresów URL, akcje prerender lub prefetch oraz warunki, takie jak chęć użytkownika (eagerness) lub typ źródła.

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/next-page", "/checkout"]
    }
  ],
  "prefetch": [
    {
      "source": "list",
      "urls": ["/assets/heavy-image.jpg"]
    }
  ]
}
</script>

Przykład programistyczny

Możesz także rejestrować reguły dynamicznie z poziomu JavaScript, wstawiając węzeł <script type="speculationrules"> lub używając reguł dokumentu do automatycznej spekulacji linków; codelab demonstruje techniki debugowania i dynamicznej rejestracji.

// Przykład: wstrzykiwanie reguł w czasie wykonywania
const script = document.createElement('script');
script.type = 'speculationrules';
script.textContent = JSON.stringify({
  "prerender": [{ "source": "list", "urls": ["/next"] }]
});
document.head.appendChild(script);

Debugowanie i najlepsze praktyki

Użyj DevTools do inspekcji aktywności spekulacji, zacznij zachowawczo (prefetch przed prerender) i mierz koszty w stosunku do korzyści — prerendering może zużywać zasoby procesora i sieci, jeśli jest nadużywany. DebugBear i dokumentacja Chrome zapewniają praktyczne wskazówki dla złożonych witryn i monitorowania.

Aktualna macierz wsparcia (stan na 03.01.2025)