WordPressのSpeculation Rules APIとその意味を包括的に考察します。

WordPressのSpeculation Rules APIを活用するため、WordPressパフォーマンスチーム（Googleの開発者を含む）は最近、Speculation Loadingプラグインをリリースしました。このプラグインは、ページの読み込み速度を向上させるために、ページ上のリンクのフロントエンドURLを事前に読み込みます。

デフォルトでは、このプラグインは、ユーザーが関連するリンクにカーソルを合わせたときにWordPressフロントエンドのURLを事前にレンダリングします。セットアップ">"読む">"おそらく搭載"セクションを参照してください。

WordPressの管理者設定でSpeculative Loadingプラグインをカスタマイズするのはとても簡単です。これは、ページ上のすべてのリンクがプリセットの"控えめ" eagerness の設定はプリレンダリングを行い、リンクにカーソルを合わせた時にプリレンダリングを開始します。そのため、プラグインを有効化した後、余計なことをする必要はありません。

例えば、Push to Load プラグインを WordPress サイトにインストールした場合、Chrome DevTools を使ってサイトを検査し、Elements タブをクリックします。スクロールダウンすると、次のようなさまざまな推測ルールが追加されていることに気づくでしょう。 です。.

このプラグインは正規表現を使用して、プリレンダリングが必要なリンクを指定し、プリレンダリングされないリンクを除外し、プリレンダリングの熱心さを設定します。次のセクションでは、これらのルールについて詳しく説明します。

使いすぎを防ぐための制限

Chromeでは、APIの使いすぎを防ぐため、いくつかの制限を設けています：

これらの制限は、緊急性とユーザーとの対話に基づいて設定されます。

• そくやくこれらの設定はユーザーの操作に依存しないため、より制限的です。古いプリレンダリングを削除して新しいプリレンダリングを追加することで、ダイナミックな容量調整が可能です。
• 穏健保守新しいプリレンダーが追加されると、メモリを節約するために最も古いプリレンダーが置き換えられます。

特定の URL がプリフェッチおよびプリレンダリングされないようにします。

注目してください：デフォルトでは、WP-admin のルートはプリレンダリングとプリフェッチから除外されます。WordPress 開発者であれば、優先するルートを選択できます。

フィルタを使用できます。 plsr_speculation_rules_href_exclude_paths 投機的プリロードから除外する必要があるURLタイプを自分で定義します。

次のコード例では https://wordpresssite.com/cart/ もしかしたら https://wordpresssite.com/cart/book/ URLはプリフェッチおよびプリレンダリングされません：

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) { 以下のようにします。
    $exclude_paths[] = '/cart/'；
    $exclude_paths[] = '/cart/book/'；
    return $exclude_paths；
}).
add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) { 以下のようにします。
    $exclude_paths[] = '/cart/'；
    $exclude_paths[] = '/cart/book/'；
    return $exclude_paths；
}).
add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) { 以下のようにします。
    $exclude_paths[] = '/cart/'；
    $exclude_paths[] = '/cart/book/'；
    return $exclude_paths；
}).

特定の URL をプリレンダリングから除外しても、プリフェッチは許可したい場合があります。たとえば、クライアントサイドの JavaScript を使ってユーザの状態を更新するようなページは、プリレンダリングには適さないかもしれません。

plsr_speculation_rules_href_exclude_paths フィルタは現在のモード(プリフェッチ もしかしたら プリレンダ)を条件付きで除外します。

例えば、次のコードは同様のことを保証します。 https://wordpresssite.com/products/ URLはプリレンダリングできませんが、プリフェッチすることはできます：

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths, $mode) {
    if ($mode === 'prerender') {
        $exclude_paths[] = '/products/';
    }
    return $exclude_paths;
}, 10, 2);
add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths, $mode) {
    if ($mode === 'prerender') {
        $exclude_paths[] = '/products/';
    }
    return $exclude_paths;
}, 10, 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ウェブサイトの投機的ルールのデバッグ

