Edited at

Resource HintsでpreconnectとDNS-Prefetchを併記


目的

relプロトコルは併記が可能なはずだが、preconnectとDNS-Prefetchを併記した事例を見かけない。もしや前例がないから誰もやらないのではないか?本当はよくわかってないのではないか?と思ったので試してみる。


海外事例でprerenderとprefetchを併記した例

http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/

GAのデータから次に最も遷移するURLをprerenderに動的に出力する仕組みについての記事。prerenderはFirefoxで動かないので、prefetchを併記しているとのこと。


Resource Hintsの仕様

https://w3c.github.io/resource-hints/


Resource Hintsのサポートブラウザ

https://caniuse.com/#search=Resource%20Hints

肝心のiOSのSafariとChromeがDNS-Prefetchに対応しているか不明とのこと。


実施内容

<head> の上部にpreconnectとdns-prefetchのURLを書く。preconnectを優先する形でdns-prefetchと併記する。

<link rel="preconnect dns-prefetch" href="外部リソースのURL">

<link rel="preconnect dns-prefetch" href="外部リソースのURL">

<link rel="preconnect dns-prefetch" href="外部リソースのURL">

<link rel="preconnect dns-prefetch" href="外部リソースのURL">

<link rel="preconnect dns-prefetch" href="外部リソースのURL">


結果

Connectingまでが先読みされたので、preconnectがちゃんと効くことがわかった。prerenderやpreloadやpreconnectを使う場合はdns-prefetchも書いておくとよさそう。preconnectが動作しないブラウザでdns-prefetchが動作するテストはしていない。


image.png
image.png