投機的読み込み：WordPressサイトを高速化する秘訣

更新日
2025年6月27日

[aioseo_eeat_author_tooltip]

[aioseo_eeat_reviewer_tooltip]

インターネットではスピードがすべてです。ユーザーはウェブページが瞬時に読み込まれることを期待しており、1秒の遅延でも直帰率の上昇や収益の損失につながる可能性があります。これは特に、複数のプラグインと重いコンテンツに依存することが多いWordPressサイトで顕著です。

投機的読み込みは、ユーザーがクリックする前にページを準備することで、ウェブサイトの読み込み速度を向上させるスマートな方法です。投機的読み込みは、ユーザーの操作を待ってデータを取得するのではなく、予測技術を用いて重要なページをバックグラウンドでプリロードまたはプリレンダリングします。このガイドでは、その仕組み、WordPressで投機的読み込みプラグインを使用して実装する方法、そしてパフォーマンスコミュニティで注目を集めている理由について解説します。

WordPressサイトのパフォーマンスを向上させ、読み込み時間を短縮したいと考えているなら、この技術を理解しておくことは重要です。

コンテンツ

プリレンダリングの簡単な入門：昔と今

投機的読み込みを理解するには、プリレンダリングがどのように進化してきたかを知ることが役立ちます。2011年にChromiumチームは<link rel=”prerender”>タグは、ブラウザがページ全体を事前に静かに読み込むことを可能にするものでした。そのアイデアは、ユーザーが次にどのページにアクセスするかを推測し、バックグラウンドでレンダリングするというものでした。ユーザーがそのリンクをクリックすると、そのページが瞬時に表示されるのです。.

この機能は強力でしたが、問題もありました。帯域幅とCPUリソースを過度に消費し、ユーザーが実際に訪問したことのないページを読み込むことがありました。また、特に共有デバイスではプライバシーに関する懸念も生じました。その結果、Chromeはこの機能を、スクリプトを実行したりページ全体をレンダリングしたりすることなくページリソースのみを取得する、より慎重な「NoState Prefetch」という手法に置き換えました。

NoState Prefetch は不要な負荷の削減には役立ちましたが、完全な事前レンダリングがもたらすような速度向上は実現できませんでした。.

読み込み時間が遅いことにお困りですか?

当社のエキスパートがWordPressサイトを最適化し、速度とパフォーマンスを最大限に高めます。ユーザーエクスペリエンスを向上させ、コンバージョン率を向上しましょう。.

お問い合わせ

投機ルール API とは何ですか?

Speculation Rules APIは、プリレンダリングを復活させるために設計された最新のソリューションです。より優れた制御、柔軟性、そしてより少ないリスクで実現されています。このAPIにより、開発者はJSONスクリプトで一連のルールを定義できます。これらのルールは、ユーザーの行動やその他の要因に応じて、ブラウザにどのページをプリフェッチまたはプリレンダリングするかを指示します。.

たとえば、事前レンダリングの基本的な JSON 構成は次のようになります。

<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["about.html", "contact.html"] } ] } </script>

このシンプルなスクリプトは、ブラウザにリストされたURLを事前レンダリングするよう指示し、クリックするとほぼ瞬時に読み込みが行われるようにします。同じ形式でページのプリフェッチも可能です。

<script type="speculationrules"> { "prefetch": [ { "urls": ["services.html", "pricing.html"] } ] } </script>

最近の改善により、ドキュメントベースのルールが利用可能になり、ブラウザがページからリンクを自動的に選択し、投機的読み込みを適用できるようになりました。これにより、手動でURLをリストする必要性が減り、APIがより動的になります。ルールはhrefの一致、CSSセレクタ、またはその両方の組み合わせに基づいて設定できるため、開発者は影響を受けるリンクを正確に制御できます。.

この機能は、ユーザーナビゲーションを強化するだけでなく、 WordPress のパフォーマンス。

WordPressにおける投機的読み込みの仕組み

WordPressでは、投機的読み込みはもはや開発者だけの実験ではありません。WordPressパフォーマンスチームの最近の取り組みのおかげで、この機能はシンプルなプラグイン統合を通じて、一般のサイト運営者にも利用できるようになりました。.

仕組みはこうです。投機的読み込みにより、ウェブサイトはユーザーが次にクリックする可能性のある内部リンクを予測できます。予測が完了すると、ブラウザは必要なリソースをプリフェッチするか、ページ全体をバックグラウンドで静かに事前レンダリングします。つまり、ユーザーが最終的にそのリンクをクリックすると、ブラウザが既に膨大な処理を済ませているため、ページは瞬時に表示されます。.

このプロセスの中核となるのは、ブラウザのロードマップのような役割を果たすSpeculation Rules APIです。JSONで定義された構造を用いて、どのURLをどのような条件でプリロードすべきかを定義します。WordPressでは、このメカニズムはフロントエンドURL、特にユーザーがページ間を移動する可能性が高いブログ、ショップページ、サービスリストなどに適用できます。.

投機的読み込みを特に強力にするのは、eagerness 構成です。

Eager: ブラウザはページをすぐに読み込みます。
中程度: ユーザーがリンクの上に短時間 (通常 200 ミリ秒) マウスを置いた後にページが事前レンダリングされます。
保守的: ブラウザは、マウスのクリックやタップによる開始などのさらなる操作を待機します。

この階層化されたアプローチにより、投機的読み込みによる帯域幅の浪費を防ぎながら、関心の高いページの読み込み時間を改善できます。多くのWordPressサイトでは、速度と効率のバランスが取れた「中程度」の設定が効果的です。.

投機的読み込みプラグイン: インストールと設定

WordPressサイトにコードを変更することなく投機的読み込みを導入する最も簡単なソリューションは、GoogleとWordPressコアチームの貢献者によって開発されたSpeculative Loadingプラグインです。このプラグインは、サイト所有者が手動で詳細な設定を行うことなく、投機的読み込みルールを活用できるようにするために導入されました。.

インストール手順:

WordPress ダッシュボードに移動します。.
プラグイン > 新規追加に移動します。
「投機的積立」を検索してください。
[インストール]をクリックし、 [アクティブ化] をクリックします。

プラグインを有効にすると、speculationrulesスクリプトがサイトのHTMLに直接追加されます。このスクリプトはドキュメントレベルのルールを使用して、関連するWordPressフロントエンドURLに自動的にプリレンダリングを適用します。.

デフォルトでは、プラグインは中程度のEageness設定を使用します。これは、ユーザーがリンクにマウスオーバーしてしばらくしてから、リンク先のページの事前レンダリングを開始することを意味します。この動作はパフォーマンスを最適化しており、システムリソースを圧迫したり、ユーザーのプライバシーを侵害したりすることはありません。.

プラグインの設定は、ダッシュボードの「設定」>「読み込み」から管理できます。「投機的読み込み」という新しいセクションで、以下の操作が可能です。

投機モードを変更する（プリフェッチまたはプリレンダリング）
デフォルト設定を表示または更新する
特定の URL に対して条件付き除外を提供する

例えば、WordPressは/wp-admin/や/wp-login.phpといったパスを自動的にプリレンダリングから除外します。WordPressフィルターを使えば、/checkout/や/cart/といったURLを独自の除外対象として追加できます。

このハンズフリーのセットアップにより、開発者でなくても、サイトで事前レンダリングを有効にして、頻繁にアクセスするページの速度を向上させることが非常に簡単になります。.

ブラウザのサポートと互換性

投機的読み込みの最も魅力的な点の一つは、最新のブラウザで既にサポートされていることです。Speculation Rules APIは、Google ChromeやMicrosoft EdgeなどのChromiumベースのブラウザで、特定のバージョン以降からネイティブに動作します。.

訪問者が対応ブラウザを使用している場合、投機的読み込みは即座に開始され、体感的なパフォーマンスが向上します。ブラウザが投機的読み込みをサポートしていない場合でも、サイトは通常どおり機能します。つまり、投機的読み込みはプログレッシブエンハンスメント（漸進的拡張）であり、可能な限りエクスペリエンスを向上させながら、何も損なうことはありません。.

このような互換性は、幅広いユーザー層をターゲットとするWordPressサイトにとって重要です。訪問者がデスクトップブラウザを使用しているかモバイルデバイスを使用しているかに関係なく、投機的読み込みはレンダリングを高速化します。特に、内部ページ間を素早く移動する場合に役立ちます。.