投機的ルールのデバッグは、プリレンダリングされたページが別のレンダラーでレンダリングされ、アクティブになると現在のタブに置き換わる隠された背景タブのようになるため、厄介な場合があります。この問題に対処するため、Chrome チームは DevTools に多くの改良を加え、デバッグを容易にしました。

Chrome DevTools で " に移動します。アプリケーション"タブをクリックし、"Speculative Loads "セクションまでスクロールダウンしてください。これにより、開発者は投機的、プリレンダリングされた URL、失敗した URL などに関する詳細な情報を得ることができます。

ページ上に、投機的ルールJSONの設定に基づいてプリレンダリングできるリンクが5つあることがわかります。すべての URL を列挙する必要はありません。ドキュメント ルールによって、ブラウザはページ上の同じソース リンクからそれらの URL を自動的に取得できます。

のリンクの一部は、"情勢"が "Not Triggered "と表示されている場合は、これらのリンクのプリレンダリング処理がまだ開始されていないことを意味します。ページ上のリンクにカーソルを合わせると、プリレンダリング中に各URLの状態が変化するのがわかります。

Chromeはプリレンダリングに制限を設けています。 モデレートモードこのセクションでプリレンダリングできるURLはせいぜい2つなので、3つ目のリンクにカーソルを合わせると、そのURLのプリレンダリング失敗の理由が表示されます。

右上のドロップダウンメニューを使うか、パネル上部のURLを選択して検査で、DevToolsパネルで使用するレンダラーを切り替えます：

このドロップダウンリスト(および選択された値)は、他のすべてのパネル("ネットワーク" パネル)が共有され、リクエストされたページがプリレンダリングされたページであることがわかります：

またはエレメント パネルでページの内容を見ることができます：

プリレンダリングページをデバッグできるように、プリフェッチページもデバッグできます。については "投機的ローディング"プラグインを選択してください。プリセレクト「として投機モデル".

さて、DevToolsを使ってページを検査し、".投機的ローディング"タブをクリックすると、さまざまなURLがプリフェッチされ、対応するルールが変更されます。

リンクの上にカーソルを置いて"網目"タブでは、プリフェッチされたリソースはリストの最後に表示されます。類型論「の列が表示されます。これらのリソースは将来のナビゲーションに使用されるため、最も低い優先度で取得されます。

Speculative Rules APIがアナリティクスに与える影響

アナリティクスは、ウェブサイトの利用状況（ページビューやイベントなど）を追跡し、リアルユーザーモニタリング（RUM）を通じてパフォーマンスを評価するために不可欠です。プリレンダリングがアナリティクスデータに影響を与える可能性があることに注意することが重要です。

たとえば、Speculative Rules API を使用する場合、事前にレンダリングされたページが実際に訪問されたときにのみアナリティクスが有効になるように、追加のコードが必要になることがあります。Google Analytics、Google Publisher Code (GPT)、Google AdSenseは、ページがアクティブになるまでトラッキングを遅らせますが、すべてのアナリティクスプロバイダがデフォルトでこれを行うわけではありません。

これを回避するには、ページがアクティブになったときだけ分析を初期化するようにPromiseを設定します：

document.addEventListener('prerenderingchange', function(event) {)
    if (!event.isPrerendering) { // 解析コードを初期化します。
        // 解析コードを初期化します。
    }
});
document.addEventListener('prerenderingchange', function(event) {)
    if (!event.isPrerendering) { // 解析コードを初期化します。
        // 解析コードを初期化します。
    }
});
document.addEventListener('prerenderingchange', function(event) {)
    if (!event.isPrerendering) { // 解析コードを初期化します。
        // 解析コードを初期化します。
    }
});

概要

この記事では、Presumption Rules API とは何か、どのように動作するのか、WordPress サイトで使用する方法について説明します。まだ実験的な機能ではありますが、広く採用されつつあります。

このプラグインは、ユーザーがリンクにカーソルを合わせたときに、ページ上にあらかじめ用意されたリンクを使って、対応するURLをプリレンダリングします。プリレンダリングのルールはWordPressの設定で簡単にカスタマイズできます。このプラグインは、プリレンダリングが必要なリンクを設定するために正規表現を使用し、使いすぎを防止するメカニズムを持っています。