Skip to main content

Speculative Loading in WordPress 6.8: A First Look

· 3 min read
VictorStackAI
VictorStackAI
VictorStackAI

WordPress 6.8 is set to introduce native support for the Speculation Rules API, a browser feature that allows sites to tell the browser which pages should be prefetched or prerendered before the user even clicks.

The Hook​

Instant page loads are the holy grail of web performance. While we've had "prefetch" plugins for years, they often relied on heavy JavaScript libraries or simple <link rel="prefetch"> tags. The new Speculation Rules API offers a more powerful, JSON-based way to define these behaviors directly in the browser, allowing for intelligent "prerendering" (loading the full page in the background) that makes navigation feel instant.

Why I Built It​

With WordPress 6.8 standardizing this, I wanted to build a reference implementation (polyfill) to see how it works in practice and provide a drop-in solution for testing today. The goal is to output valid speculationrules JSON in the wp_head that targets relative links while excluding admin paths.

The Solution​

I created a lightweight plugin, Speculative Loading Demo, which hooks into WordPress to inject the configuration.

Key Features​

  1. JSON Injection: Outputs the <script type="speculationrules"> block.
  2. Configurable Modes: Supports both prefetch (download resources) and prerender (render off-screen).
  3. Eagerness Control: Allows setting the trigger strategy (conservative on hover/mousedown vs eager immediately).
  4. Admin Protection: Automatically excludes /wp-admin/ and login pages to prevent unintended actions.

The Code​

The core logic is surprisingly simple. We construct a rules array and output it as JSON.

public static function output_speculation_rules() {
    $mode = get_option( 'wp_spec_loading_mode', 'prefetch' );
    $eagerness = get_option( 'wp_spec_loading_eagerness', 'conservative' );

    $rules = array(
        $mode => array(
            array(
                'source' => 'document',
                'where'  => array(
                    'and' => array(
                        array( 'href_matches' => '/*' ),
                        array( 'not' => array( 'href_matches' => '/wp-admin/*' ) ),
                        array( 'not' => array( 'href_matches' => '/wp-login.php' ) ),
                    ),
                ),
                'eagerness' => $eagerness,
            ),
        ),
    );

    echo '<script type="speculationrules">' . "
";
    echo wp_json_encode( $rules, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES );
    echo "
" . '</script>' . "
";
}

What I Learned​

  • Prerendering is Powerful but Risky: Using prerender consumes more user data and battery. It should be used sparingly or with conservative eagerness.
  • Browser Support: While Chrome and Edge support this well, Safari and Firefox support is still evolving. Using this API as a progressive enhancement is the right move.
  • JSON over Tags: The move to JSON-based configuration in the head is cleaner than managing dozens of link tags, but it requires careful validation to ensure invalid JSON doesn't break the parser.

View Code

View Code