このページは Cloud Translation API によって翻訳されました。

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

Demián Renzulli

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

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

パフォーマンスの測定

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

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
[ネットワーク] タブをクリックします。
[スロットリング] プルダウンリストで [Fast 3G] を選択して、低速接続タイプをシミュレートします。
商品ページを読み込むには、サンプルアプリで [今すぐ購入] をクリックします。

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、その他

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

サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して DevTools を開きます。
[ネットワーク] タブをクリックします。
[スロットリング] プルダウンリストで [Fast 3G] を選択して、低速接続タイプをシミュレートします。
[キャッシュを無効にする] チェックボックスをオフにします。
アプリを再読み込みします。

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

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

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

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

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

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

[サイズ] 列に「プリフェッチキャッシュ」と表示されている場合、このリソースはネットワークではなくブラウザのキャッシュから取得されたことを意味します。
[Time] 列を見ると、ドキュメントの読み込みにかかる時間が約 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 API の effectiveType プロパティをチェックして、ユーザーが 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 がプリフェッチされるようになりました。確認する方法は次のとおりです。

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

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

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

接続が遅いときに商品ページがプリフェッチされないようにするため:

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

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

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

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

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

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

server.js ファイルを開き、ルート URL / の get() ハンドラを探します。
ハンドラの先頭に次の行を追加します。

app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});

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

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

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

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

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

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

注: HTTP Link ヘッダーを使用する場合は、クライアントヒントで利用可能な情報に基づいて、ネットワークの状態に応じてプリフェッチするかどうかを決定できます。