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]タブで確かめてみましょう。
上記のように、styles.cssを読み込んだ後にhero.jpgのダウンロードが開始されているのが分かります。
rel="preload"を指定した場合
rel="preload"を指定すると、HTMLの解析時点でhero.jpgのダウンロードが始まります。同じようにDevToolsの[Network]タブで確かめてみましょう。
上記のように、hero.jpgがstyles.cssの前にダウンロードされているのが分かります。
rel="preload"のas属性
preloadを適用できるリソースは画像だけではありません。as属性を適切に指定することで、さまざまなリソースを事前読み込みできます。
| リソースの種類 | asの値 | 用途の例 |
| 画像 | as="image" | 画像ファイル |
| CSS | as="style" | メインのスタイルシート |
| JavaScript | as="script" | 重要なスクリプト（非モジュール） |
| フォント | as="font" | Webフォント（crossorigin 必須） |
| メディア | as="video" / as="audio" | 動画や音声ファイル |
| Fetch | as="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すれば、フォントが表示されるまでの遅延を防ぐ。
- 例えば、Webフォントを
- 重要なリソースを優先的に読み込む
- 通常の読み込み順序に関係なく、特定のリソースを事前にロードできる。
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の違い
お読み頂きありがとうございました。