Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Resource Hints

Shogo Sensui
December 05, 2016

Introduction to Resource Hints

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

Shogo Sensui

December 05, 2016
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. Resource Hints DNS Prefetch: 投機的な DNS 解決 Preconnect: 投機的な TCP

    接続 Prefetch: 投機的なリソース取得 Prerender: 投機的なページ描画 Introduction to Resource Hints by @1000ch 6
  2. Preconnect <link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin> 指定したオリジンへの DNS

    解決を含む TCP 接続を行う ドメイン及びスキーマがわかっている場合に使う Introduction to Resource Hints by @1000ch 8
  3. 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
  4. 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
  5. Prerender <link rel="prerender" href="//example.com/next-page.html"> 指定した URL の HTML ドキュメントの取得及び評価を行う 描画まで実行するので、高速にナビゲーションされる

    コストも大きいので、発生する可能性の高いナビゲーションを指定すると良い Introduction to Resource Hints by @1000ch 11
  6. 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
  7. 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