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

<link rel="preload">

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

リソースヒント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.preload
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-fetch

`as=フェッチ`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-font

`as=フォント`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-image

`as=画像`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-script

`as=スクリプト`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-style

`as=スタイル`
50
79
85
11.1
50
11.3
html.elements.link.rel.preload.as-track

`as=トラック`
50
79
11.1
50
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (57)
実装メモ
  • 様々なウェブ互換性の問題（バグ1405761など）のため無効。

基本構文

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

Describe preload as an early fetch hint rather than an execution trigger.

プレビュー全画面表示

Preload checklist

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

プレビュー全画面表示

実務での使いどころ

  • <link rel="preload"> の活用

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

注意点

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

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク