【Web高速化】Resource Hints

ユーザが次にアクセスしそうなページのリソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させる方法にResouce Hintsがある

このResource Hintsについて調べた

w3c.github.io

Resource Hintsは以下の4つの要素から構成される

• dns-prefetch
• preconnect
• prefetch
• prerender

これらを HTML の Link タグの中で使って、次のページで使うリソースのヒントをブラウザに伝える

dns-prefetch

リソース取得に必要なオリジンを示しておき、DNS の問い合わせを事前に行っておく

<link rel="dns-prefetch" href="//example.com">

preconnect

DNSルックアップ、TCP接続までを開始しておく

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

prefetch

上記はAPIなどレスポンスが動的の場合に使うが、ソースまでわかっている、かつ、内容に変化がない場合に事前に取得しキャッシュさせておく

<link rel="prefetch" href="//example.com/next-page.html" as="document" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

prerender

バックグラウンドに起こしたタブの中で、描画まで行ってページ全体を事前に取得しておく

<link rel="prerender" href="//example.com/next-page.html">

Prerender の状況はChrome の場合はchrome://net-export/でログをとり、https://netlog-viewer.appspot.com/で確認することができる

他参考

https://blog.jxck.io/entries/2016-02-11/resource-hints.html#prerender

Resource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN