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

＃

“rel="preload"”

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

“rel="preload"”が指定された“link”要素は先行して読み込むべき外部リソースを示します。

指定されたリソースはウェブページを読み込んで表示する過程で通常は読み込み順序が後になるものでも先行して読み込みされます。読み込み時にウェブページのレンダリングを妨げるスクリプトや画像、ウェブフォントなどのリソースや、読み込みの順序が遅いCSSやスクリプトで利用されるリソースなどを先行して読み込みさせることでウェブページ全体の読み込みを速くすることができます。

“rel”属性の値に“preload”が指定されている場合は“as”属性を指定する必要があります。“as”属性は読み込み順序の正しい順位付けやリクエストのマッチング、正しいコンテンツセキュリティポリシーの適用、正しい“Accept”HTTPヘッダーの設定のために必要です。

サンプルコード



<link rel="preload" as="font" href="fonts/sample-font.woff" crossorigin>

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

<link rel="preload" as="image" href="img/coverpicture.png">

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
rel=""	文書と外部リソースの関係	preload	リンク先を先行して読み込む
rel=""	文書と外部リソースの関係	リンクタイプ	文書と外部リソースの関係
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要求でアクセスされるリソース
必須属性(少なくとも一つ)
href=""	文書と関連付ける外部リソース	URL	先行して読み込むべき外部リソースのURL
imagesrcset=""	使用可能な画像ファイルのセット	URL 画像の横幅w,URL 画像の横幅w,...	ビューポートの幅ごとの表示する画像のURL
imagesrcset=""	使用可能な画像ファイルのセット	URL デバイスピクセル比x,URL デバイスピクセル比x,...	デバイスピクセル比ごとの表示する画像のURL
任意属性
グローバル属性
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	外部リソースを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
media=""	外部リソースが対象とするメディア	メディアクエリ	外部リソースが対象とするメディア条件
hreflang=""	外部リソースが記述されている言語	言語コード	外部リソースが記述されている言語
type=""	外部リソースのデータの種類	MIMEタイプ	外部リソースのMIMEタイプ
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
imagesizes=""	画像を表示するサイズ	長さ	【“imagesrcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅
imagesizes=""	画像を表示するサイズ	メディアクエリ長さ,メディアクエリ長さ,...,長さ	【“imagesrcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅
fetchpriority=""	外部リソースの読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す
title=""	外部リソースに補足情報を付ける	テキスト	補足情報