この 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 ミリ秒かかります。
<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] を選択して、低速接続タイプをシミュレートします。
[Disable cache] チェックボックスをオフにします。
アプリを再読み込みします。
これで、ランディング ページの読み込み時に product-details.html
ページも読み込まれますが、優先度は最も低くなります。
ページは 5 分間 HTTP キャッシュに保持され、その後はドキュメントの通常の Cache-Control
ルールが適用されます。この場合、product-details.html
には cache-control
ヘッダーがあり、値は public, max-age=0
です。つまり、ページは合計 5 分間保持されます。
パフォーマンスを再評価する
- アプリを再読み込みします。
- 商品ページを読み込むには、サンプルアプリで [今すぐ購入] をクリックします。
[ネットワーク] パネルを確認します。最初のネットワーク トレースとの違いは次の 2 つです。
- [サイズ] 列に「プリフェッチ キャッシュ」と表示されている場合、このリソースはネットワークではなくブラウザのキャッシュから取得されたことを意味します。
- [時間] 列に、ドキュメントの読み込み時間が約 10 ミリ秒に短縮されたことが示されています。
これは、約 600 ミリ秒かかっていた以前のバージョンと比較して約 98% の短縮です。
追加のクレジット: プログレッシブ エンハンスメントとして 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
が表示されます。
接続速度が遅い場合に商品ページがプリフェッチされていないことを確認するには:
- [スロットリング] プルダウン リストで [Slow 3G] を選択します。
- アプリを再読み込みします。
[ネットワーク] パネルには、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
ファイルは「プリフェッチ キャッシュ」から取得され、読み込みに 12 ms しかかかりません。