投機的読み込みでWordPressサイトのページ表示速度を改善

今日のウェブページには、ユーザー体験の向上を目的とした画像や動画、インタラクティブな要素が盛り込まれているのが一般的です。しかし、これらの要素がページの表示速度を遅くしている可能性があります。

技術がどれほど進歩しても、ウェブページの表示速度の高速化は常に重要視されるもの。

これを改善する1つの方法として、ユーザーがページに移動する前にプリレンダリングまたはプリフェッチすることができます。

プリレンダリングの歴史

2011年、Chromiumが<link rel="prerender" … >タグを通じて、Google Chromeに初期型となるプリレンダリングを導入しました。

これにより、開発者はユーザーが次に訪れる可能性のあるページをブラウザに提示できるように。ブラウザがバックグラウンドでこれらのページを取得してレンダリングすることで、ユーザーが実際に移動する際の読み込み時間を劇的に短縮します。

しかしこのプリレンダリングの実装は、多くの帯域幅とCPUリソースを消費し、ユーザーがページに訪問しなかった場合は、プライバシーの問題を引き起こす恐れがありました。また、プリレンダリングするリンクは手動で選択しなければならず、必ずしも効果的で実現可能なものではりませんでした。

これらの問題に対処するため、Chromeはlink要素のrel=prerender属性を使用したプリレンダリングを非推奨とし、代わりにNoState Prefetchを採用しました。NoState Prefetchは、JavaScript やその他のプライバシーを侵害する可能性のあるアクションを実行せずに、ページのリソースを取得するものです。

これによってリソースの読み込みは改善されましたが、プリレンダリングのように即座にページを表示することはできませんでした。

Speculation Rules APIとは

Speculation Rules APIは実験的なJSON定義のAPIで、ナビゲートする前にURLを投機的に事前に読み込み、レンダリング時間の短縮とユーザー体験の改善を実現します。

このAPIを使用すると、script type="speculationrules"内でJSON形式で定義された構造を持つルールを設定でき、ブラウザはこのルールをもとに指定されたURLをプリレンダリングします。

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

プリフェッチも同様で、通常はプリレンダリングの前に行われます。

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

上のコードは、プリフェッチまたはプリレンダリングするURLのリストを指定することで、Speculation Rules APIがどのように機能するかを示しています。

Googleは最近、Speculation Rules APIに新たな改良を加え、ドキュメントルールを使用した自動リンク検索機能を提供することを発表しました。これは、whereの条件に基づいてドキュメントからURLを取得することで機能します。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

上のコードでは、WordPressのログイン画面および管理画面を除いて、ページ上のすべてのURLがプリレンダリングの対象と見なされます。また、eagerness設定はeager（即時）、moderate（200ミリ秒のホバー時）、conservative（マウスまたはタップ時）のいずれかを指定することができます。

現在のページ上のリンクを見つけるために、CSSセレクタをhrefs属性一致の代替として使用するか、または併用することができます。

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Speculation Rules APIを使用すると、ページを検証する際、Chromeの「アプリケーション」タブのバックグラウンドサービス「投機的読み込み」を使ってこのAPIを検証することができます。

これについては、後ほど「WordPressサイトの投機ルールをデバッグする」セクションで掘り下げます。

ブラウザのサポート

Speculation Rules APIは、特定のバージョン以降、ChromeやEdgeを含む最新のChromiumベースのブラウザでサポートされています。

このAPIをサポートしているブラウザでは、読み込み時間短縮の恩恵を受けることができます。また、APIはあくまでプログレッシブエンハンスメントなツールであるため、その他のブラウザの利用者が悪影響を受けることもありません。

Speculative Loadingプラグイン

Speculation Rules APIをWordPressサイトに導入できるようにするべく、WordPressのパフォーマンスチーム（Googleの開発者を含む）は最近、Speculative Loadingプラグインをリリースしました。このプラグインは、ページ上でリンクされているフロントエンドURLの投機的読み込みを可能にします。

現在APIがまだ初期段階であることから、このプラグインの普及率はまだ低いですが、ユーザーから高い評価を受けています。

