Speculation rules API and performance hacks 2026: Speed up WordPress & WooCommerce by 70%

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

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

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

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)

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 game-changer for 2026. By preloading pages in the background, navigation becomes instant – without any infrastructure changes.

Key takeaways:

1. Start with prefetch with moderate eagerness – it’s safe
2. Add prerender for checkout flow in e-commerce
3. 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.