Speculation Rules API dla WordPress i WooCommerce

W 2026 roku użytkownicy oczekują nawigacji poniżej 2 sekund. Każda dodatkowa sekunda ładowania to 7% utraconych konwersji. Google to wie i nagradza szybkie strony wyższymi pozycjami.

Ten przewodnik to nie teoria. To działający kod i lista kontrolna, które możesz wdrożyć dzisiaj na swojej stronie WordPress lub sklepie WooCommerce.

#1. Dlaczego wydajność WordPress i WooCommerce nadal ma znaczenie

#Współczynnik odrzuceń a czas ładowania strony

Źródło: Google i SOASTA, benchmarki szybkości stron mobilnych. Liczby to wzrost prawdopodobieństwa odrzucenia wobec jednej sekundy, a nie bezwzględny współczynnik odrzuceń. Think with Google

Google potwierdził: Core Web Vitals to czynnik rankingowy. W 2024 roku FID został zastąpiony przez INP (Interaction to Next Paint), metrykę, która mierzy responsywność strony na interakcje użytkownika.

#Czym jest postrzegana szybkość strony

Możesz mieć wolny serwer (TTFB 800ms), ale jeśli użytkownik widzi treści natychmiast i nawigacja wydaje się natychmiastowa, postrzegana prędkość jest doskonała.

To właśnie robi Speculation Rules API, preładowuje następne strony w tle, zanim użytkownik kliknie.

#2. Jakie optymalizacje zrobić przed Speculation Rules API

Zanim wdrożysz zaawansowane techniki, upewnij się, że fundamenty są solidne.

#Jak dodać defer do JavaScript w functions.php

