Introduction to Resource Hints

2016年12月5日に開催された Frontrend Vol.8 (https://frontrend.connpass.com/event/45238/) の「Introduction to Resource Hints」のセッション資料です。

Transcript

1. Introduction to Resource Hints 2016.12.05 Frontrend Vol.8 Introduction to Resource Hints by @1000ch 1
2. @1000ch Web アプリケーション開発を専門とするソフトウェア エンジニア。企業で働く傍ら、技術顧問として複数企業 のエンジニアリングに関わり、高品質で維持しやすい Web アプリケーションを作るための活動を続けてい る。 Introduction to Resource Hints by @1000ch 2
3. Resource Hints とは これから必要になるリソースを <link> 要素で定義し、それをブラウザが 投機的に 取得す る機能 Introduction to Resource Hints by @1000ch 3
4. 投機的に？ Introduction to Resource Hints by @1000ch 4
5. 「成否は確実でないが、機会を上手く利用して利益を得ようとする行為 を形容する。」 現在のページロードを邪魔しないように、ブラウザがアイドルの時に必要になるリソースを ロードしてもらう Introduction to Resource Hints by @1000ch 5
6. Resource Hints DNS Prefetch: 投機的な DNS 解決 Preconnect: 投機的な TCP 接続 Prefetch: 投機的なリソース取得 Prerender: 投機的なページ描画 Introduction to Resource Hints by @1000ch 6
7. DNS Prefetch <link rel="dns-prefetch" href="//example.com"> 指定したオリジンへの DNS 解決を行う ドメインがわかるが、スキーマが定まらない場合に使う Introduction to Resource Hints by @1000ch 7
8. Preconnect <link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin> 指定したオリジンへの DNS 解決を含む TCP 接続を行う ドメイン及びスキーマがわかっている場合に使う Introduction to Resource Hints by @1000ch 8
9. Prefetch <link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials"> <link rel="prefetch" href="/library.js" as="script"> 指定した URL のリソースを取得する as はオプショナルだが、付けておくと良い Introduction to Resource Hints by @1000ch 9
10. 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
11. Prerender <link rel="prerender" href="//example.com/next-page.html"> 指定した URL の HTML ドキュメントの取得及び評価を行う 描画まで実行するので、高速にナビゲーションされる コストも大きいので、発生する可能性の高いナビゲーションを指定すると良い Introduction to Resource Hints by @1000ch 11
12. fetchpriority 属性 <link rel="dns-prefetch" href="//widget.com" fetchpriority="high"> <link rel="preconnect" href="//cdn.example.com" fetchpriority="low"> <link rel="prefetch" href="//example.com/next-page.html" fetchpriority="auto"> リソースの優先度を high , low , auto で指定する Introduction to Resource Hints by @1000ch 12
13. ハイコストハイリターン prerender : 予め決まった遷移、プライマリなアクション prefetch : クリティカルなCSS/JS、キーとなるメディア preconnect : 別ドメインのAPIサーバーやCDN dns-prefetch : 同上 ローコストローリターン Introduction to Resource Hints by @1000ch 13
14. Chrome の Prerender History chrome://net-internals/#prerender Introduction to Resource Hints by @1000ch 14
15. 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