meta-tags
高速化
resource-hints

Resource HintsでpreconnectとDNS-Prefetchを併記

More than 1 year has passed since last update.


目的

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