“rel=preconnect”｜“rel”属性｜“link”要素:外部リソースと関連付ける｜HTML－havin' a coffee break

＃

“rel="preconnect"”

リンクの種類	外部リソースへのリンク
“body-ok”	Yes

“rel="preconnect"”が指定された“link”要素は事前に接続を確立するべきオリジンを示します。

“rel”属性の値に“preconnect”を指定した場合のようにDNSの名前解決を予め行うのに加え、その先のTCPハンドシェイクとTLSネゴシエーションも予め行うように求めます。

次にウェブページを遷移するときに異なるオリジンから外部リソースを読み込む可能性が高いと予想される場合にあらかじめ接続しておくことが有益なオリジンを指定しておくと遷移時に接続の確立にかかる時間を削減することができます。

この値は“body-ok”であり、“rel”属性の値に他に“body-ok”でない値が含まれない場合は“link”要素は“body”要素の中にも配置できます。

サンプルコード



<link rel="preconnect" href="https://example.com">

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
rel=""	文書と外部リソースの関係	preconnect	リンク先への接続を事前に確立する
rel=""	文書と外部リソースの関係	リンクタイプ	文書と外部リソースの関係
href=""	文書と関連付ける外部リソース	URL	事前に接続を確立するべきオリジンのURL
任意属性
グローバル属性
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media=""	外部リソースが対象とするメディア	メディアクエリ	外部リソースが対象とするメディア条件
hreflang=""	外部リソースが記述されている言語	言語コード	外部リソースが記述されている言語
type=""	外部リソースのデータの種類	MIMEタイプ	外部リソースのMIMEタイプ
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
fetchpriority=""	外部リソースの読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title=""	外部リソースに補足情報を付ける	テキスト	補足情報