プリフェッチの 2 つの方法: <link> タグと HTTP ヘッダー

この Codelab では、<link rel="prefetch"> と HTTP Link ヘッダーの 2 つの方法でプリフェッチを実装します。

サンプルアプリは、ショップのベストセラー T シャツに特別な割引を提供するプロモーション用ランディング ページがあるウェブサイトです。ランディング ページは 1 つの商品にリンクされているため、ユーザーの多くが商品の詳細ページに移動すると想定できます。そのため、商品ページはランディング ページでプリフェッチするのに適しています。

パフォーマンスの測定

まず、ベースライン パフォーマンスを確立します。

  1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  2. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  3. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  4. [ネットワーク] タブをクリックします。

  5. [スロットリング] プルダウン リストで [Fast 3G] を選択して、低速接続タイプをシミュレートします。

  6. 商品ページを読み込むには、サンプルアプリで [今すぐ購入] をクリックします。

product-details.html ページの読み込みに約 600 ミリ秒かかります。

product-details.html の読み込み時間を示すネットワーク パネル

ナビゲーションを改善するには、ランディング ページに prefetch タグを挿入して product-details.html ページをプリフェッチします。

  • views/index.html ファイルの先頭に次の <link> 要素を追加します。
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

as 属性は省略可能ですが、推奨されます。ブラウザが適切なヘッダーを設定し、リソースがすでにキャッシュに保存されているかどうかを判断するのに役立ちます。この属性の値の例: documentscriptstylefontimageその他

プリフェッチが機能していることを確認するには:

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。

  4. [スロットリング] プルダウン リストで [Fast 3G] を選択して、低速接続タイプをシミュレートします。

  5. [Disable cache] チェックボックスをオフにします。

  6. アプリを再読み込みします。

これで、ランディング ページの読み込み時に product-details.html ページも読み込まれますが、優先度は最も低くなります。

プリフェッチされた product-details.html を示すネットワーク パネル。

ページは 5 分間 HTTP キャッシュに保持され、その後はドキュメントの通常の Cache-Control ルールが適用されます。この場合、product-details.html には cache-control ヘッダーがあり、値は public, max-age=0 です。つまり、ページは合計 5 分間保持されます。

パフォーマンスを再評価する

  1. アプリを再読み込みします。
  2. 商品ページを読み込むには、サンプルアプリで [今すぐ購入] をクリックします。

[ネットワーク] パネルを確認します。最初のネットワーク トレースとの違いは次の 2 つです。

  • [サイズ] 列に「プリフェッチ キャッシュ」と表示されている場合、このリソースはネットワークではなくブラウザのキャッシュから取得されたことを意味します。
  • [時間] 列に、ドキュメントの読み込み時間が約 10 ミリ秒に短縮されたことが示されています。

これは、約 600 ミリ秒かかっていた以前のバージョンと比較して約 98% の短縮です。

プリフェッチ キャッシュから取得された product-details.html を示すネットワーク パネル。

追加のクレジット: プログレッシブ エンハンスメントとして prefetch を使用する

プリフェッチは、高速接続でブラウジングしているユーザー向けに、段階的な拡張機能として実装するのが最適です。Network Information API を使用してネットワークの状態を確認し、その結果に基づいてプリフェッチ タグを動的に挿入できます。これにより、低速または高額なデータプランをご利用のユーザーのデータ使用量を最小限に抑え、費用を節約できます。

適応プリフェッチを実装するには、まず views/index.html から <link rel="prefetch"> タグを削除します。

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

次に、public/script.js に次のコードを追加して、ユーザーが高速接続を使用しているときに prefetch タグを動的に挿入する関数を宣言します。

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

この関数は次のように機能します。

  • Network Information APIeffectiveType プロパティをチェックし、ユーザーが 4G(またはそれ以上)の接続を使用しているかどうかを判断します。
  • この条件が満たされると、ヒントのタイプとして prefetch を指定して <link> タグを生成し、プリフェッチされる URL を href 属性で渡し、リソースが HTML であることを as 属性で示します。document
  • 最後に、ページの head にスクリプトを動的に挿入します。

次に、views/index.html の終了タグ </body> の直前に script.js を追加します。

<body>
      ...
      <script src="/script.js"></script>
</body>

ページの最後に script.js をリクエストすると、ページが解析されて読み込まれた後に読み込まれて実行されます。

プリフェッチが現在のページの重要なリソースと競合しないようにするには、次のコード スニペットを追加して、window.load イベントで injectLinkPrefetchIn4g() を呼び出します。

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

ランディング ページで、高速接続の場合のみ product-details.html がプリフェッチされるようになりました。確認する方法は次のとおりです。

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. [スロットリング] プルダウン リストで、[オンライン] を選択します。
  5. アプリを再読み込みします。

[ネットワーク] パネルに product-details.html が表示されます。

プリフェッチされた product-details.html を示すネットワーク パネル。

接続速度が遅い場合に商品ページがプリフェッチされていないことを確認するには:

  1. [スロットリング] プルダウン リストで [Slow 3G] を選択します。
  2. アプリを再読み込みします。

[ネットワーク] パネルには、product-details.html のないランディング ページのリソースのみを含める必要があります。

product-details.html がプリフェッチされていないことを示すネットワーク パネル。

HTTP Link ヘッダーを使用すると、link タグと同じタイプのリソースをプリフェッチできます。どちらを使用するかは、パフォーマンスの差がほとんどないため、主に好みによって決まります。この場合、商品ページのメイン CSS をプリフェッチして、レンダリングをさらに改善します。

ランディング ページのサーバー レスポンスに、style-product.css の HTTP Link ヘッダーを追加します。

  1. server.js ファイルを開き、ルート URL /get() ハンドラを探します。
  2. ハンドラの先頭に次の行を追加します。
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. アプリを再読み込みします。

ランディング ページの読み込み後に、style-product.css が最も低い優先度でプリフェッチされるようになりました。

プリフェッチされた style-product.css を示すネットワーク パネル。

商品ページに移動するには、[今すぐ購入] をクリックします。[ネットワーク] パネルを確認します。

プリフェッチ キャッシュから取得された style-product.css を示すネットワーク パネル。

style-product.css ファイルは「プリフェッチ キャッシュ」から取得され、読み込みに 12 ms しかかかりません。