rel=”preload” を使った Core Web Vitals や サイト高速化の改善

こんにちは森田です。
前回の記事で サイトパフォーマンス改善でよく見るボトルネックになる要因 を書いたのですが、ではそれをどのように改善すべきか？については深く掘り下げませんでした。

今回はその手段の1つとなりえる rel="preload" についてご紹介します。

rel=”preload” とは

rel="preload" は <link> 要素に指定する rel 属性に付ける値です。
また、併せて as属性で種類を指定します。

<link rel="preload" href="style.css" as="style">

rel="preload" を指定することでコンテンツの先読みができるようになり、Core Web Vitals の向上やサイト高速化をすることができるようになります。

執筆時現在、IE以外のモバイルを含む主要なブラウザは rel="preload" に対応しています。

as 属性について

併記するas属性で指定できる種類は以下となっております。

• audio: 通常は <audio> で使用される音声ファイル。
• document: <frame> や <iframe> に埋め込まれる HTML 文書。
• embed: <embed> 要素の中に埋め込まれるリソース。
• fetch: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
• font: フォントファイル。
• image: 画像ファイル。
• object: <object> 要素の中に埋め込まれるリソース。
• script: JavaScript ファイル。
• style: CSS スタイルシート。
• track: WebVTT ファイル。
• worker: JavaScript ウェブワーカーまたは共有ワーカー。
• video: 通常は <video> で使用される動画ファイル。

https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

rel=”preload” をよく使うコンテンツ

CSS

CSS は読み込みが完了するまでレンダリングがブロックされるのでrel=”preload” を使うことでより早くCSSが読み込まれることになり、結果レンダリングがブロックされにくくなり、ページスピードが向上します。

<link rel="preload" href="styles.css" as="style">

JavaScript

CSS と同様に jsファイルも先読みが必要なファイルは rel=”preload” が有用です。

<link rel="preload" href="main.js" as="script">

逆に読み込みがいつでもよい js は async属性を付けると非同期読み込みができます。

<script src="script.js" async>

defer属性で遅延読み込みもできます。

<script src="script.js" defer>

フォント

フォントも先読みすることでFOITやFOUTを防ぐことができ、Core Web Vitals の向上も見込めます。

フォントを指定していない場合、PageSpeed Insightsの「キー リクエストのプリロード」という項目で指摘されます。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

フォントの場合はCORSを有効にするために crossorigin 属性も指定します。

CROSについて詳しくは以下のリンクを参考ください。
オリジン間リソース共有 (CORS) – HTTP | MDN

まとめ

rel="preload" はリソースを強制的に先読みさせる指定となります。
使い方を間違えると逆にページスピードが低下することもあります。
用法・用量を守って正しくお使いいただくことが重要となります。

サイトの重要指標であるCore Web Vitals についてまとめた記事をシリーズとして集めてみました。Core Web Vitals の内容をもっと知りたい方、実践での考え方を模索している方、ウェブの優れたUX（ユーザーエクスペリエンス）を実現するための指標に興味のある方などにおすすめの内容です。