Binary Diary

ありのままでいいのかな

Resource Hints というフロントエンドの高速化手法があるんですよ

どうもこたにんです。

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のすごいところは、たったこれだけでブラウザががんばってくれるところ。
(がんばれないブラウザではがんばらないでいてくれるところ)

全てを網羅してサポートしているブラウザはFirefoxChromeとEdgeだけ?かな?
IE11やSafariは一部対応していない要素もあるようです。

詳しくは以下、caniuse参照。

Can I use... - dns-prefetch

Can I use... preconnect

Can I use... prefetch

Can I use... prerender


興味がある方は、w3の文献もぜひ一読ください。

 

WEB高速化は楽しいよ!

今回は、すごくシンプルかつWEB高速化に有用な手段のResource Hintsを紹介しました。
WEB高速化は、Resource Hintsだけでなく、いろんな手法があるんですよ!

WEBエンジニアの高速化のためのバイブル、超速本!

この本に、Resource Hintsはもちろん、いろんな手法が書かれているので、WEBフロント爆速エンジニアはぜひご検討ください。

dns-prefetch / preconnect / prefetch / prerender 
覚えましたね。
使いこなしていきましょう!


それでは聴いてください。

Pretender