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

＃

“rel="prefetch"”

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

“rel="prefetch"”が指定された“link”要素は事前に取得するべき外部リソースを示します。

取得されたリソースはキャッシュに保存されます。取得されたリソースがスクリプトやスタイルシートの場合に自動的に実行されたり、適用されることはありません。

次にウェブページを遷移するときに利用する可能性が高いと予想されるリソースを指定しておくと遷移時にリソースを取得するのにかかる時間を削減することができます。

“as”属性を併せて指定すると、HTTPヘッダーや優先順位正しく設定するなど、リソースの取得の過程を最適化することができます。

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

サンプルコード



<link rel="prefetch" href="sample-script.js" as="script">

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
rel=""	文書と外部リソースの関係	prefetch	リンク先を事前に取得する
rel=""	文書と外部リソースの関係	リンクタイプ	文書と外部リソースの関係
href=""	文書と関連付ける外部リソース	URL	事前に取得するべき外部リソースのURL
任意属性
グローバル属性
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media=""	外部リソースが対象とするメディア	メディアクエリ	外部リソースが対象とするメディア条件
hreflang=""	外部リソースが記述されている言語	言語コード	外部リソースが記述されている言語
type=""	外部リソースのデータの種類	MIMEタイプ	外部リソースのMIMEタイプ
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
as=""	先行して読み込む外部リソースの利用先	audio	“audio”要素で埋め込まれる音声ファイル
		video	“video”要素で埋め込まれる動画ファイル
		track	“track”要素で埋め込まれる動画ファイル
		script	“script”要素などで埋め込まれる外部スクリプト
		style	“link”要素で読み込まれるスタイルシート
		font	“@font-face”ルールで読み込まれるフォントファイル
		image	“picture”要素や“img”要素で埋め込まれる画像ファイル
		embed	“embed”要素で埋め込めれるリソース
		object	“object”要素で埋め込めれるリソース
		document	“frame”要素や“iframe”要素で埋め込まれるHTML文書
		リクエストデスティネーション	“Fetch”仕様書に定義されたキーワード
		fetch	フェッチまたはXHR要求でアクセスされるリソース
fetchpriority=""	外部リソースの読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title=""	外部リソースに補足情報を付ける	テキスト	補足情報