Web ページを瞬時に読み込む方法 (専門家によるテクニックとツール)

公開: 2024-02-07

速い。 もっと早く。 インスタント。

2024 年に足を踏み入れると、画期的な時代が目前に迫っています。サイト訪問者は、ページの即時読み込みが新たな標準になるという大きな変化を予期できます。

Web ブラウジングの進化を探求し、サイト訪問者にインスタント エクスペリエンスを提供する方法を拡張する私たちに参加してください。

ページを即座にロードするとはどういう意味ですか?

ページの即時読み込みとは、ユーザーのリクエストに応じて Web ページを迅速かつシームレスに表示することを指します。 簡単に言えば、サイト訪問者が Web サイトからページを読み込む際の読み込み時間を 0 秒に近づけることです。

瞬時のページ読み込みを実現するには、ファイル サイズの最小化、ブラウザー キャッシュの活用、コンテンツ配信ネットワーク (CDN) の採​​用など、さまざまなバックエンドおよびフロントエンド リソースの最適化が必要です。

最適化ツールボックスに追加できる最新のテクニックについて学びましょう。

瞬時のページ読み込みが重要な理由

目標は、情報への迅速かつ応答性の高いアクセスを提供することでユーザー エクスペリエンスを向上させることです。これは、Web サイトでのユーザー エンゲージメントと満足度を維持するために重要です。

NitroPack による最近のユーザー調査では、サイト訪問者は 2.75 秒でページを放棄し、後続のページが 3 秒以内に読み込まれると 60% 多くのページを訪問することが明らかになりました。

カスタマージャーニーごとのページビュー数

次をお読みください:コア Web バイタルとユーザー エクスペリエンスの向上(Google および NitroPack ウェビナー)

インスタント エクスペリエンスを提供することは、実際のユーザーが Web サイトとどのようにやり取りするかにもプラスの影響を与え、特に Core Web Vitals や Largest Contentful Paint の合格につながります。

最も困難なパフォーマンス メトリクスとして知られる LCP は、最適化が複雑な側面を持ち、幸いにもインスタント ローディング技術の影響を大きく受けます。

Chrome UX レポート

現在の Web ブラウジングの課題

ネットワーク エンジニアは World Wide Web の固有の弱点を補うために最善を尽くしていますが、モバイル ユーザーの 53% は 3 秒以内の迅速なページ読み込みを期待しています。

このギャップを埋めるために、サイト所有者は今日、待ち時間を短縮し、競争力を維持するために次のような無数の戦略を使用しています。

  • Web パフォーマンス予算の設定
  • 手動および自動のページ読み込みの最適化
  • 画像、メディア、コードの圧縮
  • 現実世界のパフォーマンス (Core Web Vitals) の最適化
  • ユーザー行動分析、カスタマージャーニーの最適化など。

ただし、サイト所有者は社内リソースのみに依存する必要はありません。

Google Chrome などのブラウザや NitroPack などの最適化ツールは、とらえどころのない「インスタント エクスペリエンス」を目指して、読み込み時間を短縮する方法をますます見つけています。

初の AI を活用したオプティマイザーである NitroPack の Navigation AI の待機リストに参加して、自動化されたインスタント エクスペリエンスのロックを解除します →

手動によるインスタントページ読み込みテクニック

ブラウザの機能とリソースのヒントを活用する

インスタント ブラウジング エクスペリエンスを回避する 1 つの方法は、将来の高速ナビゲーションのために Web サイトを最適化することです。

未来のナビゲーション
Web サイトにアクセスした後の Web ページの読み込み。

link rel=prefetchなどのリソース ヒントは、Web ページのレンダリングにおける優先順位が低く、実装が簡単な API です。 これは Web サイトの HTML に追加され、ブラウザーによってかなり十分にサポートされています (Safari は遅れています)。

Barry Pollard 自身によって紹介された、Chromium での最近のエキサイティングな開発は、Speculation Rules API です。

Speculation Rules API は、Web ページ全体をプリフェッチまたはプリレンダリングするための、より適切に仕様化された新しい API です。 これは JSON ベースの API で、事前にレンダリングされたリンクや、より高度な使用例を指定できます。

Speculation Rules API を使用すると、ページの初期読み込み時間が 2.5 秒より大幅に短縮され、最初の数ミリ秒に近づくことが期待できます。 これは、API を利用して、ブラウザがバックグラウンドで実行するプリレンダリングまたはプリフェッチ用の Web ページへの URL のリストを指定することで可能になります。

Speculation Rules API による LCP スコアの向上

2024 年 1 月末の時点で、Speculation Rules API にはまったく新しい機能強化が加えられ、基本的に URL をリストではなくドキュメントに追加することで URL をより詳細に制御できるようになりました。 これにより、ページおよびページ上の要素に含まれる URL がブラウザーによって実行されるトリガーと優先順位を指定できます。 次に、「熱心さ」のレベルを指定できます。これは基本的に、ユーザーがそれらのリンクをクリックするという確信度を表します。

熱意のレベル

 

WordPress でのインスタントページ読み込みのロックを解除する

Adam Silverstein 氏は、WordPress パフォーマンス チームが新しい Speculation Rules API のより安定した実装に取り​​組んでいることを明らかにしました。

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

  • Performance Lab プラグインのモジュール

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

  • WP 管理ルートはデフォルトで除外されますが、回避または優先するルートを決定するのは WP 開発者次第です (つまり、ショッピング カートの事前レンダリングとプリフェッチは避けますが、明らかな将来のナビゲーションを優先します)。

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

あらゆる Web サイトのページを瞬時に自動的にロードする方法

NitroPack によるナビゲーション AI の導入 (ベータ版)

ナビゲーション AI は NitroPack の最新製品です。 これは AI を活用した Web ブラウジング オプティマイザーで、ユーザーの行動をアクティブに予測および分析し、カスタマー ジャーニー中にページ全体を事前レンダリングします。 Navigation AI により、サイト所有者はデスクトップとモバイルの両方でインスタント ブラウジング エクスペリエンスを提供できるようになり、顧客エンゲージメントとコンバージョン率が向上します。

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

Navigation AI の待機リストに参加して、サイトを即時のユーザー エクスペリエンスに向けて準備しましょう →


ナビゲーション AI はどのように機能しますか?

NitroPack による Navigation AI は、Speculation Rules API に基づいて構築されており、事前レンダリングされたページと事前レンダリングされていないページの間で高報酬かつ低リスクのバランスを取るための自動ソリューションを提供します。 これは無駄のない JavaScript スニペットによって実装されており、ブラウザーで動作するため、プラットフォームに完全に依存しません。

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

ナビゲーション AI は、プロセス全体を 2 つのフェーズに分割することで、この複雑な方程式を解くことができます。

  • 第 1 フェーズ: (ブラウザーに負荷をかけないように) データをまだ投機ルール API に渡さずに、データに基づいて AI で強化されたページ読み込みの初期予測を適用します。

  • 第 2 フェーズ:ユーザーの行動を分析し、予測を調整し、次のアクションが判明したら、Speculation Rules API にページを事前レンダリング (またはプリフェッチ) するよう指示します。

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

ナビゲーション AI がこれほど強力なのはなぜですか? (+データ)

Navigation AI は、次の 3 つのカスタム指標に基づいて成功を測定します。

  • 予測精度:すべてのユーザー インタラクションのうち、ナビゲーション AI が正常に予測した回数

  • 無駄な精度:すべてのユーザー インタラクションのうち、ナビゲーション AI が予測できず、ブラウザーに負担をかけたものが何件ありますか

  • ブラウザ優先率:ページが実際に適切にプリレンダリング/プリフェッチされているかどうかを示します (そうでない場合は、ナビゲーション AI が同様の状況に適応できるように、ブラウザの効率またはユーザーのネットワーク強度をチェックします)

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

ナビゲーション AI の現実世界の結果

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

Nav AI を使用した場合と Nav AI を使用しない場合の結果

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

Nav AI による Core Web Vitals の改善

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

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

初期ページの読み込み時間の短縮、安定したレイアウト、インタラクションへの機敏な応答性により、サイト所有者はユーザーを満足させて長く関与させ、最終的にはより高いコンバージョン率を実現できます。

インスタントロード手法: 精度とトレードオフ

どのページをプリレンダリング/プリフェッチするかを適切なバランスで決定することは、ユーザーの行動をどの程度理解するかに関係します。 手動アプローチでは、「中リスク、中報酬」のシナリオを達成するために、過去のユーザー エクスペリエンスとデータ分析を慎重に検討する必要があります。

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

 理想的には、ヒートマップをさらに強化して、ユーザーが Web ページ上で何をしているか、つまりどこをクリックするか、どこまでスクロールするか、何を無視する傾向があるかを調査したいと考えます。

ヒートマップ

ブラウザーが処理できるプリレンダリング/プリフェッチ リクエストの量には制限があるため、サイト所有者と開発者は次のことを行う必要があります。

  • ロゴリンク、ログアウトしたページ、購入成功ページ、カートに追加ページなどのルートを除外します。

  • メインの行動喚起（CTA）ボタン、詳細ページ、論理的なその後のナビゲーションなどのルートに優先順位を付けます。

あるいは、データ処理と予測機能を Navigation AI などの自動化ツールに委任することもできます。


よくある質問

バックグラウンドでのページのプリレンダリング/プリフェッチは分析に表示されますか?

ユーザーが問題のページにアクセスしなかった場合、Google Analytics などの分析にはカウントされません。 Speculation Rules API はまだ初期段階にあり、使用する分析プロバイダーによっては、何らかの方法でこのデータを含めることを決定する可能性があることに留意してください。 現時点では、プリレンダリング/プリフェッチされたページは、ユーザーが実際にそのページにアクセスした場合にのみ Chrome ユーザー エクスペリエンス レポート (CrUX) にカウントされます。


ブラウザーは事前レンダリングされたページのキャッシュされたバージョンをどれくらいの期間保持しますか?

開発者は期間を制御できません。 ただし、Chrome は、ユーザーが選択しなかった事前レンダリングされたページのキャッシュされたバージョンをすべて HTTP キャッシュに保存します。 こうすることで、ユーザーが後で戻ってくることにした場合でも、読み込みが速くなります。

ユーザーのアクションをレビューするナビゲーション AI の AI の重さはどれくらいですか?

AI は NitroPack サーバーによって完全に処理され、ブラウザーでは実行されません。 Navigation AI JavaScript は、AI モデル全体を実行するのではなく、NitroPack サーバーからの既製の結果のみを使用します。


インスタントロード技術は、ユーザーが最初にアクセスするページ (ホームページなど) に対して機能しますか、それともその後の閲覧に対してのみ機能しますか?

事前レンダリング/プリフェッチ技術は、Web サイトに初めてアクセスする場合には適用されません。 ただし、Chrome の URL バーは、頻繁に検索する URL を認識し、事前に読み込むことで、プリレンダリングを使用し始めています。

たとえば、「www.goo」と入力すると、おそらく www.google.com ページがバックグラウンドで読み込まれます (もちろん、個々のユーザーの検索アクティビティによって異なります)。

 現在、Google 検索エンジン バーにプリレンダリングを組み込む方法についても調査が行われています。