投機ルール API を使用して Web ページを即座にロードする方法

公開: 2024-02-17

2024 年は、インスタント ローディングが Web パフォーマンスの新たな標準となり、オンライン ビジネス オーナーの注目が集まる時期となりつつあります。

ただし、ファストからインスタントへの移行はしばらくの間行われています。

2009 年には早くも、より高速かつ効率的なページ読み込みを追求するため、Chromium チームは最初のリソース ヒントを作成し、後にそのリンクに rel=”prerender” が追加されました。

これには、ユーザーがページに移動する前に後続のページをバックグラウンドでロードする必要があり、遷移が発生したときにレンダリングが高速化されることが保証されるため、パフォーマンスに大きな影響を与えることが予想されました。

ただし、このバージョンのプリレンダリングは十分に効率的であることが証明されず、2017 年に非推奨になりました。

プリレンダリングを非推奨にする意図

今日に遡ると、Google は Speculation Rules API の有望な開発を開始し、完全な事前レンダリングと真にシームレスな Web ブラウジングのロックを解除するためのより洗練されたアプローチを可能にしました。

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

Speculation Rules API は、投機的読み込み戦略を通じて Web ページ読み込みのパフォーマンスを向上させるために Google によって開発された JSON 定義の API です。

投機的な読み込みには、後続のページ ナビゲーションのためのリソースの予測と事前読み込みが含まれ、レンダリング時間が短縮され、ユーザー エクスペリエンスが向上します。 Google は、どのドキュメントをプリフェッチまたはプリレンダリングするかを指定するためのより柔軟で表現力豊かな方法を開発者に提供するために、この API を導入しました。

投機ルール API に関する主な詳細:

  • ドキュメント URL のターゲット:特定のリソース ファイルをターゲットとする従来のプリフェッチ メカニズムとは異なり、Speculation Rules API はドキュメント URL に焦点を当てています。 このため、シングルページ アプリケーション (SPA) ではなく、マルチページ アプリケーション (MPA) に特に適しています。
  • プリレンダリングとプリフェッチ: API は、プリレンダリングとプリフェッチの両方の戦略をサポートします。 プリレンダリングには、コンテンツのフェッチ、レンダリング、および非表示のタブへのロードが含まれ、ユーザーがページに移動したときにほぼ瞬時にアクティブ化できるようになります。 一方、プリフェッチでは、指定されたページ リソース (ドキュメント、画像、スクリプトなど) をダウンロードして保存し、後でユーザーがそれらのページに移動するときの読み込み時間を最適化します。
  • ブラウザのサポート: API は現在、Chrome、Edge、Opera、Chrome Android、Opera Android、WebView Android を含むすべての Chromium ベースのブラウザと互換性があります。 完全な互換性の内訳については、Mozilla のドキュメントを参照してください。

ブラウザの互換性

次のコードを使用して、ブラウザが API をサポートしているかどうかを確認することもできます。

ブラウザサポートのコードスニペット

  • 非推奨の機能の代替: 非推奨の Chrome のみの機能などの古いテクノロジーの代替として機能し、より優れたパフォーマンスとより表現力豊かな構文を提供します。
  • セキュリティへの配慮:クロスサイトのプリフェッチには、ユーザーのプライバシーを保護するための制限があります。 クロスサイト プリフェッチは、ユーザーが宛先サイトに Cookie を設定していない場合にのみ機能し、ユーザー アクティビティの潜在的な追跡を防ぎます。

Web サイトで投機ルール API を使用する理由

Speculation Rules API は、ほぼ瞬時のページ読み込みを可能にし、シームレスなブラウジング エクスペリエンスを実現します。

ページ読み込み時間の改善、ユーザー満足度の向上、潜在的な SEO 上の利点は、開発者がこのテクノロジーを採用する説得力のある理由です。

ページ ナビゲーション間の待ち時間を短縮することで、ユーザーは Web サイトがより流動的で応答性が高いと認識します。 これはサイトのCore Web Vitalsではっきりと確認でき、最大コンテンツフル ペイント (LCP)、累積レイアウト シフト (CLS)、および次のペイントへのインタラクション (INP) が大幅に減少しています。

インスタント ブラウジング エクスペリエンスにより、直帰率が低下し、ユーザー維持率が向上します。これは、オンライン プラットフォームの成功にとって重要な指標です。 したがって、投機ルール API を統合する戦略的価値が強調されます。

投機ルール API はどのように機能しますか?

Google の Speculation Rules API は、特定のリソース ファイルではなくドキュメント URL をターゲットにするように設計されています。 Speculation Rules API では、どのドキュメントをプリフェッチまたはプリレンダリングするかを指定するための、より表現力豊かで構成可能な構文が導入されています。

スクリプト type="speculationrules" 内で JSON 形式で定義された構造を使用すると、開発者はプリレンダリングとプリフェッチの両方のルールを明確にすることができます。 この強化された柔軟性により、投機的な読み込みを微調整できるようになります。

