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

Czas ładowania	Współczynnik odrzuceń	Konwersja
< 2s	9%	Bazowa
3s	32%	-7%
5s	90%	-22%

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. Optymalizacje 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

Optymalizacja	Wpływ na TTFB
PHP 8.3+ z OPcache	-30%
Redis Object Cache	-50%
CDN Edge Caching	-70%
WP-Cron na crontab	-10%

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

Technika	Co Robi	Kiedy Używać	Koszt Zasobów
Prefetch	Pobiera HTML/CSS/JS	Zawsze bezpieczne	⬤○○ Niski
Prerender	Pełne renderowanie DOM + JS	Wysokie prawdopodobieństwo kliknięcia	⬤⬤⬤ Wysoki

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)

Przeglądarka	Prefetch	Prerender	Uwagi
Chrome 121+	✅	✅	Pełne wsparcie
Edge 121+	✅	✅	Pełne wsparcie
Safari 17.4+	✅	⚠️	Częściowe
Firefox	❌	❌	W planach

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:

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

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

Speculation Rules API i hacki wydajności 2026: jak przyspieszyć WordPress i WooCommerce o 70%