// functions.php - Defer non-critical JS
add_filter('script_loader_tag', function($tag, $handle) {
    $defer_scripts = ['jquery', 'wp-embed', 'comment-reply'];
    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

#Obsługa AVIF w WordPress 6.5+

WordPress 6.5+ obsługuje AVIF natywnie. AVIF oferuje 20-30% lepszą kompresję niż WebP.

<img
  src="product.avif"
  srcset="product-400.avif 400w, product-800.avif 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  decoding="async"
  alt="Produkt"
>

#Jak zejść z TTFB poniżej 200 ms

#3. Jak Javascript runtime wpływa na INP w WordPress

#Jak naprawić INP przez dzielenie długich zadań

INP cierpi, gdy główny wątek jest zablokowany. Typowi winowajcy:

• Ciężkie page buildery (Elementor, Divi)
• Skrypty czatów (Intercom, Zendesk)
• Piksele śledzące (Facebook, Google Ads)

Rozwiązanie: Break Long Tasks

// Dziel długie zadania na mniejsze chunki < 50ms
async function longTask(items) {
    for (const item of items) {
        await processItem(item);
        // Ustąp głównemu wątkowi
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

#Jak zapobiec CLS przy obrazach i reklamach

/* Rezerwuj miejsce dla obrazów */
img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Rezerwuj miejsce dla reklam */
.ad-slot {
    min-height: 250px;
}

#4. Jak Speculation Rules API robi prefetch i prerender

To serce tego przewodnika. Speculation Rules API to natywna przeglądarkowa funkcja, która pozwala preładowywać strony w tle.

#Reguła prefetch dla wszystkich linków wewnętrznych

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/wp-admin/*" } },
          { "not": { "href_matches": "*.pdf" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

#Prerender koszyka, zamówienia i stron produktów

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/koszyk/", "/zamowienie/"],
      "eagerness": "immediate"
    },
    {
      "source": "document",
      "where": {
        "or": [
          { "href_matches": "/produkt/*" },
          { "selector_matches": ".important-link" }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

#Różnice: Prefetch vs prerender

#Co oznaczają poziomy eagerness

• conservative: Tylko gdy użytkownik kliknie i przytrzyma
• moderate: Hover/pointer down (najlepsze dla większości)
• immediate: Natychmiast po załadowaniu strony
• eager: Natychmiast, agresywnie

#5. Jak wdrożyć Speculation Rules API w WordPress

#Metoda 1: reguły we własnej wtyczce

<?php
/**
 * Plugin Name: Speculation Rules API
 */
add_action('wp_head', function() {
    if (is_admin()) return;
    ?>
    <script type="speculationrules">
    {
      "prefetch": [
        {
          "source": "document",
          "where": {
            "and": [
              { "href_matches": "/*" },
              { "not": { "href_matches": "/wp-*" } }
            ]
          },
          "eagerness": "moderate"
        }
      ]
    }
    </script>
    <?php
});

#Metoda 2: dynamiczne reguły dla koszyka i paginacji

add_action('wp_head', function() {
    $prerender_urls = [];

    // Prerender produkty z koszyka
    if (function_exists('WC') && WC()->cart) {
        foreach (WC()->cart->get_cart() as $item) {
            $prerender_urls[] = get_permalink($item['product_id']);
        }
    }

    // Prerender następną stronę archiwum
    if (is_archive() || is_home()) {
        $next_link = get_next_posts_link();
        if ($next_link) {
            preg_match('/href="([^"]+)"/', $next_link, $matches);
            if (!empty($matches[1])) {
                $prerender_urls[] = $matches[1];
            }
        }
    }

    if (empty($prerender_urls)) return;

    $rules = [
        'prerender' => [[
            'source' => 'list',
            'urls' => array_unique($prerender_urls),
            'eagerness' => 'moderate'
        ]]
    ];

    echo '<script type="speculationrules">' . json_encode($rules) . '</script>';
});

#6. Jakie wyniki dają Speculation Rules API w praktyce

#Case study 1: Sklep WooCommerce (500 produktów)

Problem: Nawigacja kategoria → produkt trwała kilka sekund

Rozwiązanie:

• Prefetch dla linków w viewport
• Prerender dla “Dodaj do koszyka” i “Kasa”

Wynik:

• Przed: kilka sekund oczekiwania
• Po: postrzegane jako natychmiastowe
• Współczynnik odrzuceń: wyraźnie spadł

#Case study 2: Blog WordPress (1000+ artykułów)

Problem: INP poza zielonym zakresem, użytkownicy odczuwali “lag”

Rozwiązanie:

• Defer wszystkich skryptów
• Prerender dla “Czytaj więcej”
• Object Cache (Redis)

Wynik:

• INP: wszedł w zielony zakres
• LCP: wszedł w zielony zakres
• Organic Traffic: wzrósł

#7. Jakie pułapki Speculation Rules API omijać

#Których stron nie prerenderować

• Stron z autoryzacją (login, panel użytkownika)
• Stron z efektami ubocznymi (zapisy, płatności)
• Zewnętrznych URL-i

#Data Saver, wsparcie przeglądarek i limit prerenderów

• Mobile Data Saver wyłącza speculation
• Nieobsługujące przeglądarki (Firefox, Safari < 17) ignorują reguły
• Limit prerenderów: Chrome pozwala na max 10 jednocześnie

#Fallback prefetch dla przeglądarek bez wsparcia

if (!HTMLScriptElement.supports?.('speculationrules')) {
    // Fallback: klasyczny prefetch
    document.querySelectorAll('a[href^="/"]').forEach(link => {
        link.addEventListener('mouseenter', () => {
            const prefetch = document.createElement('link');
            prefetch.rel = 'prefetch';
            prefetch.href = link.href;
            document.head.appendChild(prefetch);
        }, { once: true });
    });
}

#8. Które przeglądarki wspierają Speculation Rules API w 2026

#9. Jak mierzyć Speculation Rules API po wdrożeniu

#Narzędzia do sprawdzania speculative loads

• Chrome DevTools: Application → Speculative Loads
• Lighthouse CI: Automatyzacja testów wydajności
• WebPageTest: Rzeczywiste testy z różnych lokalizacji
• DebugBear: Real User Monitoring (RUM)

#Jak śledzić zmarnowane prefetche w GA4

// Śledź "zmarnowane" prefetchy w GA4
new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.initiatorType === 'speculation') {
            gtag('event', 'speculation_load', {
                url: entry.name,
                duration: entry.duration
            });
        }
    }
}).observe({ type: 'resource' });

#10. Lista kontrolna wdrożenia Speculation Rules API

#Przed wdrożeniem

• Zmierz bazowy Lighthouse score
• Sprawdź TTFB < 200ms
• Upewnij się, że Object Cache jest aktywny
• Obrazy są serwowane jako AVIF

#W trakcie wdrożenia

• Dodaj bazowy prefetch (moderate)
• Analizuj heatmapy (Hotjar, Clarity)
• Zidentyfikuj top 3 ścieżki nawigacji
• Dodaj prerender dla linków o wysokim zamiarze
• Przetestuj na 10% ruchu (A/B)
• Monitoruj “zmarnowane” prefetchy

#Po wdrożeniu

• Porównaj LCP, INP, Navigation Time
• Sprawdź Cache Hit Ratio
• Długoterminowo: współczynnik odrzuceń, współczynnik konwersji

#Od czego zacząć wdrożenie Speculation Rules API

Speculation Rules API to przełom dla 2026. Dzięki preładowywaniu stron w tle, nawigacja staje się natychmiastowa, bez żadnych zmian w infrastrukturze.

Najważniejsze:

1. Zacznij od prefetch z moderate eagerness, to bezpieczne
2. Dodaj prerender dla procesu zakupowego w e-commerce
3. Monitoruj metryki, nie zgaduj, mierz

Potrzebujesz profesjonalnej optymalizacji? Jako specjalista WordPress pomagam w przyspieszaniu stron WordPress i WooCommerce. Zobacz też optymalizacja szybkości WordPress.