「これ知ってますか？ 」
「あっ、知ってます。」
みたいなやり取りで、事前に知っておきたかったぁ…ってことは往々とあります。
実は、ブラウザにも事前にリソースファイルの情報を伝えることができます。 事前に伝えることで高速化の期待ができます。
それが、W3Cの ResourceHints + Preloadという仕様になります。
Q: で、リソースファイルってなんやねん？
A: DNS lookup、JS、CSS、など多岐に渡るWebページを構成するリソース全般になります。
Q: ResourceHints + Preloadはどうやって使うの？
A: HTML上にlinkタグを差し込むだけで使えます。
ブラウザが事前処理できるので比較的容易だけど、とても強力な高速化が期待できる方法です。
実際の使い方や説明
具体的な、ResourceHintsとPreloadの使い方です。
HTMLタグの記述だけなので、プログレッシブ・エンハンスメントとして考えていけばいいはずです。
対象ブラウザは、caiuseで確認することをおすすめします。
dns-prefetch
<link rel=”dns-prefetch” href=”https://example.com” />- DNSルックアップ
preconnectとは併用しない。
* 追記 2020/10/16
https://hirorock.medium.com/domain-sukunai-ga-win-53eae26ab788
Prefetch
<link rel=”prefetch” href=”/hoge.jpg” /><!-- まとめて書くこともできる -->
<link rel="prefetch stylesheet" href="example.css" />
- リソースの事前読み込み
ブラウザのアイドル時間で今後読み込むリソースを予め読み込む。別ドメインでも問題ない。
注意としては現在のページで使うリソースを指定しても意味が無いので使用しない。先に読み込む必要があるファイルを指定する。
asでファイルタイプを指定しておくとfetchの最適が行われる。詳細はPreloadの仕様を確認する。
Prerender
<link rel=”prerender” href=”https://example.com/next.html” />- resourceの先読みで実行までしてしまう。
ただし1つのみ指定可能。
Googleの検索で1番上のやつはこれで先読みしている。
当然ではあるが、先読みして無駄なリクエストになってしまう可能性もある。
Preload
<link rel=”preload” href=”style.css” as=”style” />
<link rel=”preload” href=”main.js” as=”script” />
<link rel=”preload” href=”top.mp4" as=”video” type=”video/mp4" />- hintによってresourceの先読み。
事前に読み込むことでレンダリングブロックされにくくなることを期待。
asでファイルタイプを指定する。
typeのMIMEを確認してブラウザが対応していたら読み込む。なので指定したほうが良い。
Web高速化に関する情報など教えていただきたいです！
フォローやClapsも是非お願いします😀
