【HTML Living Standard】preload属性値の使い方
preload属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
preload属性は、HTML要素が参照する外部リソースの事前読み込みに関する設定を保持する属性です。この属性は、主に<audio>要素や<video>要素でメディアファイルのダウンロード動作を制御したり、<link>要素で他の種類のリソースを事前に読み込んだりする際に使用されます。
<audio>要素や<video>要素にpreload属性を指定することで、ブラウザがメディアファイルをどのようにダウンロードすべきかを指示できます。例えば、ユーザーが再生する可能性のあるメディアファイルについて、再生開始時に必要なメタデータ（ファイルサイズ、持続時間など）のみをダウンロードするのか、それとも帯域幅を考慮して可能な限りダウンロードしないのか、あるいは自動再生に備えてメディアファイル全体をダウンロードするのか、といった戦略を設定します。これにより、ユーザーのネットワーク帯域幅の消費を抑えたり、再生までの待ち時間を短縮したりすることが可能となります。
一方、<link rel="preload">のようにrel属性と組み合わせて使用する場合、preloadはブラウザに、現在のページのレンダリングに必要なリソース（スタイルシート、スクリプト、フォント、画像など）を、ページの他のリソースよりも高い優先度で、バックグラウンドで事前に読み込むよう指示します。これは、ユーザーがページを閲覧する際に、後で必要となるリソースを先んじて準備しておくことで、実際の表示速度を向上させ、パフォーマンスボトルネックを軽減することを目的としています。
preload属性を適切に利用することで、Webページのロード時間短縮やユーザー体験の向上が期待できます。ただし、不必要なリソースの事前読み込みはネットワーク帯域を無駄に消費し、かえってパフォーマンスを低下させる原因にもなりかねません。そのため、ページの主要なコンテンツや機能にとって本当に不可欠なリソースに限定して慎重に適用することが重要です。
構文(syntax)
1<video src="movie.mp4" preload="auto"></video>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML preload属性でリソースを事前読み込みする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Preload Attribute Example</title> 7 8 <!-- 9 preload属性は、ブラウザにリソースを早めに読み込むよう指示します。 10 これにより、ページの表示速度が向上する可能性があります。 11 as属性でリソースの種類を指定することが重要です。 12 --> 13 14 <!-- スタイルシートを事前に読み込む例 --> 15 <link rel="preload" href="styles/main.css" as="style"> 16 <!-- JavaScriptファイルを事前に読み込む例 --> 17 <link rel="preload" href="scripts/app.js" as="script"> 18 <!-- フォントを事前に読み込む例 (crossoriginが必要な場合があります) --> 19 <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> 20 <!-- 画像を事前に読み込む例 --> 21 <link rel="preload" href="images/hero.webp" as="image"> 22 23 <!-- 実際のスタイルシートの適用 --> 24 <link rel="stylesheet" href="styles/main.css"> 25</head> 26<body> 27 <h1>Preload属性の利用例</h1> 28 <p>このページでは、<code><link rel="preload"></code> を使用して、重要なリソースを事前に読み込み、ページのパフォーマンスを向上させています。</p> 29 30 <!-- 事前読み込みした画像を表示 --> 31 <img src="images/hero.webp" alt="ヒーロー画像" width="600"> 32 33 <!-- 実際のJavaScriptの適用 --> 34 <script src="scripts/app.js"></script> 35</body> 36</html>
HTMLのpreload属性は、Webページの表示速度を改善するため、ブラウザに重要なリソースを事前に読み込むよう指示する機能です。これは、<link>要素のrel属性にpreloadと指定して利用します。
preload属性自体に引数や戻り値はありませんが、読み込むリソースのURLをhref属性で、その種類をas属性で必ず指定します。as属性には、style（スタイルシート）、script（JavaScript）、image（画像）、font（フォント）といった正確なタイプを指定することが重要です。
サンプルコードでは、CSSやJavaScript、フォント、画像といった多様なリソースの事前読み込み例が示されています。これにより、ブラウザはHTMLの解析中にこれらのファイルを先行してダウンロードするため、実際にリソースが必要になった際にすぐに利用可能となります。結果として、ページの描画が迅速に進み、ユーザーはコンテンツをより早く閲覧できるようになり、Webページの初回表示を高速化できます。フォントのように異なるオリジンから読み込むリソースの場合、crossorigin属性の指定も必要となることがあります。
preload属性を利用する際は、as属性で読み込むリソースの種類（スタイルシート、スクリプト、画像など）を正確に指定することが非常に重要です。この指定を誤ると、ブラウザがリソースを正しく処理できず、意図したパフォーマンス向上効果が得られない場合があります。特にフォントファイルなど、異なるオリジン（ドメイン）からリソースを読み込む際には、セキュリティの都合上、crossorigin属性の指定が必要となることがありますので注意してください。preloadはあくまでリソースの先読みを指示するものであり、実際にページで利用するためには、別途適切なHTML要素（例：<link rel="stylesheet">や<img>）を記述する必要がある点も押さえておきましょう。闇雲に多用すると、かえって初期表示の遅延を招く恐れがあるため、本当に必要なクリティカルなリソースに絞って計画的に利用することをおすすめします。
HTML preload属性でリソースを先読みする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>preload属性のサンプル</title> 7 8 <!-- 9 preload属性は、ブラウザにページで必要となる重要なリソースを 10 ページの描画を開始する前に、事前に（バックグラウンドで）読み込むよう指示します。 11 これにより、ページの表示速度（特に初回描画速度）を向上させることができます。 12 as属性は、読み込むリソースの種類（例: style, script, font, image）を指定するために必須です。 13 --> 14 15 <!-- 1. スタイルシート（CSS）ファイルの先読み --> 16 <!-- rel="preload"でリソースを先読みし、as="style"でCSSファイルであることを指定します。 --> 17 <!-- 注意: preloadだけではCSSは適用されません。実際に適用するにはrel="stylesheet"が必要です。 --> 18 <link rel="preload" href="path/to/main.css" as="style"> 19 <link rel="stylesheet" href="path/to/main.css"> 20 21 <!-- 2. JavaScriptファイルの先読み --> 22 <!-- rel="preload"でリソースを先読みし、as="script"でJavaScriptファイルであることを指定します。 --> 23 <!-- 注意: preloadだけではスクリプトは実行されません。実際に実行するには<script>タグが必要です。 --> 24 <link rel="preload" href="path/to/app.js" as="script"> 25 <script src="path/to/app.js" defer></script> 26 27 <!-- 3. カスタムフォントファイルの先読み --> 28 <!-- rel="preload"でリソースを先読みし、as="font"でフォントファイルであることを指定します。 --> 29 <!-- フォントは通常、異なるドメインから読み込まれる可能性があるため、crossorigin属性が必要です。 --> 30 <link rel="preload" href="path/to/custom-font.woff2" as="font" crossorigin> 31 <!-- 実際にフォントを適用するにはCSSの@font-faceルールを使用します。 --> 32 <style> 33 @font-face { 34 font-family: 'Custom Web Font'; 35 src: url('path/to/custom-font.woff2') format('woff2'); 36 font-weight: normal; 37 font-style: normal; 38 } 39 body { 40 font-family: 'Custom Web Font', sans-serif; 41 } 42 </style> 43 44 <!-- 4. 画像ファイルの先読み（例: ページのファーストビューに表示される大きな画像） --> 45 <!-- rel="preload"でリソースを先読みし、as="image"で画像ファイルであることを指定します。 --> 46 <link rel="preload" href="path/to/hero-image.jpg" as="image"> 47</head> 48<body> 49 <h1>preload属性を利用したリソースの先読みの例</h1> 50 <p>このページでは、<code>preload</code>属性を使用して、表示に必要なリソース（CSS、JavaScript、フォント、画像）を事前に読み込んでいます。</p> 51 52 <!-- 先読みした画像を表示 --> 53 <img src="path/to/hero-image.jpg" alt="ページのメイン画像" style="max-width: 100%; height: auto;"> 54 55 <p>このテキストは、先読みされたカスタムフォント「Custom Web Font」で表示されているはずです。</p> 56 57 <script> 58 // path/to/app.jsが読み込まれた後に実行されるスクリプトの例 59 // 実際にはapp.js内にコードを記述します。 60 // console.log("JavaScriptファイルが読み込まれ、実行されました。"); 61 </script> 62</body> 63</html>
HTMLのpreload属性は、ウェブページが表示される前に、ブラウザが重要なリソースを事前に読み込むよう指示するための機能です。これにより、ページの読み込み速度、特に初回表示速度を大幅に向上させ、ユーザーがコンテンツをより早く閲覧できるようになります。
この属性は主に<link>タグのrel属性値として使用されます。preload属性を使う際には、as属性で読み込むリソースの種類（例えば、スタイルシートならstyle、JavaScriptファイルならscript、カスタムフォントならfont、画像ならimage）を必ず指定する必要があります。これにより、ブラウザはリソースの種類を正しく認識し、適切な優先度で処理できます。
preloadはあくまでリソースを「先読み」するだけであり、それ単独でリソースがページに適用されたり、スクリプトが実行されたりするわけではありません。例えば、CSSファイルを先読みした場合は、別途<link rel="stylesheet">タグで参照して初めてスタイルが適用されます。同様に、JavaScriptファイルの場合は<script>タグ、フォントの場合はCSSの@font-faceルール、画像の場合は<img>タグなど、それぞれのリソースを実際に利用するためのHTML要素やCSSルールが別途必要です。preload属性自体に引数や戻り値はありません。これは<link>要素のrel属性に設定するキーワードの一つとして機能するためです。適切なリソースを効率的に先読みすることで、ウェブサイトのパフォーマンスを最適化できます。
preload属性は、ページの表示速度、特に初回描画速度を向上させるため、ブラウザに重要なリソースを事前に読み込むよう指示します。この属性を使う際の最も重要な注意点は、preloadが単なる「先読み」の指示であることです。CSSやJavaScript、画像などをpreloadしても、それだけではページに適用・実行されません。CSSであれば<link rel="stylesheet">、JavaScriptであれば<script>タグなど、別途そのリソースを実際に利用するための記述が必要です。また、as属性で読み込むリソースの種類（style, script, font, imageなど）を必ず正確に指定してください。フォントのように別ドメインから読み込む場合は、crossorigin属性も忘れずに指定しましょう。