サイト高速化に必須の link rel=preload とは？（使い方とサンプルHTML・CSS）
サイト高速化にあたり Google の PageSpeed Insights と睨めっこをしている際、「キー リクエストのプリロード」という項目が出現しました。
キー リクエストのプリロード
<link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。
↓こんな感じのです
この改善がサイト高速化に効く使える技術であることがわかったのですが、なかなか理解しにくかったので、今回は <link rel="preload"> についてわかりやすく説明していきます。
これまでスルーしてしまっていた方は、これを機会に覚え、使いこなせるようにしてみましょう。
目次
link rel=preload とは
preload＝プリロードと読むそうです。
その名の通り、プリ＝先行、ロード＝読み込み、で先行読み込みをブラウザに指示する機能になります。
link 要素なので、基本的にヘッダーに記述し利用します。
具体的に果たす役割
例えば以下のようなファイルで構成されるWebページがあったとします。
index.html |--style.css |--main-image.jpg
HTML
<!DOCTYPE html> <html> <head> <title>sample</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main-image">キャッチコピー</div> </body> </html>
CSS
.main-image {
background-image: url("main-image.jpg");
}
style.css の中で、「キャッチコピー」の background-image として main-image.jpg が呼び出されているイメージです。
これをブラウザで読み込んで、 Chrome のディベロッパーツールで確認してみると、下図のような順番で読み込まれていることがわかります。
まず ① index.html が読み込まれ、次に ② style.css が読み込まれ、最後に style.css に記述されている ③ main-image.jpg が読み込まれていますよね。
では次に preload を記述してみましょう。
CSSはそのままで、HTMLに追記します。
HTML（preload 追記）
<!DOCTYPE html> <html> <head> <title>sample</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="preload" href="main-image.jpg" as="image"> </head> <body> <div class="main-image">キャッチコピー</div> </body> </html>
すると以下のように読み込まれます。
style.css と同時に preload で指定した main-image.jpg も読み込まれていることがわかると思います。
このように preload を利用すると、ブラウザに先読みの指示を出すことができます。
preload で先読みできる要素の一覧
先程のサンプルHTMLでは as=”image” と記述されていたように preload は as 属性で要素を指定する必要があります。
下記が指定可能な要素の一例です。（よく使いそうなやつ）
| as＝”” | 備考 |
|---|---|
| image | <img>や<picture>などを利用する際に |
| embed | <embed>を利用する際に |
| object | <object>を利用する際に |
| document | <iframe>や<frame>を利用する際に |
| script | <script>を利用する際に |
| audio | <audio>を利用する際に |
| font | CSSで@font-faceを利用する際に（ウェブフォントなど） |
画像やウェブフォントなど、サイトが重くなる要因で、レンダリングをブロックしがちな要素を指定することができますね。素敵ですね。
ちなみにウェブフォントを利用する際は、
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
現状は上記のように crossorigin も記載する必要があるようです。
as について詳しい解説は W3C のサイトをご参照ください。（英語）
https://w3c.github.io/preload/#as-attribute
こちらも詳しい解説として参考になります。（mozilla が推奨していた as についての完全な解説のリンク）
https://fetch.spec.whatwg.org/#concept-request-destination
どのようなシーンで活躍するのか
レンダリングをブロックするような要素を、全て preload で先読みしてしまうと、同時に読み込まれるファイルサイズが大きくなりすぎてしまうことがあります。その場合、逆に遅くなるという可能性もあります。
大きい画像もフェブフォントもビデオファイルも、全て先読みしてしまいたいのは山々ですが、現実的な使い方としては、
「ファーストビューで読み込まれる要素を先読みする」
という使い方が今のところベストだと思います。
その他の preload の特徴について
preload にはその他にも特徴があるので、さらに勉強したい方のためにご紹介しておきます。
ブラウザの対応状況
残念ながら IE 、 Firefox では未対応です。モバイルで多く利用されている Safari で利用できるのはありがたいですね。
Can I use で確認する
https://caniuse.com/#search=preload
メディアクエリも指定できる
これすごいですよね。「デバイスサイズがスマホサイズなら preload する」なんて指示も出せちゃいます。
メディアクエリを指定する場合は、下記のように記載します。
<link rel="preload" href=“sp.jpg” as="image" media="(max-width: 600px)"> <link rel="preload" href=“pc.jpg” as="image" media="(min-width: 601px)">
おわりに
対応当時は概念を理解するのに時間を要したのですが、最近Googleさんが用意してくれているヘルプがとてもわかりやすかったです。
もっと早くこのヘルプページを公開してくれてれば、自分の知識に preload できたのになぁ、なんてちょっと上手いこと思ったりも。
そのヘルプページは英語オンリーですがこちらから
https://developers.google.com/web/tools/lighthouse/audits/preload
また、他にもできるマニアックなこと（type や crossorigin の指定など）もありますので、全て知りたいという方は、日本語不完全の翻訳ですが、下記リンクが一番参考になりました。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
おすすめの記事はこちら
-
HTML・CSS ｜ 2020/04/08【2020年】CSS・Javascript・PHP 非エンジニアも押さえておきたいポイントまとめ
-
HTML・CSS ｜ 2019/06/24
「ツールチップ」で効果的にサイトのユーザビリティ向上！デザインのポイント・実装方法
-
HTML・CSS ｜ 2019/06/06
「css next」を使ってみよう！次世代CSSの記法でSassみたいに書ける！
-
HTML・CSS ｜ 2018/12/19
FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）
-
HTML・CSS ｜ 2014/04/21
サイトコーディングでid名、class名を決定する際の注意点とよく使う名前一覧
-
HTML・CSS ｜ 2012/07/18
携帯サイトでGoogleマップを表示する方法
