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

Demián Renzulli
Demián Renzulli
X GitHub

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

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

パフォーマンスの測定

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

  1. `Ctrl+Shift+J`（Mac の場合は `Command+Option+J`）を押して、デベロッパー ツールを開きます。

  2. [ネットワーク] タブをクリックします。

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

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

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

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

<link rel="prefetch"> で商品ページをプリフェッチする

ナビゲーションを改善するには、ランディング ページに 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 属性は省略可能ですが、推奨されています。この属性は、ブラウザが適切なヘッダーを設定し、リソースがすでにキャッシュに保存されているかどうかを判断するのに役立ちます。この属性の値の例としては、document、script、style、font、image、その他があります。

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

  1. `Ctrl+Shift+J`（Mac の場合は `Command+Option+J`）を押して、デベロッパー ツールを開きます。

  2. [ネットワーク] タブをクリックします。

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

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

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

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

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

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

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

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

[Network]（ネットワーク）パネルをご覧ください。最初のネットワーク トレースと比較して、次の 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);
    }
}

この関数は次のように動作します。

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

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

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

ページの最後に script.js をリクエストすると、ページが解析されて読み込まれた後に、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. `Ctrl+Shift+J`（Mac の場合は `Command+Option+J`）を押して、デベロッパー ツールを開きます。
  2. [ネットワーク] タブをクリックします。
  3. [スロットリング] プルダウン リストで、[オンライン] を選択します。
  4. アプリを再読み込みします。

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

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

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

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

[ネットワーク] パネルには、product-details.html を含まないランディング ページのリソースのみが表示されるはずです。

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

HTTP Link ヘッダーを使用して商品ページのスタイルシートをプリフェッチする

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. `Ctrl+Shift+J`（Mac の場合は `Command+Option+J`）を押して、デベロッパー ツールを開きます。
  2. [ネットワーク] タブをクリックします。
  3. アプリを再読み込みします。

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

ネットワーク パネルに style-product.css がプリフェッチされたことが表示されている。

[今すぐ購入] をクリックして、プロダクト ページに移動します。[ネットワーク] パネルを確認します。

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

style-product.css ファイルは「プリフェッチ キャッシュ」から取得され、読み込みにかかった時間はわずか 12 ミリ秒でした。