【違い】dns-prefetch、preconnect、prefetch、preload、prerender

ブラウザがリソースを取得するまでの流れ。

[DNS の名前解決] -> [TCP 接続の確立] -> [Fetch] -> [Load] -> [Render]

意味
dns-prefetch 「DNSの名前解決だけ先にやっとけ」な指示
preconnect 「HTTPの接続の確立までやっとけ」な指示
prefetch 「リソースを取ってくるとこまでやっとけ」な指示
preload 「リソースを取ってきて読み込みまでしておけ」な指示
prerender 「リソースを取ってきて読み込みもして、そのリソースに含まれるリソースも全部準備しとけ」な指示

要するに「いつでも表示できるようにしとけ」な指示

 

参考にしたページ(こちら様のページの方が分かりやすいし詳しいです):

リソースの読み込みを助けるウェブブラウザ API の世界

リンク先のページを高速表示させるには?先読み指定ざっくりまとめ|Web Work Plus

コメント

タイトルとURLをコピーしました