今日、ウェブページには、ユーザー体験を向上させるためにデザインされた画像や動画、インタラクティブな要素があふれています。しかし、これらはウェブページの読み込み時間を遅くする可能性があります。テクノロジーは常に進歩していますが、ひとつの目標は不変です。誰もがウェブページの読み込みを高速化したいと考えています。ウェブページの読み込みを速くする1つの方法は、ユーザーが閲覧する前にプリレンダリングまたはプリフェッチすることです。

プリレンダリングの歴史

2011年、ChromiumチームはChromeにタブを導入した。初期のプリレンダリング。.

こうすることで、開発者はユーザーが次に訪れる可能性の高いページをブラウザに警告することができる。ブラウザは、これらのページをバックグラウンドで静かに取得し、レンダリングする。

利点があるにもかかわらず、この早期プリレンダリング機能は、多くの帯域幅とCPUリソースを使用し、ユーザーがプリレンダリングされたページを訪問しない場合、プライバシーの問題につながる可能性があります。さらに、プリレンダリングするリンクを手動で選択する必要がありますが、これは必ずしも効率的とは言えず、実行可能でもありません。

これらの問題のいくつかに対処するため、Chromeではrel=prerenderヒントのプリレンダリング、有利なのはノーステート・プリフェッチ NoState Prefetchメソッドは、リソースの読み込みを改善しますが、完全なプリレンダリングのように即座にページを読み込むことはできません。

投機ルールAPIの紹介

投機ルールAPIは新しい実験的なJSON定義APIで、ナビゲートする前にURLを推測的にプリロードすることで、レンダリング時間を短縮し、ユーザーエクスペリエンスを向上させる。

このAPIにより、開発者はJSON形式で定義された構造体を使用してルールを設定できる。script type="speculationrules"ブラウザはこの構造を使って、どのURLをプリレンダリングするかを決定することができる。

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

プリレンダリングの最初のステップであるプリフェッチに関しても同じことが言える：

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

上のコードスニペットは、プリフェッチまたはプリレンダリングするURLのリストを指定することで、投機的ルールAPIがどのように機能するかを示している。最近、Googleは投機的ルールAPIへの新たな機能強化により、以下の機能が追加された。文書ルールを使って自動的にリンクを見つけるオプション。これは、基準に基づいてドキュメントからURLを取得することによって行われます。どこ.

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

このコード・スニペットでは、WordPressのログイン・ページと管理ページを指すものを除き、ページ上のすべてのURLがプリレンダリングの対象となります。やる気– 熱心(すぐに）、控えめ(200ミリ秒ホバー）と保守的(マウスまたは地面に触れているとき）。

CSSセレクタは、マッチの代わりとして、あるいはマッチと組み合わせて使うこともできる。href = "/stock/stock_detail.html?現在のページのリンクを検索するために使用します：

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

推定ルールAPIを使用する場合、Chromeを使用して、ページをチェックする必要があるときにプログラム」タブの「投機的ロード」バックグラウンド・サービスで確認する。

デバッグのセクションで見ていこう。

ブラウザサポート

特定のバージョンから、最近のChromiumベースのブラウザ（ChromeやEdgeを含む）はどちらも投機的ルールAPIをサポート.

このAPIはインクリメンタル・エンハンスメントであるため、サポートされているブラウザを使用しているユーザーはロード時間の短縮の恩恵を受け、その他のブラウザを使用しているユーザーには何ら悪影響はありません。

Speculative Loading WordPressプラグイン

WordPress の投機的ルール API を利用するためにワードプレス・パフォーマンス・チーム (Googleの開発者を含む）が最近リリースした。おそらくロードされたプラグイン.このプラグインは、読み込まれたページ上のリンクのフロントエンドURLを推測することをサポートしています。

今のところ、APIがまだ初期段階であるため、このプラグインの採用率は低いが、好意的な評価も集めている。

デフォルトでは、プラグインは、ユーザーが関連するリンクにカーソルを合わせたときに、WordPressのフロントエンドのURLをあらかじめ表示するように設定されています。セットアップ >読む 下げるおそらく装填済みセクションでカスタマイズできる。

つまり、ページ上でリンクされているURLはすべてやる気プリレンダリングの設定控えめこの設定は通常、リンクの上にカーソルを置くと起動します。したがって、プラグインを有効化した後に何かアクションを実行する必要はありません；箱から出してすぐに使える。.

例えば投機的ローディングプラグイン。Chrome DevToolsを使ってサイトを検査しエレメント タブ下にスクロールすると、タブがscript type="speculationrules"様々な推測ルールを追加しました。

プリレンダリングすべきリンクの指定、プリレンダリングすべきでないリンクの指定、熱心さのレベルの設定に正規表現を使用する。これらのルールについては、以下で詳しく説明する。

特定のURLのプリフェッチとプリプレゼンテーションを防ぐ

デフォルトでは WP管理者ルーティングはプリレンダリングとプリフェッチから除外される。ルーティングはワードプレス開発者どのルートを優先するかを決めることができる。

を使用することができます。plsr_speculation_rules_href_exclude_pathsフィルタは、プリロードされるURLのタイプを推測するためのルールをカスタマイズします。

次のコード例では、URLが類似していることを確認している。https://wordpresssite.com/cart/もしかしたらhttps://wordpresssite.com/cart/book/はプリフェッチとプリレンダリングから除外されます：

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths'、
    関数 ( $exclude_paths ) { を追加します。
        $exclude_paths[] = '/cart/*'；
        return $exclude_paths；
    }
).

WordPressウェブサイトの投機的ルールのデバッグ

プリレンダリングされたページは別のレンダラーでレンダリングされ、アクティブになると現在のタブに置き換わる隠れた背景タブのようになるため、投機的ルールのデバッグは厄介です。Chrome チームは、デバッグに使用できるように DevTools で多くの作業を行いました。

Chrome DevToolsの「アプリケーション タブをクリックし"投機的ローディング" タブを表示します。このタブでは、推測、プリレンダリングされたURL、失敗したURLなどに関する詳細な情報を開発者に提供します。

ここでは、ページ上の5つのリンクが、Speculative rules JSONで設定されたルールに一致するURLに基づいて、以下のようにプリレンダリングできることがわかります。ドキュメントルールによって、ブラウザはページ上の同じソースリンクからこれらのURLを取得することができます。

一部のリンクの「ステータス」が「Not Triggered」と表示されていますが、これらのリンクのプリレンダリング処理はまだ開始されていません。しかし、ページ上のリンクにカーソルを合わせると、各URLがプリレンダリングされるにつれてステータスが変化するのがわかります。

クロームではプリレンダリングに制限を設けており、緊急度が中程度の場合、プリレンダリングは最大2回までとなっているため、3つ目のリンクにカーソルを合わせると、そのURLの失敗理由が表示される：

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

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

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

プリレンダリングされたページをデバッグできるように、プリフェッチすることもできます。speculative loading "プラグインでは、必ず「プリフェッチ する「投機モード.

DevToolsの検査ページを使用し、Speculative Loadingタブに移動したら、次のようにします。そうしれいかん プリフェッチは様々なURLに対して行われ、そのルールは変化する。

リンクにカーソルを合わせネットワーク」タブを選択すると、プリフェッチされたリソースが最後に表示される。「タイプカラムが表示されます。これらのリソースは将来のナビゲーション用であり、Chromeは現在のページのリソースを優先するため、最も低い優先度で取得されます。

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

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

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

これを回避するには、ページがアクティブなときだけパージングを初期化するプロミスを設定すればよい：

// プリレンダリングされたページのページアクティベーション時にアナリティクスを有効にするためのプロミス
const whenActivated = new Promise((resolve) => { {ページアクティベーション時にアナリティクスを有効にするプロミス。
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve); } else { {.
  } else {
    resolve()；
  }
}).

async function initAnalytics() { // アナリティクスを初期化します。
  await whenActivated; // アナリティクスを初期化します。
  // アナリティクスを初期化する
}

initAnalytics()；

概要

この記事では、Speculative Rules APIとは何か、どのように機能するのか、WordPressサイトでの使い方について説明します。これはまだ実験的な機能ですが、徐々に広まりつつあります。投機的ルールはまだ同じタブ内のページに限定されていますが、この制限を減らす努力がなされています。