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

morita

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

今回はその手段の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" に対応しています。

2021.04現在の 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" はリソースを強制的に先読みさせる指定となります。
使い方を間違えると逆にページスピードが低下することもあります。
用法・用量を守って正しくお使いいただくことが重要となります。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

morita

投稿者 Morita Sou

フロントエンドグループ内チームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。