rel="preload"とは？仕組みをわかりやすく解説！記述方法や注意点も

2025年10月2日

ここではrel="preload"の基本的な仕組みから、利用時の目的などわかりやすく解説していきます。

rel="preload"とは？

rel="preload"は、HTMLの<link>要素で使用される属性で、ブラウザに対して「このリソースを優先的に事前読み込みしてください」という指示を出すものです。

rel="preload"は特に、Core Web Vitalsの指標でもあるLCPを改善させるために役立ち、ページの表示速度を向上させるための重要なパフォーマンス最適化技術の一つです。

通常、Webページはhead、bodyの順番に読み込まれていきますが、rel="preload"を使用することで、LCPで優先させたいコンテンツファイルを先に読み込むことができます。

LCPについては「LCPとは」の記事をご覧ください。

rel="preload"の仕組み

通常、Webページはhead、bodyの順番に読み込まれていくという説明をしましたが更に図を用いて詳しく見ていきましょう。

下記の画像は、読み込みのタイムラインのイメージですがhead要素が読み込まれた後に、body要素が読み込まれます。

LCPの観点から見ると、head読み込みが終わった後にLCPのコンテンツの読み込みが始まり、LCPの読み込みが完了と言う流れになります。

これをrel="preload"を使うことで下記のような読み込み方になります。

rel="preload"をhead内に記述し、優先的に読み込みをさせることでhead読み込み時点でLCP要素の読み込みがスタートします。

この図の例の場合であれば、head要素を全て読み込み完了した時点でLCPは表示され閲覧できる状態となります。

通常の読み込みと比較した時に、head要素の読み込みが始まった時点からLCPも読み込みがスタートしている分、LCPの表示完了までにかかる時間が短縮されていることがわかります。

rel="preload"の書き方と使用のルール

rel="preload"の実装は、HTMLの<head>タグ内に<link>要素を使用して行います。

記述のルールとして、head内に記述する必要があります。

基本的なソースは以下の通りです。

<link rel="preload" as="リソースの種類" href="リソースのURL">

rel="preload"で指定できるリソース

また、基本的なソースで説明している「リソースの種類」に関しては、下記のようなリソースを指定できます。

rel="preload"で指定できる主要なリソースタイプは以下の通りです。

as="image": 画像ファイル（JPG、PNG、WebPなど）
as="font": Webフォント（WOFF、WOFF2など）
as="script": JavaScriptファイル
as="style": CSSファイル
as="document": HTML文書（iframeで使用）
as="audio": 音声ファイル
as="video": 動画ファイル

LCPではよく画像などが対象となりやすく画像ファイルは使用頻度は高いですが、それ以外にもWebフォント、JavaScript、CSS、HTML、動画や音声ファイルなども指定することができます。

「リソースのURL」の箇所については、それぞれのファイルのURLを記述します。

rel="preload"が効果的なのはLCP対象のコンテンツ

rel="preload"は万能ではありません。適切に使用することで効果を発揮しますが、間違った使い方をすると逆効果になることもあります。

rel="preload"が最も効果的なのはLCP（Largest Contentful Paint）対象コンテンツの事前読み込みです。

特にLCPの要素が下記のようなコンテンツの場合は効果絶大です。

背景画像
ヒーロー画像
WEBフォント
JavaScript

これらの要素は従来、HTMLパース→CSS読み込み→画像発見という段階を経るため表示が遅れがちでした。

しかしrel="preload"を使用することで、HTMLパース開始と同時にLCP要素のリソース取得が可能になります。

rel="preload"の注意点

プリロードは有効な技術ですが、いくつかの注意点があります。

誤った使い方をしてしまうと、逆に表示速度が低下してしまう場合もあるため必ず確認しておきましょう。

過度なpreloadの使用には注意

rel="preload"を過度に使用すると、逆にパフォーマンスが悪化する危険性があります。

ウェブページの読み込みは、head要素を読み込んだ後にbody要素を読み込むという説明をしましたが、過度にrel="preload"で記述をしてしまうと逆効果になります。

帯域幅の圧迫により1つ1つのファイルが分散して読み込まれることで、かえって読み込みが遅くなってしまう場合がります。

本当に重要なリソースの読み込みが遅延し、結果的にページ表示速度が低下します。

またメモリ使用量の増加でブラウザのパフォーマンスが低下し、特にモバイル端末では顕著な影響が現れます。

適切な使用原則は、確実に使用される重要なリソース2-3個までに限定し、LCPや初期表示に直接関わるもののみに適用することです。

「すべてを早く読み込む」のではなく「本当に重要なものだけを早く読み込む」という選択的な最適化が重要です。

Page Speed Insightsの改善指標の「キーリクエストのプリロード」について

Page Speed Insightsの改善項目に「キーリクエストのプリロード」という項目もあります。

Page Speed Insightsでページを計測した際に、preload属性で改善できるページの場合に表示されます。

こちらの表示が出てきた場合は、上記で説明しているpreload属性を使って改善を試みましょう。

Page Speed Insightsで表示される場合、どのファイルが対象となるかも表示されますのでそちらを確認し必要なファイルを対応してあげましょう。

rel="preload"のまとめ

rel="preload"は、ブラウザに重要リソースの優先的事前読み込みを指示するHTML属性で、ページ表示速度を劇的に改善する最適化技術です。

まだ最適化を行っていないというサイトは、是非、こちらのページの解説をご覧になって改善を実施してみてください。

特にLCPの改善にもおすすめな施策となります。

記事を書いた人

井上寛生

LandingHub 執行役員 / 事業責任者 / 技術責任者

大学院では情報工学を専攻し、修了後に株式会社TeNへ新卒入社。当時は社内唯一のエンジニアながら、開発部門をゼロから立ち上げ、採用・育成を一手に担い、全員が未経験からスタートした精鋭エンジニアチームを組成。2021 年にはWEBサイト高速化プラットフォーム「LandingHub」を立ち上げ、プロダクトオーナー兼事業責任者として企画・開発・グロースを牽引。現在は執行役員として、会社の技術戦略と事業成長の双方をリードしている。

コラム一覧に戻る