Speculation Rules API for WordPress and WooCommerce

Mariusz Szatkowski

EN

5.00 /5 - (42 votes )

Last verified: May 1, 2026

7min read

Guide

Core Web Vitals

Full-stack developer

In 2026, users expect navigation under 2 seconds. Every additional second of loading time costs 7% in lost conversions. Google knows this and rewards fast sites with higher rankings.

This guide isn’t theory. It’s working code and a checklist you can implement today on your WordPress site or WooCommerce store.

#1. Why performance still matters IN 2026

#User expectations

Load Time	Bounce Rate	Conversion
< 2s	9%	Baseline
3s	32%	-7%
5s	90%	-22%

Google confirmed: Core Web Vitals are a ranking factor. In 2024, FID was replaced by INP (Interaction to Next Paint) – a metric that measures page responsiveness to user interactions.

#Real vs perceived speed

You can have a slow server (TTFB 800ms), but if the user sees content instantly and navigation feels instant, perceived performance is excellent.

That’s exactly what Speculation Rules API does – it preloads next pages in the background before the user clicks.

#2. Baseline optimizations (do these first)

Before implementing advanced techniques, make sure the fundamentals are solid.

#Critical CSS and 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);

#Images: AVIF > WEBP > JPEG

WordPress 6.5+ supports AVIF natively. AVIF offers 20-30% better compression than 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="Product"
>

#Ttfb: First byte under 200ms

Optimization	TTFB Impact
PHP 8.3+ with OPcache	-30%
Redis Object Cache	-50%
CDN Edge Caching	-70%
WP-Cron on system crontab	-10%

#3. JavaScript runtime and main thread

#Fixing INP (interaction to next paint)

INP suffers when the main thread is blocked. Typical culprits:

Heavy page builders (Elementor, Divi)
Chat scripts (Intercom, Zendesk)
Tracking pixels (Facebook, Google Ads)

Solution: Break Long Tasks

// Split long tasks into smaller chunks < 50ms
async function longTask(items) {
    for (const item of items) {
        await processItem(item);
        // Yield to main thread
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

#Preventing CLS (layout shift)

/* Reserve space for images */
img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Reserve space for ads */
.ad-slot {
    min-height: 250px;
}

#4. Speculation rules API: Prefetch and prerender magic

This is the heart of this guide. Speculation Rules API is a native browser feature that allows preloading pages in the background.

#Basic prefetch (safe start)

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

#Advanced prerender (for high-Intent links)

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

#Differences: Prefetch vs prerender

Technique	What It Does	When to Use	Resource Cost
Prefetch	Downloads HTML/CSS/JS	Always safe	⬤○○ Low
Prerender	Full DOM + JS rendering	High click probability	⬤⬤⬤ High

#Eagerness levels

conservative: Only when user clicks and holds
moderate: Hover/pointer down (best for most cases)
immediate: Immediately after page load
eager: Immediately, aggressively

#5. WordPress implementation

#Method 1: Plugin (quick)

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

#Method 2: Dynamic rules (advanced)

add_action('wp_head', function() {
    $prerender_urls = [];
    
    // Prerender products from cart
    if (function_exists('WC') && WC()->cart) {
        foreach (WC()->cart->get_cart() as $item) {
            $prerender_urls[] = get_permalink($item['product_id']);
        }
    }
    
    // Prerender next archive page
    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: Before and after

#Case study 1: WooCommerce store (500 products)

Problem: Category → product navigation took 3.2s

Solution:

Prefetch for links in viewport
Prerender for “Add to Cart” and “Checkout”

Result:

Before: 3.2s
After: 0.4s (instant perceived)
Bounce Rate: -28%

#Case study 2: WordPress blog (1000+ articles)

Problem: INP 450ms, users felt “lag”

Solution:

Defer all scripts
Prerender for “Read more”
Object Cache (Redis)

Result:

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

#7. Pitfalls and warnings

#❌ don’t prerender:

Pages with authentication (login, user panel)
Pages with side effects (subscriptions, payments)
External URLs

#⚠️ limitations:

Mobile Data Saver disables speculation
Non-supporting browsers (Firefox, Safari < 17) ignore rules
Prerender limit: Chrome allows max 10 simultaneously

#Fallback for non-Supporting browsers

if (!HTMLScriptElement.supports?.('speculationrules')) {
    // Fallback: classic 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. Browser support (january 2026)

Browser	Prefetch	Prerender	Notes
Chrome 121+	✅	✅	Full support
Edge 121+	✅	✅	Full support
Safari 17.4+	✅	⚠️	Partial
Firefox	❌	❌	Planned

#9. Measurement and monitoring

#Tools

Chrome DevTools: Application → Speculative Loads
Lighthouse CI: Performance test automation
WebPageTest: Real tests from different locations
DebugBear: Real User Monitoring (RUM)

#Metrics to track

// Track "wasted" prefetches in 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. Implementation checklist

#✅ before implementation

Measure baseline Lighthouse score
Check TTFB < 200ms
Ensure Object Cache is active
Images are served as AVIF

#✅ speculation rules implementation

Add basic prefetch (moderate)
Analyze heatmaps (Hotjar, Clarity)
Identify top 3 navigation paths
Add prerender for high-intent links
Test on 10% traffic (A/B)
Monitor “wasted” prefetches

#✅ after implementation

Compare LCP, INP, Navigation Time
Check Cache Hit Ratio
Long-term: Bounce Rate, Conversion Rate

#Summary

Speculation Rules API is a significant shift for 2026. By preloading pages in the background, navigation becomes instant – without any infrastructure changes.

Key takeaways:

Start with prefetch with moderate eagerness – it’s safe
Add prerender for checkout flow in e-commerce
Monitor metrics – don’t guess, measure

Need professional optimization? As a WordPress specialist, I help speed up WordPress and WooCommerce sites. Also see WordPress speed optimization.