Widely available すべての主要ブラウザで対応済み。安心して使用可能。
リソースヒント Widely available

<link rel="preload">

link rel="preload" は現在のページで確実に必要なリソースを早期に取得し、レンダリングパフォーマンスを向上させます。

リソースヒント

概要

link rel="preload" は現在のページで確実に必要なリソースを早期に取得し、レンダリングパフォーマンスを向上させます。

対応ブラウザ

デスクトップ

Chrome 50+
Edge 79+
Safari 11.1+
Firefox 85+

モバイル

Chrome Android 50+
Safari iOS 11.3+
Firefox Android 85+

基本構文

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">

実務での使いどころ

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

    preload。重要なリソースを事前に読み込むリソースヒント。

注意点

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

アクセシビリティ

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

参考リンク