Speculation Rules API – czym jest? Jak działa? Jak wdrożyć?

Co to jest Speculation Rules API? W jaki sposób działa i przyspiesza strony WWW? Jak wdrożyć na stronie, w sklepie czy w WordPressie?

Spis treści

Speculation Rules API to nowoczesna technologia, która znacząco przyspiesza nawigację w witrynie, redukując czekanie na kolejne podstrony do ułamków sekundy. Funkcja ta pozwala przeglądarce przewidywać, które strony użytkownik odwiedzi, i ładować je w tle jeszcze przed kliknięciem linku – tworząc wrażenie niemal natychmiastowego przejścia między stronami. Poniżej wyjaśniamy, czym jest Speculation Rules API, jak działa, jakie korzyści przynosi oraz jak je wdrożyć – także wtedy, gdy dopiero zaczynasz z technologiami webowymi.

Czemu szybkość ładowania stron jest ważna dla twojej witryny?

Współcześni użytkownicy są niecierpliwi – jeśli strona ładuje się zbyt długo, szybko szukają alternatywy. Nawet opóźnienie o jedną sekundę może zwiększyć współczynnik odrzuceń i obniżyć konwersję, co dla e‑commerce i serwisów contentowych bywa równoznaczne z utratą przychodów.

Wpływ szybkości stron WWW na zachowania internautów

Google uwzględnia szybkość ładowania w algorytmach rankingowych, promując szybsze strony. Speculation Rules API jest jednym z najciekawszych rozwiązań ostatnich lat, które pomaga skrócić czas oczekiwania bez przebudowy całej witryny.

Jaki jest obecny stan nawigacji internetowej?

Przy tradycyjnej nawigacji przeglądarka czeka na kliknięcie (lub najechanie) i dopiero wtedy pobiera dokument, zasoby, uruchamia skrypty i renderuje stronę. Każdy z tych kroków kosztuje czas.

W warunkach mobilnych, przy niepewnych łączach, opóźnienia są szczególnie dotkliwe. To właśnie tutaj zyskujesz najwięcej dzięki prefetchowi i prerenderowi.

Zobacz też: Resource Hints: atrybuty Preload, Preconnect, Prefetch

Czym dokładnie jest Speculation Rules API?

Speculation Rules API to interfejs sieciowy od zespołu Google Chrome, dzięki któremu wskazujesz przeglądarce, które strony warto załadować zawczasu. W praktyce sugerujesz: „Użytkownik najpewniej przejdzie do X lub Y – zacznij ładować te strony w tle”.

Następuje po starszych technikach, takich jak <link rel="prefetch"> czy przestarzałe <link rel="prerender">, oferując większą kontrolę i elastyczność konfiguracji.

API wspierają przeglądarki oparte na Chromium, m.in. Chrome, Edge i Opera. Safari i Firefox na razie je ignorują bez skutków ubocznych. Twoja strona działa normalnie dla wszystkich, a użytkownicy na Chromium odczuwają duży przyrost szybkości.

Dwie główne strategie – prefetch i prerender

Aby dobrze wykorzystać Speculation Rules API, poznaj dwie podstawowe strategie: prefetch i prerender.

Prefetch – pobieranie zawartości w tle

Prefetch pobiera dokument HTML kolejnej strony bez pełnego renderu. Gdy użytkownik kliknie, przeglądarka ma już część pracy wykonaną – strona pojawia się szybciej.

To bezpieczne, lekkie podejście: dobre tam, gdzie chcesz odczuwalnego przyspieszenia bez dużych kosztów po stronie serwera i urządzenia.

Prerender – pełne renderowanie strony

Prerender jest bardziej agresywny: przeglądarka w pełni renderuje stronę w tle. Po wejściu użytkownika wszystko jest gotowe: zasoby, JavaScript, interfejs. Efekt to niemal natychmiastowa, w pełni interaktywna strona.

Koszt jest wyższy (przepustowość, bateria, obciążenie serwera), dlatego stosuj go rozważnie i dostosuj „eagerness” do kontekstu.

Jak Speculation Rules API faktycznie działa?

Reguły zapisujesz w JSON i umieszczasz w HTML, w osobnym pliku lub wysyłasz nagłówkiem HTTP. Przeglądarka ocenia, czy i kiedy je zastosować.

Przy podejmowaniu decyzji przeglądarka bierze pod uwagę m.in.:

ustawienia preloadingu użytkownika,
dostępną pamięć RAM,
szybkość i stabilność sieci,
tryb oszczędzania energii.

Ty sugerujesz, ale ostateczną decyzję podejmuje przeglądarka – dzięki temu użytkownik nie cierpi przez zbyt agresywne spekulacje.

Zagłębianie się w szczegóły techniczne

Poziomy „eagerness” (aktywności)

Są cztery poziomy, które określają agresywność preloadingu:

Immediate – najbardziej agresywne ładowanie natychmiast po napotkaniu reguły; idealne np. dla kolejnego kroku w checkout lub następnego artykułu;
Eager – bardzo szybkie, zbliżone do immediate, semantycznie oznacza mniejszą pewność;
Moderate – czeka na sygnał użytkownika (hover ~200 ms lub tap), zwykle najlepszy kompromis szybkości i kosztów;
Conservative – najbardziej ostrożne, stosowane oszczędnie na wolnych sieciach i słabszych urządzeniach.

Limity przeglądarki

Chromium ogranicza liczbę jednoczesnych spekulacji, by chronić zasoby użytkownika. Oto domyślne limity:

Poziom	Limit prefetch	Limit prerender
immediate / eager	50	10
moderate / conservative	2	2

Limity działają w trybie FIFO – po przekroczeniu najstarsza spekulacja jest anulowana. W praktyce rzadko chcesz prerenderować więcej niż kilka stron jednocześnie.

Praktyczne wdrażanie Speculation Rules API

Masz trzy główne sposoby wdrożenia – wybierz ten, który najlepiej pasuje do twojej infrastruktury:

Metoda 1 – bezpośrednio w HTML

Najprościej umieścić reguły bezpośrednio w HTML, wewnątrz skryptu typu speculationrules:

<script type="speculationrules">
    {
        "prerender": [
            {
                "where": {
                    "and": [
                        {
                            "href_matches": "/*"
                        },
                        {
                            "not": {
                                "href_matches": "/logout"
                            }
                        }
                    ]
                },
                "eagerness": "moderate"
            }
        ]
    }
</script>

Ten kod instruuje przeglądarkę: prerenderuj każdy link w obrębie witryny (poza /logout), ale czekaj na sygnał użytkownika (moderate).

Świetne do prostych stron lub szablonów. W WordPressie wstaw w header.php motywu lub dodaj dynamicznie odpowiednią akcją.

Metoda 2 – JavaScript

Możesz wstrzykiwać reguły dynamicznie – np. po akcji użytkownika (dodanie do koszyka, scroll do końca artykułu):

    if (
        HTMLScriptElement.supports &&
        HTMLScriptElement.supports("speculationrules")
    ) {
        const specScript = document.createElement("script");
        specScript.type = "speculationrules";

        const specRules = {
            prerender: [
                {
                    urls: [
                        "/next.html"
                    ]
                }
            ]
        };

        specScript.textContent = JSON.stringify(specRules);
        document.body.append(specScript);
    }

Najpierw sprawdzasz wsparcie API, a następnie dodajesz reguły, gdy mają największą szansę się przydać.

Metoda 3 – nagłówek HTTP

Reguły możesz też dostarczyć nagłówkiem, co ułatwia centralne zarządzanie (np. przez CDN):

Speculation-Rules: "/speculationrules.json"

Przeglądarka pobierze reguły z /speculationrules.json, a plik powinien mieć typ MIME: application/speculationrules+json. To najbardziej elastyczne podejście dla dużych witryn.

Praktyczne przykłady dla WordPress

Od wersji 6.8 WordPress ma natywne wsparcie dla Speculation Rules. W starszych wersjach wdrożysz je ręcznie lub wtyczką.

Przykład 1 – wdrażanie dla bloga

Aby przyspieszyć przejścia między artykułami, dodaj do functions.php motywu:

<?php
add_action('wp_head', function () {
    ?>
    <script type="speculationrules">
        {
            "prefetch": [
                {
                    "where": {
                        "and": [
                            {
                                "href_matches": "/*"
                            },
                            {
                                "not": {
                                    "href_matches": "/*/comment*"
                                }
                            }
                        ]
                    },
                    "eagerness": "moderate"
                }
            ]
        }
    </script>
    <?php
});

Przeglądarka będzie prefetchować wszystkie linki (z wyłączeniem komentarzy), czekając na sygnał użytkownika.

Przykład 2 – e‑commerce: prerender kluczowych ścieżek

Dla sklepów internetowych możesz prerenderować krytyczne kroki zakupowe, a resztę prefetchować:

<?php
add_action('wp_head', function () {
    ?>
    <script type="speculationrules">
        {
            "prerender": [
                {
                    "urls": [
                        "/koszyk/",
                        "/kasa/"
                    ],
                    "eagerness": "immediate"
                },
                {
                    "where": {
                        "href_matches": "/produkt/*"
                    },
                    "eagerness": "moderate"
                }
            ],
            "prefetch": [
                {
                    "where": {
                        "href_matches": "/*"
                    },
                    "eagerness": "moderate"
                }
            ]
        }
    </script>
    <?php
});

Koszyk i kasa ładują się natychmiast, produkty – po sygnale użytkownika, a reszta witryny korzysta z prefetchu.

Instalacja wtyczki dla WordPress

Wolisz bez kodu? Zainstaluj wtyczkę Speculative Loading z repozytorium WordPressa. Następnie przejdź do Ustawienia > Czytanie i skonfiguruj sekcję „Speculative Loading”.

Rzeczy, na które powinieneś uważać

Problem 1 – zbyt agresywne spekulowanie

Największym błędem jest prerenderowanie/prefetchowanie zbyt wielu stron. To marnuje przepustowość i baterię oraz obciąża serwer (więcej żądań na użytkownika).

Rozwiązanie: zacznij konserwatywnie – preferuj prefetch nad prerender i moderate nad eager. Mierz wyniki i skaluj dopiero, gdy widzisz realne korzyści.

Problem 2 – strony zmieniające stan

Strony takie jak logowanie lub koszyk mogą się zmienić między prerenderem a kliknięciem (np. użytkownik zdąży się zalogować).

Rozwiązanie: nie prerenderuj stron o zmiennym stanie. Prefetchuj je lub czekaj na wyraźny sygnał użytkownika. Gdy to konieczne, odśwież stan po wejściu.

Problem 3 – ciasteczka i prywatność

Przy prefetchu/prerenderze cross‑domain przeglądarka może anonimizować żądania (bez ciasteczek), ograniczając personalizację.

Rozwiązanie: skup się na stronach w obrębie tej samej domeny. Dla zewnętrznych zasobów zapewnij poprawne działanie bez personalizacji.

Problem 4 – zasoby do wykluczenia

Niektóre adresy nigdy nie powinny być prerenderowane (np. wylogowanie), bo mogą wywołać niepożądane akcje.

Rozwiązanie: zawsze wykluczaj adresy typu /logout, /sign-out oraz URL‑e wywołujące akcje (dodawanie/usuwanie itp.).

Wpływ na Core Web Vitals

Największy wpływ dotyczy Largest Contentful Paint (LCP) – przy prerenderze LCP bywa bliski 0 ms, bo treść jest gotowa od razu. W wielu przypadkach poprawia się też Cumulative Layout Shift (CLS), bo strona została już wyrenderowana.

Zawsze mierz realny wpływ na własnej witrynie, ponieważ efekty zależą od typu strony i ruchu.

Zobacz: Core Web Vitals: czym są? Jak mierzyć? Jak poprawić?

Wsparcie przeglądarek i kompatybilność

Speculation Rules API jest wspierane głównie przez przeglądarki oparte na Chromium – Chrome, Edge i Opera. Firefox i Safari na razie je ignorują.

To w porządku: brak wsparcia oznacza po prostu zignorowanie reguł. Użytkownicy obsługiwanych przeglądarek zyskują szybkość, pozostali mają standardowe działanie (progressive enhancement).

Aktualnie ok. 73% przeglądarek wspiera Speculation Rules – to znacząca część ruchu.

Jak mierzyć, czy to działa?

Narzędzia analityczne

Najlepsze są dane RUM (Real User Monitoring) – zbierane od realnych użytkowników. Web Vitals i Google Analytics pozwolą śledzić LCP, CLS i inne metryki, segmentując ruch z preloadem.

W Chrome DevTools sprawdzisz w Network żądania z nagłówkiem Sec-Purpose: prefetch;prerender, aby zobaczyć, co załadowano spekulacyjnie.

