HTMLでプリロードとプリフェッチを使用してアセットをロードする方法
序章
ページにアセットを読み込むことは、最適なWebパフォーマンスとシームレスなユーザーエクスペリエンスを実現するための重要な部分です。 通常、実際のアプリは複数のCSS、フォント、JavaScript、および画像ファイルをロードします。 これらのアセットはデフォルトでレンダリングをブロックしているため、読み込みのパフォーマンスが低下します。
このチュートリアルでは、プリロードやプリフェッチなど、リソースヒントと呼ばれる新機能について説明します。 これらのリソースヒントを使用すると、レンダリングのブロックを克服できます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- GoogleChromeをダウンロードしてインストールしました。 このチュートリアルは、GoogleChromeのバージョン86.0.4240.80に基づいて構築されています。
- HTMLを使用してWebサイトを構築する方法シリーズで見つけることができるHTMLの理解。
- JavaScriptの基本的な理解。 このJavaScriptでコーディングする方法シリーズは、これを実現するのに役立ちます。
ステップ1—レンダリングブロッキングを理解する
リソースへのリクエストがレンダリングをブロックしている場合、そのリクエストが終了するまでwindow.onload
イベントがトリガーされないことを意味します。 最新のシングルページアプリでは、CSSファイルやJavaScriptファイル、画像など、ほとんどのアセットがこのイベントに依存して動作を開始します。 つまり、レンダリングブロックリクエストの読み込みが完了するまで、UIの一部は画面上でのレンダリングまたは表示を開始しません。
これが実際に動作することを確認するには、標準の定型HTMLを使用してHTMLファイルを作成します。 これは、選択したコードエディタで実行できます。
index.html
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
頭の中で、<link>
タグを使用して、選択した GoogleFontにアクセスします。 このコードスニペットはRobotoを使用します。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> </head> <body> </body> </html>
<style>
タグを追加します。 CSSを使用して、すべてのp
タグのfont-family
をRobotoに設定します。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> <style> p { font-family: Roboto; } </style> </head> <body> </body> </html>
メタデータとCSSを配置すると、<body>
内にHello
という<p>
を作成できます。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> <style> html { font-family: Roboto; } </style> </head> <body> <p> Hello </p> </body> </html>
レンダリングブロッキングの動作を確認するには、<body>
内に<script>
タグを追加します。 window.onload
を使用して、メッセージ'Loaded'
をconsole.log
するJavaScript関数を作成します。
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> <style> html { font-family: Roboto; } </style> </head> <body> <p> Hello </p> <script> window.onload = function () { console.log('Loaded'); } </script> </body> </html>
コードを配置したら、ChromeでHTMLファイルを開きます。 次に、開発者ツールを開き、ネットワークタブに移動します。 Slow 3G への接続を下げてから、ページをリロードします。
次の画像に示すように、Loaded
メッセージは、CSSファイルがロードされた直後にコンソールに記録されます。
この効果は、より大きなWebサイトを構築およびロードするときにさらに問題になります。 CSSアセットとJavaScriptアセットは、他の多くのアセットと同様に、ロードに長い時間がかかる場合があります。 したがって、CSSスタイルがすぐに表示されない場合があります。 リソースをプリロードすると、この影響を排除し、ロードの遅延を防ぐことができます。
ステップ2—リソースのプリロード
デフォルトのレンダリングブロックを防ぎ、フォントやCSSなどのページリソースがページライフサイクルの早い段階でロードを開始するようにするには、プリロードを実装する必要があります。 rel="preload"
属性値は、アセットをプリロードするために使用されます。 CSS、JS、フォント、画像など、いくつかのファイル形式に適用できます。 プリロードするファイルのタイプによっては、対応するas
属性もrel="preload"
と一緒に含める必要がある場合があります。 CSSの場合、as=
は"style"
と等しく設定する必要があります。 JavaScriptの場合、as=
は"script"
と等しく設定する必要があります。
HTMLファイルに戻り、前の<link>
を変更します。 rel
を"preload"
と等しく設定します。 "style"
と等しいas
属性セットを追加します。
index.html
<head> <link rel="preload" as="style" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> <style> html { font-family: Roboto; } </style> </head>
HTMLファイルをGoogleChromeで開いた状態で、 Developer Tools に戻り、NetworkをSlow3Gに設定したままページを読み込みます。 次の画像に示すように、CSSリクエストが開始する直前にLoaded
ログが表示されます。
ただし、CSSスタイルがテキストに適用されていないことに気付いたかもしれません。 これは、プリロードまたはプリフェッチを使用するとリソースがフェッチされるだけで、適用されないためです。 代わりに、プリロードとプリフェッチはリソースをメモリに保持します。 リソースがいつロードされるかを定義する必要があります。
フォントは、ロードされたらすぐに適用する必要があります。 これを実現するには、onload
属性を<link>
タグに追加します。 onload
を"this.rel = 'stylesheet'"
と等しくなるように設定します。
index.html
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
onload
のrel
属性をstylesheet
に設定すると、ブラウザはリソースを使用するように指示されます。 すでにメモリにダウンロードされているため、再度ダウンロードすることはありません。
onload
ソリューションはJavaScriptに依存しているため、rel
が"stylesheet"
に設定された元の<link>
タグを含む<noscript>
タグを追加します。
index.html
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'> <noscript> <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'> </noscript>
これにより、JavaScriptが無効になっている場合や読み込みに失敗した場合に、フォントが確実に表示されます。
これで、Webページアセットをプリロードする方法がわかりました。 代わりに、リソースをプリフェッチしたい場合があります。
ステップ3—リソースのプリフェッチ
プリフェッチはプリロードと同様に機能します。 違いは、リソースをプリフェッチするときに、ブラウザはリソースの優先度が低いと見なすということです。 これは、リソースまたはアセットが少し遅れて読み込まれることを意味します。 このため、プリフェッチは通常、最初は必要ないが後で使用されるリソースを使用して実装されます。
HTMLページにprefectchingを実装するには、rel
の値を"prefetching"
に変更します。
index.html
<link rel="prefetch" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
CSSのプリフェッチとプリロードは、Webパフォーマンスの向上に役立ちます。 JavaScriptにもプリロードを適用することをお勧めします。 JavaScriptのプリロードは、CSSリソースのプリロードとは異なります。
ステップ4—JavaScriptをプリロードする
JavaScriptリソースのプリロードは別の方法で行われます。 この例は、プリロードに関するこのGoogle Developersの記事から抜粋したもので、次のことを示しています。
index.html
<link rel="preload" href="used-later.js" as="script"> <!-- ... --> <script> var usedLaterScript = document.createElement('script'); usedLaterScript.src = 'used-later.js'; document.body.appendChild(usedLaterScript); </script>
注: Google によって作成および共有され、 Apache 2.0Licenseの下でライセンスされた作品から複製されたコードスニペット。
ここでの重要な手順は、ファイルのsrc
属性を設定し、それをDOMに挿入することです。
結論
プリロードとプリフェッチを使用すると、リソースのロード方法を制御でき、Webパフォーマンスを向上させることができます。 このチュートリアルでは、CSS、フォント、JavaScriptなどのリソースをプリロードおよびプリフェッチするためのリソースヒントを実装しました。 これは、より高速なプログレッシブWebアプリを作成するのに役立ちます。
Angularを使用してプログレッシブWebアプリを作成するには、このAngularを使用してプログレッシブWebアプリを構築する方法チュートリアルでそれを実現できます。 バニラJavaScriptを好む場合は、このバニラJavaScriptでPWAを構築する方法チュートリアルが役立ちます。