Oct.6th, 2020
＃
“rel="prerender"”
“rel="prerender"”が指定された“link”要素は事前にレンダリングするべき外部リソースを示します。
“rel”属性の値に“prefetch”を指定した場合のように予めリソースを取得するのに加え、レンダリングも予め行います。レンダリングされたリソースがスクリプトやスタイルシートの場合は自動的に実行、もしくは適用されます。
次にウェブページを遷移するときに利用する可能性が高いと予想されるリソースを指定しておくと遷移時にリソースを取得してレンダリングするのにかかる時間を削減することができます。例えば、ユーザーの次の遷移先となる可能性が高いウェブページを指定しておくと、バックグラウンドで指定されたウェブページが事前にレンダリングされ、遷移したときにはすぐに表示することができます。
この値は“body-ok”であり、“rel”属性の値に他に“body-ok”でない値が含まれない場合は“link”要素は“body”要素の中にも配置できます。
サンプルコード
<link rel="prerender" href="sample-3.html">
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| rel="" | 文書と外部リソースの関係 | prerender |
リンク先を事前に取得してレンダリングする |
| リンクタイプ | 文書と外部リソースの関係 | ||
| href="" | 文書と関連付ける外部リソース | URL | 事前に取得してレンダリングしておくべき外部リソースのURL |
| 任意属性 | |||
| グローバル属性 | |||
crossorigin="" |
外部リソースを読み込む時のCORSリクエストを設定 | anonymous | CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない |
| use-credentials | CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する | ||
| media="" | 外部リソースが対象とするメディア | メディアクエリ | 外部リソースが対象とするメディア条件 |
| hreflang="" | 外部リソースが記述されている言語 | 言語コード | 外部リソースが記述されている言語 |
| type="" | 外部リソースのデータの種類 | MIMEタイプ | 外部リソースのMIMEタイプ |
referrerpolicy="" |
リファラーポリシーを指定 | リファラーポリシー | リファラーポリシーを指定 |
| fetchpriority="" |
外部リソースの読み込み時の優先度を指定する | high | 同じ種類の外部リソースと比較して取得の優先度が高いことを示す |
| low | 同じ種類の外部リソースと比較して取得の優先度が低いことを示す | ||
| auto | 同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す | ||
| title="" | 外部リソースに補足情報を付ける | テキスト | 補足情報 |
“rel”属性の値は空白文字で区切ることで複数の値を指定できます。
＃
