どうもこたにんです。
Resource Hints を知っていますかね？
こちらの記事が大変参考になるので、これを読めば解決なのですが。
たった4つ、すごくシンプルな記法で、WEBページを高速化させられます。
Resource Hintsという名前だけあって、WEBページのリソースのヒントとなるような処理を行ってくれるAPI群なのです。
先の記事の文を引用するとこういうことです。
リソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させる
すごく素敵でしょ？
たった4種類のResource Hints
Resource Hintsは、たった4種類の要素から成ります。
- dns-prefetch
- preconnect
- prefetch
- prerender
ここからは、それぞれの役割をすごく簡単に記します。
dns-prefetch
<link rel="dns-prefetch" href="//example.com">
dns-prefetchは、DNSの名前解決を先にしておきキャッシュする技。
ドメインが既にわかっている状態であれば、これをしておくことで名前解決の処理を減らすことができます。
preconnect
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
preconnectは、dns-prefetchの一歩先、TCP接続まで先に行っておく技。
CDNサーバを使ったリソース管理先など、crossoriginが必要なものも属性を追記できます。
prefetch
<link rel="prefetch" href="/global.js" as="script">
<link rel="prefetch" href="//example.com/next.html"
as="html" crossorigin="use-credentials">
prefetchは、さらにさらに先、jsやcssや次ページのHTMLなどのリソースをあらかじめ取得してブラウザキャッシュしておく技。
as属性を指定しておくことで最適な形で取得・キャッシュできます。
prerender
<link rel="prerender" href="//example.com/next.html">
prerenderは、最強です、指定したページのDOM生成・レンダリングまでをあらかじめ行ってキャッシュしておく技。
prefetch可能なリソースのみのページの場合という限定技ではあります。
また、prerenderをするということは、もとの表示ページ時点での通信が増えることになりますので諸刃の剣。
Resource Hintsのブラウザサポート
上記たった4つの、簡単なlink rel属性で、Resource Hintsは成立します。
このResource Hintsのすごいところは、たったこれだけでブラウザががんばってくれるところ。
（がんばれないブラウザではがんばらないでいてくれるところ）
全てを網羅してサポートしているブラウザはFirefoxとChromeとEdgeだけ？かな？
IE11やSafariは一部対応していない要素もあるようです。
詳しくは以下、caniuse参照。
興味がある方は、w3の文献もぜひ一読ください。
WEB高速化は楽しいよ！
今回は、すごくシンプルかつWEB高速化に有用な手段のResource Hintsを紹介しました。
WEB高速化は、Resource Hintsだけでなく、いろんな手法があるんですよ！
WEBエンジニアの高速化のためのバイブル、超速本！
この本に、Resource Hintsはもちろん、いろんな手法が書かれているので、WEBフロント爆速エンジニアはぜひご検討ください。
dns-prefetch / preconnect / prefetch / prerender
覚えましたね。
使いこなしていきましょう！
それでは聴いてください。