デフォルトでは、ユーザーが関連するリンクにマウスカーソルを合わせた際に、フロントエンドのURLをプリレンダリングするように設定されています。「設定」＞「表示設定」にある「Speculative Loading（投機的読み込み）」セクションで変更することも可能です。

デフォルトのEagerness設定は、通常ページ上のリンクにカーソルを合わせた際にトリガーされるModerateになっていることから、基本的にはプラグインを有効化するだけでOKです。

WordPressサイトにSpeculative Loadingプラグインをすでにインストールしている場合は、Chrome デベロッパー ツールでサイトを検証し、「要素」タブを開きます。下にスクロールすると、script type="speculationrules"にさまざまな投機的読み込みのルールが追加されていることがわかります。

これらのルールは、プリレンダリングを行う、または行わないリンクの指定、Ergerness設定に正規表現を使用します。以下、これらのルールを掘り下げていきます。

過剰使用を防ぐための制限

Chromeでは、APIの過剰使用を防ぐため、以下のような制限を設けています。

Eagerness	プリフェッチ（ページ数）	プリレンダリング（ページ数）
immediate/eager	50	10
moderate/conservative	2 (FIFO)	2 (FIFO)

Eagernessやユーザーインタラクションに基づいた様々な設定により、過剰使用を防止します。

• immediateおよびeager：ユーザーのアクションに依存しないことから、より厳しい制限がある。古くなった投機を排除することで、動的な容量調整が可能。
• moderateおよびconservative：ユーザーのアクションがトリガーになるため、FIFO（First In, First Out）の原則に従い、ページ数は2に制限される。「First In, First Out」は「先入れ先出し」の原則であり、ブラウザがユーザーの操作を予測してページを事前に読み込む際のメモリ管理手法の1つ。

特定のURLのプリフェッチとプリレンダリングを防ぐ

WordPress管理画面は、デフォルトでプリレンダリングとプリフェッチから除外されます。

WordPress開発者は、plsr_speculation_rules_href_exclude_pathsフィルターを使って、URLを優先的に事前読み込みするURLの種類を決めるルールをカスタマイズすることができます。

以下は、https://wordpresssite.com/cart/やhttps://wordpresssite.com/cart/book/のようなURLがプリフェッチやプリレンダリングから除外されるようにするコード例です。

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

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

plsr_speculation_rules_href_exclude_pathsフィルターは、現在の設定（prefetchかprerenderのいずれか）を受け取り、条件付き除外を提供します。

以下は、https://wordpresssite.com/products/のようなURLをプリレンダリングの対象から除外して、プリフェッチを行うようにするコード例です。

<?php

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

WordPressサイトの投機ルールをデバッグする

プリレンダリングされたページは、別のレンダラーでレンダリングされるため、投機ルールのデバッグは複雑になります。これに対応するため、Chromeはデベロッパー ツールの機能を更新して、デバッグできるようにしています。

Chrome デベロッパー ツールの「アプリケーション」タブを開き、「投機的読み込み」までスクロールします。投機読み込みのステータスやプリレンダリングされたURL、失敗したURLなど、さまざまな情報が表示されます。

以下のスクリーンショットでは、投機ルールのJSONで設定されたルールに一致するURLに基づいて、ページ上の5つのリンクがプリレンダリングされることがわかります。すべてのURLを列挙する必要はなく、ブラウザはドキュメントルールにより、ページ上の同じオリジンのリンクからこれらのURLを取得します。

いくつかのリンクの「ステータス」は、「トリガーされていません（Not triggered）」と表示されており、プリレンダリングが開始されていません。しかし、ページ上のリンクにカーソルを合わせると、各URLがプリレンダリングされ、以下のようにステータスが変化します。

Chromeはプリレンダーに制限を設定しており、moderateの場合は最大2回までです。そのため、3つ目のリンクにカーソルを合わせると失敗し、その理由も表示されます。

また、デベロッパー ツールで使用するレンダラーは、右上のドロップダウンメニュー、またはパネル上部でURLを選択し、「検証」を選択すると切り替えることができます。

このドロップダウン（および選択された値）は、リクエストされたページがプリレンダリングされているかを確認できる「ネットワーク」タブなど、すべてのタブで共有されます。

「要素」タブでは、ページの内容を確認することができます。

