Slide 1
Slide 1 text
Introduction to Resource Hints
2016.12.05 Frontrend Vol.8
Introduction to Resource Hints by @1000ch 1
Slide 2
Slide 2 text
@1000ch
Web アプリケーション開発を専門とするソフトウェア
エンジニア。企業で働く傍ら、技術顧問として複数企業
のエンジニアリングに関わり、高品質で維持しやすい
Web アプリケーションを作るための活動を続けてい
る。
Introduction to Resource Hints by @1000ch 2
Slide 3
Slide 3 text
Resource Hints とは
これから必要になるリソースを
要素で定義し、それをブラウザが 投機的に 取得す
る機能
Introduction to Resource Hints by @1000ch 3
Slide 4
Slide 4 text
投機的に？
Introduction to Resource Hints by @1000ch 4
Slide 5
Slide 5 text
「成否は確実でないが、機会を上手く利用して利益を得ようとする行為
を形容する。」
現在のページロードを邪魔しないように、ブラウザがアイドルの時に必要になるリソースを
ロードしてもらう
Introduction to Resource Hints by @1000ch 5
Slide 6
Slide 6 text
Resource Hints
DNS Prefetch: 投機的な DNS 解決
Preconnect: 投機的な TCP 接続
Prefetch: 投機的なリソース取得
Prerender: 投機的なページ描画
Introduction to Resource Hints by @1000ch 6
Slide 7
Slide 7 text
DNS Prefetch
指定したオリジンへの DNS 解決を行う
ドメインがわかるが、スキーマが定まらない場合に使う
Introduction to Resource Hints by @1000ch 7
Slide 8
Slide 8 text
Preconnect
指定したオリジンへの DNS 解決を含む TCP 接続を行う
ドメイン及びスキーマがわかっている場合に使う
Introduction to Resource Hints by @1000ch 8
Slide 9
Slide 9 text
Prefetch
指定した URL のリソースを取得する
as
はオプショナルだが、付けておくと良い
Introduction to Resource Hints by @1000ch 9
Slide 10
Slide 10 text
Preload directive
(none): XHR, fetch link rel=preload href=...
media: audio
, video
script: script
, importScripts の script
style: link rel="stylesheet"
, CSS の @import
font: CSS の @font-face
image: img
, picture
, srcset
, CSS の -image
他には worker
, embed
, object
, documenet
などがある
Introduction to Resource Hints by @1000ch 10
Slide 11
Slide 11 text
Prerender
指定した URL の HTML ドキュメントの取得及び評価を行う
描画まで実行するので、高速にナビゲーションされる
コストも大きいので、発生する可能性の高いナビゲーションを指定すると良い
Introduction to Resource Hints by @1000ch 11
Slide 12
Slide 12 text
fetchpriority
属性
リソースの優先度を high
, low
, auto
で指定する
Introduction to Resource Hints by @1000ch 12
Slide 13
Slide 13 text
ハイコストハイリターン
prerender
: 予め決まった遷移、プライマリなアクション
prefetch
: クリティカルなCSS/JS、キーとなるメディア
preconnect
: 別ドメインのAPIサーバーやCDN
dns-prefetch
: 同上
ローコストローリターン
Introduction to Resource Hints by @1000ch 13
Slide 14
Slide 14 text
Chrome の Prerender History
chrome://net-internals/#prerender
Introduction to Resource Hints by @1000ch 14
Slide 15
Slide 15 text
Try in your browser?
const link = document.createElement('link');
link.rel = 'prerender';
link.href = document.querySelector('a').href;
document.head.appendChild(link);
Introduction to Resource Hints by @1000ch 15