予測プリフェッチと、Guess.js による実装の詳細をご確認ください。
Google I/O 2019 の「予測プリフェッチによるウェブ ナビゲーションの高速化」セッションでは、まず、コード分割によるウェブアプリの最適化と、後続のページ ナビゲーションがパフォーマンスに与える影響についてお話ししました。セッションの後半では、Guess.js を使用して予測プリフェッチをセットアップし、ナビゲーション速度を改善する方法についてご説明しました。
コード分割によるウェブアプリの高速化
ウェブアプリは低速で、JavaScript は配布されているリソースの中で最も高価なものの 1 つです。ウェブアプリの読み込みが遅いと、ユーザーの不満が募り、コンバージョンが減少する可能性があります。
遅延読み込みは、ネットワーク経由で転送する JavaScript のバイト数を減らすための効率的な手法です。JavaScript の遅延読み込みには、次のようなさまざまな方法があります。
- コンポーネント レベルのコード分割
- ルートレベルのコード分割
コンポーネント レベルのコード分割により、個々のコンポーネントを別々の JavaScript チャンクに移動できます。特定のイベントで、関連するスクリプトを読み込んでコンポーネントをレンダリングできます。
ただし、ルートレベルのコード分割では、ルート全体を独立したチャンクに移動できます。ユーザーは、あるルートから別のルートに移行する際に、関連する JavaScript をダウンロードし、リクエストされたページをブートストラップする必要があります。特に低速なネットワークでは、これらのオペレーションが大幅に遅延につながる可能性があります。
JavaScript のプリフェッチ
プリフェッチを使用すると、ブラウザはユーザーがすぐに必要とする可能性のあるリソースをダウンロードしてキャッシュできます。通常は <link rel="prefetch"> を使用しますが、陥りやすい落とし穴が 2 つあります。
- プリフェッチが多すぎるリソース（オーバーフェッチ）は、大量のデータを消費します。
- ユーザーが必要とする一部のリソースがプリフェッチされないこともあります。
予測プリフェッチは、ユーザーのナビゲーション パターンのレポートを使用してプリフェッチするアセットを決定することで、こうした問題を解決します。
Guess.js による予測プリフェッチ
Guess.js は、予測プリフェッチ機能を提供する JavaScript ライブラリです。Guess.js は、Google アナリティクスなどの分析プロバイダから提供されるレポートを使用して予測モデルを構築します。このモデルを使って、ユーザーが必要としていると思われるものだけをスマートにプリフェッチできます。
Guess.js は、Angular、Next.js、Nuxt.js、Gatsby と統合されています。アプリケーションで使用するには、以下の行を webpack の設定に追加して Google アナリティクスのビュー ID を指定します。
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Google アナリティクスを使用していない場合は、reportProvider を指定して、任意のサービスからデータをダウンロードすることができます。
フレームワークとのインテグレーション
Guess.js をお気に入りのフレームワークと統合する方法の詳細については、以下のリソースをご覧ください。
Angular との統合に関する簡単なチュートリアルについては、こちらの動画をご覧ください。
Guess.js の仕組み
Guess.js で予測プリフェッチを実装する方法を以下に示します。
- まず、任意の分析プロバイダからユーザーのナビゲーション パターンのデータを抽出します。
- 次に、レポートの URL を webpack によって生成された JavaScript チャンクにマッピングします。
- 抽出されたデータに基づき、ユーザーが任意のページから移動する可能性の高いページについて、シンプルな予測モデルを作成します。
- JavaScript チャンクごとにモデルを呼び出して、次に必要になりそうな他のチャンクを予測します。
- 各チャンクにプリフェッチ命令を追加します。
Guess.js が完了すると、各チャンクには次のようなプリフェッチ命令が含まれます。
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
この Guess.js で生成されたコードは、チャンク a.js を確率 0.2 でプリフェッチし、チャンク b.js を確率 0.8 でプリフェッチするようブラウザに指示しています。
ブラウザでコードを実行すると、Guess.js はユーザーの接続速度をチェックします。十分な場合、Guess.js はページのヘッダーに 2 つの <link rel="prefetch"> タグ（チャンクごとに 1 つずつ）を挿入します。ユーザーが高速ネットワークに接続している場合、Guess.js は両方のチャンクをプリフェッチします。ユーザーのネットワーク接続が不安定な場合、Guess.js はチャンク b.js が必要になる可能性が高いため、そのチャンクのみをプリフェッチします。
詳細
Guess.js について詳しくは、以下のリソースをご覧ください。