プログラミングガール

Developing a better me

サイト高速化|Resource HintsとPreload

Resource HintsとPreloadの違い

Resource Hints

  • 主に次画面以降のリソースをページ読み込み後バックグラウンドで取得する
  • レスポンスヘッダーのLink、あるいは <header> タグ内の <link> タグにdns-prefetch, preconnect, prefetch, prerender を指定
    • dns-prefetch: 指定したURLから接続先ドメインIPアドレスを解決するためDNSルックアップを事前に行う
    • preconnect: 指定したURLへのTCP接続を事前に行う
    • prefetch: リソースのダウンロードし、ブラウザキャッシュに格納
    • prerender: ページを事前にレンダリングする

Preload

  • 今表示する画面のリソースを優先的に事前ダウンロードする
  • レスポンスヘッダーのLink、あるいは <header> タグ内の <link> タグにpreloadを指定