Mierzenie użycia i marnotrawstwa

Śledź odsetek spekulacji, które zostały wykorzystane. Dobrym celem jest min. 50%. Jeśli spadasz poniżej 30%, reguły są zbyt agresywne – złagodź je.

Testowanie wydajności

Użyj Lighthouse lub PageSpeed Insights, ale pamiętaj: testy laboratoryjne nie oddają pełni efektu. Dane RUM są ważniejsze.

Zaawansowane techniki i strategie wdrażania

Podejście warstwowe

Rozsądnie jest zwiększać agresywność krok po kroku:

Zacznij od prefetchu linków wewnątrz domeny (conservative).
Dodaj prerender stron o wysokim prawdopodobieństwie kliknięcia (moderate).
Prerenderuj strony niemal pewne (eager/immediate).

To gwarantuje zysk szybkości bez ryzyka przeciążenia.

Dynamiczna aktualizacja reguł

Jeśli wdrażasz reguły przez JS, możesz je odświeżać w reakcji na zachowanie użytkownika (np. po dodaniu produktu do koszyka):

async function refreshSpeculations() {
    const scripts = document.querySelectorAll(
        'script[type="speculationrules"]'
    );

    for (const s of scripts) {
        const ruleSet = s.textContent;

        s.remove();
        await Promise.resolve();

        const ns = document.createElement('script');
        ns.type = 'speculationrules';
        ns.textContent = ruleSet;

        document.body.appendChild(ns);
    }
}

Selektory CSS do dynamicznego wyzwalania

Zamiast wpisywać URL‑e na sztywno, użyj selektorów CSS, aby kontrolować spekulacje przez klasy:

<script type="speculationrules">
    {
        "prerender": [
            {
                "where": {
                    "selector_matches": ".important-link"
                }
            }
        ]
    }
</script>

<a href="/checkout" class="important-link">
    Przejdź do kasy
</a>

Wdrażanie dla różnych typów stron

Speculation Rules API świeci w aplikacjach wielostronicowych (MPA), gdzie nawigacja naprawdę przeładowuje stronę. W SPA zyski są mniejsze, bo routing obsługuje JavaScript.

Blog

Dla blogów domyślnie prefetchuj linki do artykułów, by przyspieszyć lekturę kolejnych wpisów:

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

E‑commerce

W sklepach internetowych bądź bardziej zdecydowany na ścieżkach krytycznych:

<script type="speculationrules">
    {
        "prerender": [
            {
                "urls": [
                    "/checkout",
                    "/cart"
                ],
                "eagerness": "immediate"
            }
        ],
        "prefetch": [
            {
                "where": {
                    "href_matches": "/product/*"
                },
                "eagerness": "eager"
            }
        ]
    }
</script>

Witryna informacyjna

W serwisach newsowych prefetchuj główne sekcje i artykuły:

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

Koszt infrastruktury i wydajność serwera

Jeśli każdy użytkownik wygeneruje 5 żądań zamiast 1, obciążenie potrafi wzrosnąć wielokrotnie. Zaplanuj zasoby i mądrze korzystaj z cache.

Cachowanie jest twoim sprzymierzeńcem

Upewnij się, że zasoby są cachowane po stronie przeglądarki i na CDN. Gdy CDN serwuje prefetch/prerender z edge, mniej obciążasz origin.

Używaj CDN

CDN (np. Cloudflare) potrafią inteligentnie traktować spekulacje, włączając je głównie dla zasobów już zcache’owanych.

Monitorowanie

Obserwuj obciążenie serwera i wpływ reguł. Jeśli rośnie zbyt mocno, złagodź strategię (mniej prerenderu, więcej prefetchu, niższe „eagerness”).

Przyszłość Speculation Rules

Chrome stale rozwija Speculation Rules API (np. w wersji 122 dodano lepszą kontrolę dynamicznych reguł i cache). W najbliższych latach możemy zobaczyć m.in.:

lepsze wsparcie w Safari i Firefox,
integrację z machine learning dla trafniejszych prognoz,
rozszerzoną obsługę cross‑domain prerenderingu,
lepszą obsługę dla aplikacji mobilnych.

Speculation Rules API to rozwijająca się technologia – jej możliwości będą rosły wraz ze wsparciem ekosystemu.

Czytaj też: Jak przyspieszyć stronę WWW? Optymalizacja szybkości strony