Webサイトを表示する際に、CSSや画像・フォントの読み込みが遅く画面がチラつくことはないでしょうか?
そんな時に使うと読み込みが改善して表示速度が速くなる場合がある「link rel=preload」を解説していきます。
link rel=preloadとは
link rel=preloadとは、ブラウザに対して特定のファイル等の先行読み込みを指示するものになります。
ページのレンダリングがブロックされにくくなるので、CSSやファーストビューに使用されている画像やフォント読み込みに使用すると、ページの表示速度が改善する場合があります。
rel=preloadを指定する場合は、link要素の中のrel属性の値「preload」となりますので、head要素の中に記述します。
as属性・href属性も併せて記述する必要がありますので注意してください。
※as属性については後述します。
link rel=preloadの使い方
link rel=preloadの使い方は以下のようになります。
<link rel="preload" href="style.css" as="style">上記の例では、style.cssを先行読み込みするよう指示しています。
先行読み込みを指示しているだけで、実際にCSSを読み込むには「<link rel=”stylesheet” href=”style.css”>」のような記述で、今まで通りCSSを読み込む設定も必要になりますので注意してください。
as属性で指定出来る値について
as属性とは、rel=preloadで指定するファイルのコンテンツタイプを示します。
指定出来る値には以下のものがあります。(使いそうなものを抜粋)
| 値 | 内容 |
|---|---|
| image | 画像ファイル |
| style | CSSファイル |
| script | JavaScriptファイル |
| font | フォントファイル ※crossorigin属性を合わせて記述する必要があります。 |
| audio | audio要素で指定されるファイル |
| embed | embed要素で指定されるファイル |
| object | object要素で指定されるファイル |
| video | video要素で指定されるファイル |
| document | frame要素やiframe要素で指定されるファイル |
その他の値や、より詳しい内容については以下をご覧ください。
MDN(https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/rel/preload)
media属性を使用してメディアクエリの指定をする方法
media属性を使用する事で、ウインドウサイズ(デバイスサイズ)毎に先行読み込みするファイルを指定する事でがきます。media属性の指定方法は以下のようになります。
<link rel="preload" href="image_pc.jpg" as="image" media="(min-width: 768px)">
<link rel="preload" href="image_sp.jpg" as="image" media="(max-width: 767px)">さいごに
いかがでしたでしょうか。
今回は、link rel=preloadで特定のファイルを先行読み込みする方法を解説しました。
rel=preloadは使いすぎると、かえってページの表示が遅くなる場合もありますので、ファーストビューの画像など特定の要素のみに限定するようにしてください。
