Wordpress Speed Hacks - Speculative Loading - Hakeemify

What is Speculative Loading?

Most sites wait for a Click to start loading. Speculative loading anticipates the user's intent. When a cursor hovers over a link (or enters the viewport), the browser begins fetching data in the background.

🐢

Standard

Wait for click

🐇

Speculative

Load on hover

The Latency Gap (ms)

Comparison of perceived load time for the end-user.

The Mechanics

The technical process behind the "Instant" feel. No complex setups, just smart browser instructions.

🖱️

1. Intent

User hovers over a link or link enters viewport.

➜

📡

2. Fetch

Browser works in background to fetch HTML/Assets.

➜

👆

3. Action

User actually clicks the link (ms later).

➜

⚡

4. Instant

Page renders immediately from cache.

Why we need 3 Hacks?

Native API (Chrome/Edge) vs Legacy/Other (Safari/Firefox).

*Approximate global market share relevant to API support

The "Modern Native" Approach

Speculation Rules API

The most efficient method for Chromium browsers. Add this JSON to your <head> to enable ultra-fast background pre-rendering.

<script type="speculationrules">
{
  "prerender": [{
    "source": "list",
    "urls": ["/next-page", "/about"]
  }]
}
</script>

The "Set It & Forget It" PHP

functions.php Snippet

Automates the process via WordPress hooks. This automatically injects the speculation rules into every page header.

add_action( 'wp_head', function() {
  echo '<script type="speculationrules">...</script>';
});

The "Universal" Fallback

Instant.page JS

A tiny script that enables preloading for all browsers (Safari/Firefox). Use "viewport" intensity for maximum speed.

<script src="https://instant.page/5.2.0" 
  type="module" 
  data-instant-intensity="viewport">
</script>

⚠️ Risks & Caveats

Speculative loading is powerful, but "With great power comes great server responsibility."

➤
Server Load The browser fetches pages users *might* not click. If you are on cheap shared hosting, monitor CPU usage.
➤
Dynamic Actions Never preload Logout or Add-to-Cart links. Use exclusions in your JSON rules!
➤
Analytics Ensure your analytics tool (GA4) filters out pre-renders that don't become views.

The "Speculative Loading" Hack