開発者は、Can I Use などのツールを使用するか、Chrome DevTools の「投機的ロード」タブで直接動作を調べることで、ブラウザのサポートを確認できます。.

開発者向けの高度なルールとフィルター

投機的読み込みはそのままでも強力ですが、開発者は事前レンダリングとプリフェッチの対象とするURLをカスタマイズすることで、さらに高度な機能を実現できます。この高度な制御は、すべてのページを事前に読み込む必要がないeコマースストア、会員サイト、動的アプリケーションなどで特に役立ちます。.

WordPressでは、plsr_speculation_rules_href_exclude_pathsなどのフィルターを通してこれを実現しています。このフィルターを使うことで、開発者は条件付き除外を設定でき、モード（プリレンダリングまたはプリフェッチ）、パス、さらにはクエリパラメータに基づいて特定のURLのみをプリロードできます。.

例1: カートURLを除外する

カート関連のページでの投機的な読み込みを停止する場合は、次のスニペットを使用できます。

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

これにより、/cart/ またはそのサブパスに一致する URL が事前レンダリングまたはプリフェッチされなくなります。これは、不要なサーバー負荷やアクションの早すぎるトリガーを回避するのに役立ちます。.

例2: プリフェッチを許可するがプリレンダリングを無効にする

機密性の高い商品ページでは、プリフェッチは許可するが、プリレンダリングは禁止したいとします。その場合、モードを検出するロジックを追加できます。

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/products/*'; } return $exclude_paths; }, 10, 2 );

これにより、開発者は特定の WordPress コア URL が投機的読み込みでどのように動作するかを詳細に制御できるようになり、プライバシーの問題を防ぎ、動的コンテンツを保護し、ユーザーエクスペリエンスを向上させることができます。.

フロントエンドの設定に応じて、.no-prefetch や .no-prerender などのCSSクラスを持つリンクをターゲットにすることもできます。例えば、これらのクラスを持つリンクは、推測ルールJSONの selector_matches を使用することで、事前に読み込まれないようにスキップできます。.

これらの技術を用いることで、開発者は投機的読み込みの動作がサイトの目標と完全に一致するようにすることができます。特に、ログインユーザー、チェックアウトフロー、または nofollowリンク有効です。

Chrome DevTools での投機的読み込みのデバッグ

WordPressサイトで投機的読み込みを有効にしたら、期待通りに動作していることを確認することが重要です。幸いなことに、Chrome DevToolsはブラウザ内で投機的な動作を直接検査できる強力な手段を提供しています。.

デバッグを開始するには、Chromeでサイトを開き、F12キーを押してDevToolsを起動します。次に、以下の操作を行います。

アプリケーションタブに移動します。
「投機的ロード」まで下にスクロールします。
事前にレンダリングまたはプリフェッチされて、推測的に読み込まれた URL のリストが表示されます。.

このパネルには、次のような各 URL のステータスが表示されます。

トリガーされていない （まだユーザー操作なし）、
トリガー （ホバーまたはクリック時）
事前レンダリング、または
プリフェッチ.

サイト上のさまざまなリンクにマウスオーバーすると、「投機的読み込み」タブがリアルタイムで更新されます。これにより、推測ルールに基づいてバックグラウンドで処理されているURLを確認できます。.

例えば、中程度の先行レンダリングを有効にすると、Chrome は先入先出（FIFO）システムを使用して、一度に 2 つの URL のみを事前レンダリングします。つまり、3 つのリンクにマウスを移動した後、他の 2 つのリンクがまだアクティブな場合、3 番目のリンクの事前レンダリングに失敗する可能性があります。.

以下の機能を使用して、事前レンダリングされたページをさらに詳しく調べることもできます。

要素タブ: 事前レンダリングされたコンテンツの HTML を参照します。
ネットワークタブ: すでに要求されキャッシュされた。
コンソールとソース：スクリプトがアクティベーション後に遅延しているか、正しく実行されているかを確認します。

右上のドロップダウンでレンダラーインスタンスを切り替えると、事前レンダリングされたページを分離し、ライブタブと同様にそのネットワークアクティビティや DOM 構造を検査できます。

このレベルの可視性により、開発者は投機ルールをデバッグし、投機的読み込みプラグインのトラブルシューティングを行い、セットアップがユーザーの動作やパフォーマンスに影響を与えないことを確認できます。.

プリフェッチとプリレンダリング: 違いは何ですか?

投機的読み込みにはプリフェッチと事前レンダリングの両方が含まれますが、これら 2 つは動作が異なり、目的も異なります。.

プリフェッチ

HTML、CSS、JavaScript などのリソースをダウンロードします。.
ページをレンダリングしません。.
ユーザーが実際にクリックした後の読み込み時間を短縮するために使用されます。.
システムリソースへの影響が少なくなります。.
アクセスされる可能性は高いが、途中で実行すべきではないページに最適です。.

プリレンダリング

ページ全体を隠しタブに読み込んでレンダリングします。.
ユーザーがページをナビゲートすると、ページは完全にインタラクティブになります。.
CPU とメモリの使用量が増えます。.
優先度の高いリンクや一般的なナビゲーションパスに最適です。.

たとえば、ブログ投稿や製品カテゴリなどの WordPress フロントエンド URL を事前にレンダリングし、即時のやり取りを必要としない可能性のある連絡先ページやサポートページのみをプリフェッチすることができます。.

投機的読み込みプラグインでこれを設定するには、プラグインの設定パネルで投機モードを事前レンダリングまたはプリフェッチのいずれかに切り替えます。.

選択したモードは、ユーザーがコンテンツを体験する速度、システムメモリの使用量、WordPress サイト全体のパフォーマンスの認識に影響します。.

ここでもChromeのDevToolsが役立ちます。「投機的読み込み」タブで違いを確認できます。事前レンダリングされたページは完全なDOMプレビューが表示されますが、プリフェッチされたページはパッシブなバックグラウンドリソースとして表示されます。.

この違いを理解することで、サイト所有者と開発者は、ユーザーの行動、利用可能な帯域幅、サイトのアーキテクチャに基づいて、より賢明な決定を下すことができます。.

分析における推測ルール API の影響

投機的読み込みによりページの読み込み時間とユーザーエクスペリエンスが大幅に改善されますが、Web サイトの分析を追跡する際にいくつかの課題が生じます。.

ページがプリレンダリングされている場合、ユーザーがページにアクセスする前にバックグラウンドで読み込まれます。そのため、 Google Analytics、ヒートマップ、イベントトラッカーなどの分析ツールが、ユーザーが実際にページを閲覧したり操作したりする前に、訪問やイベントを記録してしまう可能性があります。

誤検知を防ぐために、開発者は実際のユーザーナビゲーションに基づいた条件付きトラッキングを実装する必要があります。.

例えば、すべてのアナリティクスプラットフォームがデフォルトでプリレンダリング検出をサポートしているわけではありません。訪問者がリンクをクリックしていなくても、ページがバックグラウンドで読み込まれた時点でページビューが記録されるプラットフォームもあります。幸いなことに、Google アナリティクス、Google パブリッシャータグ、Google AdSense などのツールは既にこれを効率的に処理しており、プリレンダリングされたページがアクティブになるまでイベントトラッキングを遅延させます。.

ただし、カスタムトラッキングスクリプトやサードパーティツールを使用している場合は、ページがアクティブになった時点でのみトラッキングが開始されるようにチェックを追加する必要があります。これは、document.prerenderingプロパティとprerenderingchangeイベントリスナーを組み合わせることで実現できます。.

以下は JavaScript を使用した簡単な例です。

const whenActivated = new Promise((resolve) => { if (document.prerendering) { document.addEventListener('prerenderingchange', resolve); } else { resolve(); } }); async function initAnalytics() { await whenActivated; // ここで分析コードを初期化します } initAnalytics();

このアプローチにより、マーケティングデータはバックグラウンドプロセスではなく、実際のユーザーインタラクションを反映することが保証されます。これは、リアルユーザーモニタリング（RUM）、 A/Bテスト、またはビジネス上の意思決定に影響を与えるイベントベースの分析を使用しているチームにとって特に重要です。

投機的読み込みプラグイン、カスタム投機ルールを使用している場合でも、または手動で投機ルール API を実装している場合でも、常にそれが分析にどのような影響を与えるかを確認し、それに応じてトラッキングを調整してください。.

適切な構成であれば、パフォーマンスの高速化と正確な分析情報という両方のメリットを享受できます。.

潜在的な落とし穴: 投機的読み込みを無効にするタイミング

投機的読み込みは確かに便利ですが、有効にすることが必ずしも理想的ではないシナリオもあります。特に動的なページや機密性の高いユーザーデータを扱うサイトでは、予期しない動作を引き起こしたり、サイトの機能に支障をきたしたりする可能性があります。.

特定の URL またはユーザーロールに対して推測読み込みを無効にすることを検討する必要がある状況をいくつか示します。.

1. ログインユーザーとパーソナライズされたコンテンツ

アカウントダッシュボードやメンバーシップエリアなど、パーソナライズされたコンテンツを提供するページの事前レンダリングは避けてください。他のユーザーのセッションデータを使用してバックグラウンドで読み込むと、混乱を招いたり、機密情報が漏洩したりする恐れがあります。.

これを防ぐには、ログインしたユーザーが投機的な読み込みをトリガーしないように完全に除外するか、PHP を使用してセッションベースのコンテンツを含む特定の URL をフィルター処理します。.

2. 電子商取引のカート、チェックアウト、支払いページ

/cart/、/checkout/ などのページや、商品選択に関連付けられたクエリパラメータを含む URL は除外してください。これらのページはリアルタイム更新に依存することが多く、ユーザーが意図を確認する前に事前レンダリングされると、誤った情報が表示される可能性があります。

このようなページを投機的読み込みから除外するには、plsr_speculation_rules_href_exclude_paths フィルターを使用します。

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/checkout/*'; $exclude_paths[] = '/cart/*'; return $exclude_paths; } );

これにより、WordPress コア URL が、投機的読み込みによって価値が付加されるページに対してのみ最適化され、重要なユーザーアクションを妨げる可能性のあるページに対しては最適化されなくなります。.

3. クライアントサイドJavaScript状態を持つページ

リアルタイムダッシュボード、フォーム、予約システムなど、JavaScriptを多用してデータを動的に読み込むページは、事前レンダリングすべきではありません。事前レンダリングは、状態が古くなったり、ユーザーがクリックするまで実行されないはずのイベントがトリガーされたりする可能性があります。.

このようなページを（レンダリングせずに）プリフェッチしたい場合は、プリレンダリングモードのみを無効にする条件付き除外を使用します。

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/live-dashboard/*'; } return $exclude_paths; }, 10, 2 );

4. CSSクラスの使用を除外する

no-prefetch や do-not-prerender などのCSSクラスを追加することで、特定のリンクの取得を抑止することもできます。Speculation Rules APIでは、JSON設定で selector_matches を使用できます。

これは、PHP ファイルを編集せずに、よりきめ細かな制御を提供したいプラグイン開発者やテーマ作成者にとって特に役立ちます。.

投機的ロードは素晴らしいツールですが、万能なソリューションではありません。適切な除外と設定を行うことで、落とし穴を回避しながらパフォーマンスを向上させることができます。.

まとめ：自信を持ってより高速なWordPressサイトを構築する

投機的読み込みは、現代のウェブパフォーマンスにおける最もエキサイティングな進歩の一つであり、WordPressはすでにこれを採用しています。Speculation Rules APIやSpeculative Loadingプラグインなどのツールを使用することで、サイト所有者や開発者はページの読み込み時間を大幅に短縮し、ユーザーナビゲーションを改善し、全体的にスムーズなエクスペリエンスを提供できます。.

コンテンツ豊富なブログ、WooCommerceストア、あるいは動的なWordPressサイトを構築する場合でも、投機的読み込みは複雑なコードに触れることなく、ページの表示速度を実感していただけます。また、スマートなブラウザサポートとカスタマイズ可能な設定により、ほとんどの環境にシームレスに適合します。.

サイト全体で有効にする前に、WordPressのコアURLを確認し、動的なページがないか確認し、必要に応じて条件付き除外を適用してください。Chrome DevToolsを使用して動作を検証し、投機的な機能がアナリティクスやパフォーマンス指標にどのような影響を与えるかを常に監視してください。.

より高速で、よりスマートで、より魅力的なウェブサイトの、投機的読み込みこそがあなたの秘密兵器になるかもしれません。