最近、Google は Chrome 121 の Speculation Rules API の新たな機能強化を発表しました。これにより、自動リンク検索のオプションが提供されるようになりました。

リンク検索のコード スニペット

これは次のように行われます。

  • 文書の出典の指定
  • URL または CSS セレクターに基づいてページ上のリンクを選択する
  • 「熱心さ」のレベルを指定します – 熱心 (すぐに)、中程度 (200 ミリ秒のホバー時)、および保守的 (マウスまたはタッチダウン時)

ただし、Speculation Rules API を初めて使用する場合は、まず以下のさまざまな設定をテストすることをお勧めします。

Google の投機ルール API の使用方法

Speculation Rules API を使用すると、開発者は構造化されたアプローチに従ってプリレンダリングおよびプリフェッチのプロセスを最適化できます。

設定

まず、スクリプト type="speculationrules" 要素を作成し、その中の JSON 構造で推測ルールを定義することから始まります。

投機ルールはメインフレームのヘッドまたはボディのどちらかに追加できます。

重要:サブフレーム内の推測ルールは機能しません。事前レンダリングされたページ内の推測ルールは、ユーザーがページ自体に移動した場合にのみ機能します。

推測ルールは静的または動的に含めることができます。

  • 静的なセットアップはページの HTML で行われます(次のアクションの確実性が高い Web サイトに最適です。たとえば、ニュース Web サイトでその日のハイライトを事前にレンダリングしたい場合があります)。
  • 動的なセットアップは JavaScript 経由で行われます(パーソナライズされたユーザー エクスペリエンスが頻繁に使用される Web サイトに適しています)

投機ルール API の動的セットアップ

重要:動的セットアップを選択する場合は、将来の開発や将来利用可能になる可能性のある使用例について、必ずサポート ドキュメントを参照してください。

どの URL を事前レンダリングするかをブラウザーに通知するには、ページに JSON 命令を挿入します。

投機ルール API コード スニペット

同様に、プリフェッチ用に次の JSON 命令を挿入します。

コードスニペットをプリフェッチする

複数の推測ルールをページに追加することができます。その場合は、次のいずれかのレベルでブラウザーに指示します。

  • URL一覧
  • 複数の投機ルール
  • 1 セットの投機ルール内の複数のリスト

プリレンダー/プリフェッチのルートの指定

投機的読み込みの微調整には、プリレンダリングとプリフェッチのルートの指定が含まれます。 開発者は、ページの重要性やユーザー ナビゲーションの可能性に基づいてページを分類することで、投機的な読み込み戦略を最適化できます。

ただし、次のような安全でないと考えられるルートがいくつかあります。

  • サインアウト URL。
  • 言語切り替え URL。
  • 「カートに追加」URL;
  • サーバーが SMS の送信を要求するサインイン フロー URL (たとえば、2 要素認証 (2FA) が必要な場合)。
  • サーバー側の広告コンバージョン追跡を開始する URL。
  • たとえば、毎月の無料記事枠を使用するなどして、ユーザーの使用制限をトリガーする URL。

このようなページをキャッシュから除外するのと同様に、それらのページのプリフェッチとプリレンダリングを避ける理由は、動的変数に関連しています。

これらは、ユーザーのアクションに基づいて値が更新されるコンテンツに依存したページであり、バックグラウンドでプリロードすることにより、ページの古い状態が表示されるリスクが非常に高くなります。

精度とトレードオフ

Barry Pollard がウェビナーの「ページの即時読み込み」で述べたように、次のようになります。

「[プリフェッチとプリレンダリングの使用] 無駄な効率 (正しい予測の割合) を削減し、予測精度 (使用された予測の数) を高めるために何ができるかを理解するバランスが重要です。」


プリフェッチとプリレンダリングのトレードオフ

プリフェッチは、多くの Web ページで複製できる最も安全なアプローチですが、特定のリソースをダウンロードするだけであるため、報酬が最も低くなります。

一方、フルページのプリレンダリングはより高い報酬を提供しますが、次のような可能性があるため、使用は慎重に行う必要があります。

  • ブラウザはバックグラウンドで限られた量のタスクしか実行できないため、ブラウザに負荷がかかります。
  • かなりの帯域幅と CPU リソースを消費するため、低速のネットワークやリソースが限られているデバイスを使用しているユーザーのパフォーマンスが低下する可能性があります。
  • 訪問者がそのページに移動しない場合、リソースの浪費が増加します。

プリレンダリングを適切に設定するには、ユーザーの行動を考慮し、Web サイト全体の一般的なナビゲーションを分析する必要があります。 ヒートマップと Google Analytics のフローチャートを使用すると、重要なルートを特定し、予測読み込み実験を開始できます。

ページが事前レンダリングされているかどうかを確認するには、 PerformanceNavigationTimingのゼロ以外の activityStartエントリを使用します。 これは、カスタム ディメンションを使用して記録できます。

カスタム ディメンションを事前レンダリングする

こうすることで、プリレンダリングと他のタイプのナビゲーションの比率を測定できるようになります。

さらに、投機ルールを最適化し、より高いヒット率とリソースの無駄の削減を達成するには、その後アクセスされない事前レンダリングされたページの数を測定することが重要です。

これを行うには、事前レンダリングが要求されたことを示す推測ルールが挿入されたときに分析イベントを起動します。 次に、これらのイベントの数を実際の事前レンダリング ページ ビューと比較します。

それとも…

NitroPack によるナビゲーション AI を使用した自動ページ プリレンダリングを検討してください

Navigation AI は、NitroPack の AI を活用した Web ブラウジング オプティマイザーで、ユーザーの行動をアクティブに予測および分析し、カスタマー ジャーニー中に全ページを事前レンダリングします。

Navigation AI により、サイト所有者はコードを 1 行も記述することなく、デスクトップとモバイルでインスタント ブラウジング エクスペリエンスを提供できるようになり、顧客エンゲージメントとコンバージョン率が向上します。

注: Navigation AI は別の製品ですが、NitroPack と 100% 互換性があり、サイト所有者にとってのメリットがさらに広がります。

Navigation AI の待機リストに参加して、サイトでインスタント ユーザー エクスペリエンスのロックを解除しましょう →

NitroPack による Navigation AI は、Speculation Rules API に基づいて構築されており、プリレンダリング シナリオで高いヒット率とリソース効率を達成するための自動化されたソリューションを提供します。

ナビゲーション AI の仕組み

データに基づいて AI で強化された初期予測をページ読み込みに適用し、ユーザーの行動を分析することで、Navigation AI は予測を調整し、実際にアクセスされるページを事前レンダリングするよう Speculation Rules API に正確に指示できます。

このページは既に背景に描画されているため、その結果、瞬時にページが読み込まれます。 モバイル デバイスでは、Navigation AI はユーザーがページ上のどこにいるかを識別することに依存しており、ビューポートが小さいため、ユーザーがどこをタップするかを簡単に予測できます。

1,200 の Web サイトに基づいて、ナビゲーション AI はすでに素晴らしい結果を示しています。

  • 結果 #1: Navigation AI を使用した Web ページの読み込み時間は一貫して約 2.86 秒であるのに対し、Navigation AI を使用しない場合は 6.12 秒です。

Navigation AI を使用した場合と使用しない場合のページ読み込み時間

  • 結果 #2: Navigation AI を使用すると、プリレンダリングされたページでは LCP が 85% (3.1 秒から 0.4 秒に) 向上し、CLS が 80% (0.3 秒から 0.06 秒に) 向上しました。 プリフェッチされたページの場合、ナビゲーション AI は LCP を 52% 向上させます (3.1 秒から 1.5 秒)。

Navigation AI によるパフォーマンス メトリクスの向上

  • 結果 #3: Navigation AI を使用すると、Web サイト全体のパフォーマンス指標が大幅に向上します: LCP が 15%、CLS が 8%、TTFB が 26%

ナビゲーション AI が LCP、CLS、TTFB に与える影響

待機リストに参加して Navigation AI にアクセスしてください →

投機ルール API と WordPress

「Instant Page Loading」ウェビナーで、Google のデベロッパー リレーションズ エンジニアである Adam Silverstein は、WordPress コア パフォーマンス チームが新しい Speculation Rules API のより安定した実装に取り​​組んでいることを明らかにしました。


現在、API の機能の小さな部分をエコシステム内のサイト所有者と開発者が利用できるようにして、コアの一部にする前に効率と導入率をテストすることに重点が置かれています。 WordPress ユーザーがこれまでに活用できるものは次のとおりです。

  • Performance Lab プラグインのモジュール
  • Speculation Rules API フロントエンドのみを実装するスタンドアロン プラグイン (保守的な「熱心さ」レベルを適用しますが、開発者は動作を自由に変更できます)

WP 管理ルートはデフォルトで除外されますが、優先するルートを決定するのは WP 開発者次第です。

WordPress Core Performance チームは、エコシステム内のプラグイン内でのより洗練された実装にも取り組んでいます。 これは、開発者がどのルートが最優先でどのルートが禁止であるかを判断する際に行わなければならない重労働の一部を軽減することを目的としています。

投機ルールにどのような改善が加えられるか

現在、推測ルールは同じタブ内のページに限定されていますが、これらの制限を軽減する取り組みが進行中です。

デフォルトでは、プリレンダリングは同じオリジンのページに限定されます。 ただし、Chrome 119 の最近のアップデートでは、同じサイトのクロスオリジン ページのプリレンダリングがサポートされるようになり、HTTP ヘッダーを介したオプトインが必要になります。

将来のバージョンでは、プリレンダリングがクロスオリジン ページに拡張され、新しいタブで使用できるようになる可能性があります。 Speculation Rules API は拡張される予定で、ドキュメント ルールのスコアと構文が導入され、マウス ダウン時のリンクの事前レンダリングなどの柔軟性が向上します。

Chrome で進行中の実験では追加機能が検討されており、サイトはオリジン トライアルに参加して、将来の追加機能をテストし、フィードバックを提供することができます。