preloadとは
先行読み込みをブラウザに指示する機能。
また、Core Web Vitalsの向上やサイトの高速化をすることができるようになる。
href属性でリソースのパスを指定
as属性でリソースの種類を指定
preloadで先読みできる要素の一覧
| as="" | 備考 |
|---|---|
| image | 画像ファイル |
| embed | ＜embed＞要素の中に埋め込まれるリソース |
| object | ＜object＞要素の中に埋め込まれるリソース |
| document | ＜frame＞や＜iframe＞に埋め込まれるHTML文書 |
| script | JavaScriptファイル |
| audio | 通常は＜audio＞で使用される音声ファイル |
| font | フォントファイル |
| fetch | ArrayBufferやJSONファイルのような、フェッチまたはXHR要求でアクセスされるリソース |
| style | CSSスタイルシート |
| track | WebVTTファイル |
| worker | JavaScriptウェブワーカーまたは共有ワーカー |
| video | 通常は＜video＞で使用される動画ファイル |
rel="preload"をよく使うコンテンツ
- CSS
<link rel="preload" href="stylesheet.css">
CSSは読み込みが完了するまでレンダリングがブロックっされるのでrel="preload"を使うことでより速くCSSが読み込まれることになり、結果的にレンダリングがブロックされにくくなり、ページスピードが速くなります。
- JavaScript
<link rel="preload" href="main.js" as="script">
CSSと同様にjsファイルも先読みが必要なファイルはrep="preload"が有効です。
<script src="script.js" async>
逆に読み込みがいつでもいいjsはasync属性をつけると非同期読み込みができます。
<script src="script" defer>
defer属性で遅延読み込みもできます。
- フォント
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
フォントも先読みすることでFOITやFOUTを防ぐことができ、Core Web Vitalsの向上も見込めます。
フォントを指定していない場合、Page Speed Insights の「キーのプリロード」という項目で指摘されます。
フォントの場合はCORSを有効にするためにcrossorigin属性も指定します。
rel="preload"は使い方を間違える逆にページスピードが低下することもあります。
用法・用量を守って正しく使うことが重要となります。
参考サイト