Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<link rel="preload">

preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。名前には load という言葉が含まれていますが、これはスクリプトを読み込んで実行するのではなく、ダウンロードとキャッシュをより高い優先度で行うようにスケジュールするだけです。

リソースヒント

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`rel (preload)`	50	79	85	11.1	50	11.3
`rel (preload as-fetch)` `as=フェッチ`	50	79	85	11.1	50	11.3
`rel (preload as-font)` `as=フォント`	50	79	85	11.1	50	11.3
`rel (preload as-image)` `as=画像`	50	79	85	11.1	50	11.3
`rel (preload as-script)` `as=スクリプト`	50	79	85	11.1	50	11.3
`rel (preload as-style)` `as=スタイル`	50	79	85	11.1	50	11.3
`rel (preload as-track)` `as=トラック`	50	79		11.1	50	11.3

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app.js" as="script">

ライブデモ

Preload categories

Compare the assets commonly loaded with rel=preload.

プレビュー全画面表示

Preload lifecycle

Preload starts the fetch early, but a normal consumer still has to pick the resource up.

プレビュー全画面表示

Preload checklist

Use explicit types and only preload assets that are definitely needed.

プレビュー全画面表示

実務での使いどころ

<link rel="preload"> の活用

preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。

注意点

古いブラウザでは対応していない場合がある。

対応ブラウザ

基本構文

ライブデモ

Preload categories

Preload lifecycle

Preload checklist

実務での使いどころ

<link rel="preload"> の活用

注意点

アクセシビリティ

参考リンク