【WordPress】Speculation RulesをWordPressに実装したらすでに入ってた話

Speculation Rules とは

Speculation Rules とは、ユーザーがリンクをクリックする前に、次のページをバックグラウンドで先読み（プリレンダリング）しておくブラウザの API です。

通常のページ遷移はこうです。

ユーザーがクリック
→ リクエスト送信
→ HTML取得
→ CSS・JS・画像取得
→ レンダリング
→ 表示

Speculation Rules を使うとこうなります。

ホバーした時点で裏側でレンダリング開始
→ユーザーがクリック
→ 表示済みのページに切り替えるだけ

クリックした瞬間にはすでにページが準備できているので、遷移がほぼ瞬時に感じられるようです。

実装方法

<script type="speculationrules"> タグに JSON でルールを書くだけです。

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/wp-admin/*" } },
        { "not": { "href_matches": "/wp-login.php" } },
        { "not": { "selector_matches": "[rel~=nofollow]" } },
        { "not": { "selector_matches": "[data-no-prerender]" } }
      ]
    },
    "eagerness": "eager"
  }],
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/wp-admin/*" } },
        { "not": { "href_matches": "/wp-login.php" } },
        { "not": { "selector_matches": "[rel~=nofollow]" } },
        { "not": { "selector_matches": "[data-no-prerender]" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/wp-admin/*" } },
        { "not": { "href_matches": "/wp-login.php" } },
        { "not": { "selector_matches": "[rel~=nofollow]" } },
        { "not": { "selector_matches": "[data-no-prerender]" } }
      ]
    },
    "eagerness": "eager"
  }],
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/wp-admin/*" } },
        { "not": { "href_matches": "/wp-login.php" } },
        { "not": { "selector_matches": "[rel~=nofollow]" } },
        { "not": { "selector_matches": "[data-no-prerender]" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

prefetch と prerender の違い

prefetch は HTML を取得するだけなので軽く、prerender はJS 実行含む完全レンダリングなので重いです。両方組み合わせることで、prefetch で先にHTML をキャッシュしておき、prerender の処理をより速く完了させる相乗効果があります。

eagerness の使い分け

コストが軽い prefetch は eager で広く先読みし、重い prerender は moderate でホバーを確認してから実行するのが推奨パターンです。

なぜ除外指定が必要なのか

Speculation Rules の先読みは、裏側で GETリクエストを送信してページを取得・実行 します。つまり「ユーザーがクリックしていないのに HTTP リクエストが飛ぶ」ということです。

世の中には GETパラメーターで操作を受け付ける実装が存在します。

/wp-admin/users.php?action=delete&user=1
/logout
/cart/add?id=5

このようなURLに先読みでリクエストが飛ぶと、ユーザーが何もクリックしていないのに処理が実行される可能性があります。

HTTP の仕様として「GET は読み取りだけに使うべき」という原則がありますが、それを守っていない URL が現実には存在します。だから除外指定で守ってあげる必要があります。

各除外指定の意味はこうです。

除外したいリンクには属性を付けるだけで対応できます。

<a href="/cart" data-no-prerender>カートへ</a>

<a href="/cart" data-no-prerender>カートへ</a>

WordPress に実装したら二重になった

WordPress テーマの functions.php に実装しようと以下のコードを書きました。

function add_speculation_rules() {
    if ( is_user_logged_in() ) return;
    ?>
    <script type="speculationrules">
    {
        "prefetch": [{ ... }],
        "prerender": [{ ... }]
    }
    </script>
    <?php
}
add_action( 'wp_footer', 'add_speculation_rules' );

function add_speculation_rules() {
    if ( is_user_logged_in() ) return;
    ?>
    <script type="speculationrules">
    {
        "prefetch": [{ ... }],
        "prerender": [{ ... }]
    }
    </script>
    <?php
}
add_action( 'wp_footer', 'add_speculation_rules' );

ブラウザの DevTools でソースを確認したところ、<script type="speculationrules"> が 2つ出力されていました。

原因：WordPress 6.8 からコアに組み込み済みだった

調べてみると wp-includes の中に class-wp-speculation-rules.php というファイルが存在しました。

WordPress 6.8（2025年4月リリース）から Speculation Rules がコアに組み込まれていたのです。

つまり何もしなくても WordPress が自動で出力してくれています。独自に実装すると二重出力になってしまうので注意が必要です。

ただし、デフォルトは prefetch の conservative で動作します。これはリンクをクリックし始めたタイミングで初めて先読みが走る、最も控えめな設定です。

より高速化したい場合は wp_speculation_rules_configuration フィルターでカスタマイズできます。

/

// functions.php or functions-inc/*.php
add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
    if ( is_array( $config ) ) {
        $config['mode'] = 'prerender'; // prefetch → prerender に変更
        $config['eagerness'] = 'moderate'; // conservative → moderate に変更
    }
    return $config;
} );

// functions.php or functions-inc/*.php
add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
    if ( is_array( $config ) ) {
        $config['mode'] = 'prerender'; // prefetch → prerender に変更
        $config['eagerness'] = 'moderate'; // conservative → moderate に変更
    }
    return $config;
} );

prerender + moderate にすることで、ホバーしたタイミングでページを丸ごとバックグラウンドでレンダリングするようになり、クリック時にほぼ瞬時にページが切り替わります。

まとめ

・Speculation Rules はクリック前にページを先読みして遷移を高速化する API
・WordPress サイト（MPA）で特に効果が大きい
・WordPress 6.8 以降はコアに組み込み済みなので自前実装は不要
・デフォルトは prefetch + conservative の控えめな設定
・wp_speculation_rules_configuration フィルターで prerender + moderate に変更するとさらに高速化できる