プリレンダリングされたページをデバッグするため、プリフェッチすることも可能です。この場合は、Speculative loadingプラグインの設定「Speculation Mode（投機モード）」で「Prefetch」を選択してください。

これで、デベロッパー ツールでページを検証し、「投機読み込み」に移動すると、さまざまなURLの「アクション」がプリフェッチになり、ルールも変わります。

リンクをホバーした後に「ネットワーク」タブに移動すると、「タイプ」列の最後にプリフェッチされたリソースが表示されます。これらは将来のナビゲーションのため、最も低い優先度で取得されます。Chromeは、現在のページのリソースを優先します。

パフォーマンスの比較

Speculative Loadingプラグインの機能と仕組みを押さえたところで、同じサーバー（KinstaのWordPress専用マネージドホスティング）上で2つの同じウェブサイトのパフォーマンスを比較してみましょう。

MyKinstaで、Iowa (US Central)データセンター（GoogleのC3D VMを使用）に2つのWordPressサイトを作成し、1つのサイトにはSpeculative Loadingプラグインをインストールします。その他のプラグインは一切使用しません。

「Bare-site」はSpeculative Loadingプラグインなし、「Speculative-site」には、WordPress管理画面にSpeculative Loadingプラグインをインストールして有効化します。

なお、Speculative Rules APIは、アクセスしようとする次のページにかかる読み込み時間のみを改善するもので、Lighthouseのような一般的なサイトパフォーマンスツールでその効果を判断することはできません。

2つのウェブサイトの特定の内部リンクからページを読み込み、サイトを検証する際にChrome デベロッパー ツールの「ネットワーク」タブで読み込み時間やその他の情報を確認し、ページ速度を比較します。

Bare-site（プラグインなし）は、読み込みプロセス全体が移動中に行われ、DOMコンテンツが読み込まれるため、ページの表示に時間がかかります。

一方、Speculative-site（プラグインあり） の場合は、DOMコンテンツはすでにSpeculative API経由で読み込まれ、キャッシュされています。

両者には、約0.22秒の差が生じました。一見それほど大きな違いではありませんが、コンテンツの多い大規模なサイトではこの差がかなり大きくなります。

Speculation Rules APIが分析に与える影響

分析は、ページビューやイベントを通じてサイトの利用状況を追跡し、リアルユーザーモニタリング（RUM）を通じてパフォーマンスを評価するために必要不可欠です。したがって、プリレンダリングが分析データに与える影響も理解しておきましょう。

例えば、Speculation Rules APIを使用する場合、プリレンダリングされたページが実際にアクセスされた場合のみ、分析を有効にするためのコードを追加する必要があるかもしれません。Google アナリティクス、Google パブリッシャー タグ（GPT）、Google AdSenseはページが有効化される（表示されて操作が可能になる）までトラッキングを遅延しますが、すべてのサービスでこれが行われるわけではありません。

これを処理するには、ページが有効化された場合のみ分析を初期化するようにPromiseを設定します。

// プレレンダリングされたページが有効化された場合にのみ分析を行うことを約束
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve);
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // 分析を初期化
}

initAnalytics();

まとめ

今回は、Speculative Rules APIとは何か、どのように機能するのか、そしてWordPressサイトでどのように使用することができるかを詳しくご紹介しました。現在も実験的な機能になりますが、着々と大規模な導入が進んでいます。

また現時点では、投機ルールは同じタブ内のページに限定されていますが、この制限を取り除くための取り組みも進行中です。

重要な点として、サイトのパフォーマンスは、ホスティングの質に大きく依存します。Kinstaでは、数十のプレミアム機能を揃えた高性能WordPress専用マネージドホスティングを提供しています。

Kinstaのインフラストラクチャは完全にコンテナ化され、Googleのプレミアムティアネットワーク上のGoogle Cloud Platformのみで駆動。最速のデータサーバー、驚異的なパフォーマンス、サーバーレベルのキャッシュ、専用リソース、および堅牢なセキュリティを利用することができます。

WordPress専用マネージドホスティングの詳細については、お客様の実際の声をご覧いただくか、営業部門までお気軽にお問い合わせください。

WordPressへのSpeculative Rules APIの導入についてご質問やご意見がありましたら、以下のコメント欄でお知らせください。