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ść nadal ma znaczenie w 2026

#Oczekiwania użytkowników

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.

#Szybkość rzeczywista vs postrzegana

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. Optymalizację bazowe (zrób to najpierw)

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

#Critical CSS i defer javascript

// 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);

#Obrazy: AVIF > WEBP > JPEG

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"
>

#Ttfb: Pierwszy bajt poniżej 200ms

#3. Javascript runtime i główny wątek

#Naprawianie INP (interaction to next paint)

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));
    }
}

#Zapobieganie CLS (layout shift)

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

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

#4. Speculation rules API: Magia prefetch i prerender

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

#Podstawowy prefetch (bezpieczny start)

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

#Zaawansowany prerender (dla linków o wysokim zamiarze)

<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

#Eagerness levels

• 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. Implementacja w WordPress

#Metoda 1: Wtyczka (szybka)

<?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 (zaawansowana)

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. Case studies: Przed i po

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

Problem: Nawigacja kategoria → produkt trwała 3.2s

Rozwiązanie:

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

Wynik:

• Przed: 3.2s
• Po: 0.4s (natychmiastowe postrzeganie)
• Współczynnik odrzuceń: -28%

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

Problem: INP 450ms, użytkownicy odczuwali “lag”

Rozwiązanie:

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

Wynik:

• INP: 450ms → 85ms
• LCP: 2.8s → 1.2s
• Organic Traffic: +35%

#7. Pułapki i ostrzeżenia

#❌ nie prerenderuj:

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

#⚠️ ograniczenia:

• 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 dla nieobsługujących przeglądarek

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. Wsparcie przeglądarek (styczeń 2026)

#9. Pomiary i monitoring

#Narzędzia

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

#Metryki do śledzenia

// Ś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

#✅ przed wdrożeniem

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

#✅ wdrożenie speculation rules

• 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

#Podsumowanie

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.