【HTML】rel="preload"とは？使い方と効果をわかりやすく解説！

Webページの表示速度を向上させるためのテクニックの一つにrel="preload"があります。

これは、ページの読み込み時に優先的に取得したいリソース（画像・フォント・スクリプトなど）を事前に読み込むための仕組みです。

この記事ではrel="preload"について、以下の内容を図やサンプルコードを用いてわかりやすく解説します。

  • rel="preload"とは
  • rel="preload"の基本的な使い方
  • rel="preload"のas属性
  • rel="preload"を使うメリット
  • rel="preload"を使う際の注意点
  • rel="preload"のブラウザ対応状況
  • preloadとprefetchの違い

rel="preload"とは

rel="preload"は、HTMLの<link>要素で使用される属性です。通常、ブラウザはHTMLの解析を進めながら必要なリソースを順次取得しますが、rel="preload"を指定すると、ブラウザが「このリソースは重要だから、すぐに取得しておこう！」と認識し、優先的に読み込みを開始します。

例えば、Webページの「最初に表示される画像」や「重要なフォント」などをあらかじめ取得しておけば、ページの表示速度が向上し、ユーザー体験の向上につながります。

preloadは「プリロード」と読み、その名の通り、プリ（先行）+ロード（読み込み）という意味になります。

rel="preload"の基本的な使い方

以下のコードでは、ヒーロー画像（hero.jpg）をpreloadで先読みすることで、表示の遅延を防いでいます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Preload Image Example</title>
    <!-- 画像を事前に読み込む -->
    <link rel="preload" href="hero.jpg" as="image" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>画像を `preload` で先読み</h1>
    <!-- 事前に読み込んだ画像を表示 -->
    <img src="hero.jpg" alt="Hero Image" class="hero" />
  </body>
</html>

各属性の説明

属性説明
rel="preload"プリロードを指定
href="hero.jpg"読み込むリソースのURLを指定
as="image"リソースの種類を指定（例: image, font, script, style など）

このように設定すると、<img>タグでhero.jpgを表示する際、すでにpreload済みなので素早く表示されます。

では実際に、rel="preload"を指定していない場合と指定した場合でhero.jpgの読み込みタイミングが変わっているかを確認してみましょう。

rel="preload"を指定していない場合

rel="preload"を指定していない場合、通常、ブラウザは以下のプロセスが完了するまでhero.jpgのダウンロードを開始しません。

  • HTMLを解析して<link rel="stylesheet">を検出
  • CSS(style.css)をダウンロード
  • ダウンロードしたstyles.cssをパース
  • .imageのセレクタが適用されるimg要素を特定
  • hero.jpgのダウンロード開始

Google ChromeのDevTools（デベロッパーツール）の[Network]タブで確かめてみましょう。

rel=preloadを指定していない場合

上記のように、styles.cssを読み込んだ後にhero.jpgのダウンロードが開始されているのが分かります。

rel="preload"を指定した場合

rel="preload"を指定すると、HTMLの解析時点でhero.jpgのダウンロードが始まります。同じようにDevToolsの[Network]タブで確かめてみましょう。

rel=preloadを指定した場合

上記のように、hero.jpgがstyles.cssの前にダウンロードされているのが分かります。

rel="preload"のas属性

preloadを適用できるリソースは画像だけではありません。as属性を適切に指定することで、さまざまなリソースを事前読み込みできます。

リソースの種類asの値用途の例
画像as="image"画像ファイル
CSSas="style"メインのスタイルシート
JavaScriptas="script"重要なスクリプト（非モジュール）
フォントas="font"Webフォント（crossorigin 必須）
メディアas="video" / as="audio"動画や音声ファイル
Fetchas="fetch"APIリクエスト（例: JSONデータ）

補足

なお、Webフォントをpreloadする際は、以下の様にcrossoriginを付けないと適切に読み込めない場合があります。

<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

rel="preload"を使うメリット

rel="preload"を使うメリットを以下に示します。

  • ページの表示速度を向上
    • ユーザーがページを開いたときに、必要なリソースをすぐに表示できる。
  • レンダリングブロックを回避
    • 例えば、Webフォントをpreloadすれば、フォントが表示されるまでの遅延を防ぐ。
  • 重要なリソースを優先的に読み込む
    • 通常の読み込み順序に関係なく、特定のリソースを事前にロードできる。

rel="preload"を使う際の注意点

rel="preload"を使う際の注意点を以下に示します。

  • as属性の指定が必須
    • as属性を適切に指定しないと、リソースの優先度が正しく設定されません。例えば、フォントの場合はas="font"、スクリプトの場合はas="script"を設定する必要があります。
  • 不要なリソースをプリロードしない
    • preloadで指定したリソースは優先度が上がるため、多用すると逆にページのパフォーマンスを悪化させる可能性があります。本当に必要なリソースのみプリロードしましょう。また、preloadしたリソースが実際に使用されないと無駄なダウンロードになります。
  • キャッシュの影響を考慮する
    • すでにキャッシュされているリソースをpreloadしても、あまり効果がありません。preloadの対象は「キャッシュにないが、すぐに必要なリソース」に限定するのがベストです。

rel="preload"のブラウザ対応状況

rel="preload"は多くの最新ブラウザでサポートされていますが、一部の古いブラウザでは対応していません。

ブラウザ対応状況
Chrome✅対応済み
Firefox✅対応済み
Edge✅対応済み
Safari✅対応済み
IE11❌未対応

最新の対応状況はCan I Useで確認できます。

preloadとprefetchの違い

preloadは「すぐに使うリソース」を事前に読み込む仕組みです。一方で、prefetchは「次のページなどで使うかもしれないリソース」を事前に読み込むための仕組みです。

属性目的
rel="preload"現在のページですぐに使うリソースを先読み
rel="prefetch"次のページなどで使う可能性のあるリソースを先読み

本記事のまとめ

この記事ではrel="preload"について、以下の内容を説明しました。

  • rel="preload"とは
  • rel="preload"の基本的な使い方
  • rel="preload"のas属性
  • rel="preload"を使うメリット
  • rel="preload"を使う際の注意点
  • rel="preload"のブラウザ対応状況
  • preloadとprefetchの違い

お読み頂きありがとうございました。

スポンサーリンク