HTMLでプリロードとプリフェッチを使用してアセットをロードする方法

投稿日: 2022-04-20 2022-04-20
タグ: 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ファイルがロードされた直後にコンソールに記録されます。

Load without preload

この効果は、より大きな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ログが表示されます。

Load using preload

ただし、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

getdocs

13036