HTMLツール

無料 Preloadタグビルダー

フォント、ヒーロー画像、CSS、スクリプトのための正しいpreloadリンクタグを生成します。

ツールを読み込み中...

Preloadタグビルダーとは

Preloadは、ブラウザが通常より早くリソースを発見して取得するように指示します。フォント、ヒーロー画像、重要なCSS、スクリプトの読み込みを高速化します。as属性は必須で、ブラウザにどのタイプのリソースを期待するかを伝えます。asの欠落や不正なcrossoriginはよくある間違いです。

クイックアンサー

Preloadを使用して、パーサーが発見する前に重要なリソース（ヒーロー画像、フォント、ファーストビューCSSなど）を取得します。帯域幅の競合を避けるため、ページごとに少数のリソースのみをプリロードしてください。

Last updated: 2026-05-25

制限事項

Preloadにはas属性が必要です。省略したり誤った値を使用すると、ブラウザがリソースを2回取得する可能性があります。
CDNからのフォントなど、クロスオリジンのプリロードリソースにはcrossorigin属性を含める必要があります。
過剰なプリロードは他のリソースを遅延させ、パフォーマンスを向上させるどころか悪化させる可能性があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

プリロードするリソースタイプ（font、image、CSS、script）を選択します。
リソースのURLまたはファイルパスを入力します。
ツールが選択したタイプに応じて正しいas属性とcrossorigin属性を追加します。
linkタグを他のリソース参照より前にページのheadにコピーします。

主な用途

重要なフォントファイルをプリロードして、最初の描画でテキストが正しく表示されるようにする。
ヒーロー画像をプリロードしてLargest Contentful Paintを改善する。
重要なCSSファイルやJavaScriptモジュールをプリロードしてレンダリングを高速化する。

用途

使用例

例

Webフォントのプリロード

カスタムWebフォントを使用するページで、as='font'とcrossoriginを指定したpreloadタグによりフォントを早期に取得し、FOUT（Flash of Invisible Text）を軽減します。

例

LCP改善のためのヒーロー画像プリロード

ランディングページがas='image'でヒーロー背景画像をプリロードし、Largest Contentful Paintのタイミングを数百ミリ秒短縮します。

よくあるミス

プリロードするリソースが多すぎて帯域幅を浪費する。
必須のas属性なしでpreloadを使用する。
クロスオリジンフォントのプリロードにcrossoriginを含めない。

検証

Chrome DevToolsのNetworkパネルを開き、プリロードされたリソースがリクエストウォーターフォールの早い段階で正しいPriorityで表示されることを確認します。
ブラウザコンソールで、「The resource was already loaded and preload was not used」などのプリロード警告がないか確認します。

比較

preload vs prefetch vs modulepreload

Aspect	preload	prefetch	modulepreload
What it loads	Resources needed for the current page	Resources likely needed for the next navigation	ES module scripts for the current page
When the browser fetches it	Immediately, at high priority during page load	During idle time after the current page finishes loading	Immediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best for	Critical fonts, hero images, above-the-fold CSS	Next-page resources such as docs, images, or scripts for the likely next page	ES module entry points and their dependency trees in modern bundler output
Required attributes	rel="preload" and the as attribute	rel="prefetch"	rel="modulepreload"
Browser support milestone	Chrome 50+, Safari 9+, Firefox 56+	Chrome 50+, Safari 9+, Firefox 2+	Chrome 80+, Safari 15+, Firefox 115+

Preload fetches current-page resources early at high priority. Prefetch fetches likely next-page resources during idle time. Modulepreload is a specialized preload for ES module scripts and their dependencies.

FAQ

PreloadタグビルダーのFAQ

preloadとprefetchの違いは何ですか？

Preloadは現在のページに必要なリソースを可能な限り早期に取得します。Prefetchは次のナビゲーションで必要になる可能性が高いリソースを取得します。

すべてをプリロードすべきですか？

いいえ。本当に重要な少数のリソースのみをプリロードしてください。プリロードヒントが多すぎると、重要なリソースが遅延します。

すべてのpreloadリンクにas属性は必要ですか？

はい。as属性はpreloadリンクに必須です。ブラウザに読み込まれるリソースのタイプ（style、script、font、image、fetchなど）を伝え、適切な優先順位付け、Content-Security-Policyチェック、キャッシュルールを適用できるようにします。as属性のないpreloadはブラウザに無視され、コンソール警告が表示されます。

プリロードしたリソースが数秒以内に使用されないとどうなりますか？

ブラウザはコンソール警告を発行し、プリロードされたリソースは破棄される可能性があります。未使用のプリロードは帯域幅を浪費し、本当に重要なリソースと競合します。プリロードを開始してから約3秒以内に、プリロードされたリソースがページによって消費されることを必ず確認してください。Chrome DevToolsのConsoleパネルとNetworkパネルにプリロード警告が表示されます。