WordPress の Speculative loading （投機的読み込み）機能

WordPress 6.8 （ 2025 年 4 月リリース）で WordPress 本体に「 speculative loading （投機的読み込み）」機能が導入されました。

この機能は、ユーザーが次にアクセスしそうなページを事前に読み込むことで、ページ遷移時のパフォーマンスを大幅に向上させるものです。

本記事では speculative loading の概要や仕組み、導入背景、設定方法、注意点についてまとめました。

Speculative loading （投機的先読み）とは？

Speculative loading （投機的読み込み）とは、ユーザーがリンクをクリックする前に次に表示される可能性が高いページの HTML やリソースをブラウザがバックグラウンドで先に読み込んでおく仕組みです。 これにより、ユーザーがリンクをクリックした際のページ表示が高速化されます。

仕組み

Chromium が 2023 年に Speculation Rules API を導入しました。 これにより Chrome / Edge など Chromium ベースのブラウザで Speculation Rules API が利用可能になりました。

サイト管理者は type=speculationrules という <script> タグをページに埋め込むことで speculative loading の設定をブラウザに指定できます。

例 1:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

例 2:

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

バージョン 6.8 以降の WordPress はこれを利用して、同一オリジン（＝同一サイト）内のリンク先をブラウザに先読みさせるように指示します。 ブラウザ内で起こる処理の大まかな流れは次のとおりです。

1. ページで指定された Speculation Rules に基づいてページ内のリンクを解析
2. ユーザーがクリックしそうなリンク先ページをバックグラウンドで取得
3. 実際にリンクがクリックされたら 2 で取得済みのリソースを画面に表示

デフォルトの挙動

WordPress はデフォルトで以下の場合にフロントエンドのページで speculative loading を有効にします。

• ユーザーがログインしていない
• サイトでプリティパーマリンクが有効になっている
• クエリパラメータ（ GET パラメータ）が無い

読み込みタイミングは conservative eagerness と呼ばれるもので、ユーザーがリンクをクリックしようとしたときです。

Speculation Rules API では主に「プリフェッチ」（取得のみ）と「プリレンダー」（取得と描画）の 2 つの選択肢がありますが、 WordPress でのデフォルトは 6.8 時点では「プリフェッチ」となっています。

設定・カスタマイズ方法

WordPress 6.8 ではデフォルトで speculative loading が有効になっていますが、テーマやプラグインで挙動をカスタマイズ可能です。

特定のパスを除外する

特定のパスを除外するには wp_speculation_rules_href_exclude_paths フィルターフックを使います。

次の例では /cart/ から始まるパスを除外します。

add_filter(
    'wp_speculation_rules_href_exclude_paths',
    function ( $href_exclude_paths ) {
        $href_exclude_paths[] = '/cart/*';
        return $href_exclude_paths;
    }
);

積極性レベル（ eagerness ）を moderate に変更する

積極性のレベルを変更することもできます（デフォルトは auto ）。 次の例では積極性のレベルを moderate に変更します。

add_filter(
    'wp_speculation_rules_configuration',
    function ( $config ) {
        if ( is_array( $config ) ) {
            $config['eagerness'] = 'moderate';
        }
        return $config;
    }
);

積極性レベルを moderate にしてさらにモード（ mode ）を prerender に変更する

読み込みモードを変更することもできます（デフォルトは auto ）。 次の例では積極性レベルを moderate に変更し、さらに mode を prerender （プリレンダー）に変更します。

add_filter(
    'wp_speculation_rules_configuration',
    function ( $config ) {
        if ( is_array( $config ) ) {
            $config['mode']      = 'prerender';
            $config['eagerness'] = 'moderate';
        }
        return $config;
    }
);

プリティパーマリンクが無効なサイトでも speculative loading を有効にする

サイトのプリティパーマリンクが無効な場合、デフォルトで speculative loading は無効になりますがその挙動を変更することもできます。 次の例ではプリティパーマリンクが無効なときに speculative loading を mode: auto eagerness:auto で有効にします。

add_filter(
    'wp_speculation_rules_configuration',
    function ( $config ) {
        if ( ! $config && ! get_option( 'permalink_structure' ) ) {
            $config = [
                'mode'      => 'auto',
                'eagerness' => 'auto',
            ];
        }
        return $config;
    }
);

WordPress 本体のルールを上書きせずに新たなルールを追加する

WordPress 本体が提供するルールを上書きせずに新たにルールを追加することも可能です。 次の例ではいくつかのパスを対象として追加します。

add_action(
    'wp_load_speculation_rules',
    function ( WP_Speculation_Rules $speculation_rules ) {
        $speculation_rules->add_rule(
            'prerender',
            'my-moderate-prerender-url-rule',
            [
                'source'    => 'list',
                'urls'      => [
                    '/some-url/',
                    '/another-url/',
                    '/yet-another-url/',
                ],
                'eagerness' => 'moderate',
            ]
        );
    }
);

公式の Speculative Loading の説明ページで詳しく説明されているので、詳細に興味のある方は公式のページを参照してください。

参考ページ

• Speculative Loading in 6.8 – Make WordPress Core
• Speculation Rules API – Chrome for Developers
• WordPress 6.8 Field Guide – Make WordPress Core

関連ページ

• WordPress サイトの高速化・パフォーマンス改善方法まとめ
• WordPress でデフォルトで利用可能な画像フォーマット一覧