HTMLツール

Preloadタグビルダー

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

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

Preloadタグビルダーとは

Preloadタグビルダーは、フォント、ヒーロー画像、CSS、スクリプトのための正しいpreloadリンクタグを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。

Quick answer

Use preload to fetch critical resources -- such as hero images, fonts, or above-the-fold CSS -- before the parser discovers them. Only preload a few resources per page to avoid bandwidth contention.

Limitations

  • Preload requires the as attribute. Omitting it or using an incorrect value may cause the browser to fetch the resource twice.
  • Cross-origin preloaded resources such as fonts from a CDN must include the crossorigin attribute.
  • Excessive preloading delays other resources and can hurt performance instead of helping.

使い方

  1. 必要な値を入力します。
  2. 結果パネルの出力を確認します。
  3. ページに合う部分だけコピーします。
  4. 公開前にブラウザとホスティング環境で確認します。

主な用途

  • 公開前の繰り返し作業を短くする。
  • マークアップ、CSS、チェックリストを準備する。
  • 静的サイトで見落としやすい小さなミスを減らす。

よくあるミス

  • 出力を確認せず本番に入れる。
  • 公開URLではなくローカルURLを使う。
  • build後に公開フォルダ内のファイルを確認しない。

Verification

  1. Open Chrome DevTools Network panel and verify the preloaded resource appears early in the request waterfall with the correct Priority.
  2. Check the browser console for missing preload warnings such as 'The resource was already loaded and preload was not used'.

Comparison

preload vs prefetch vs modulepreload

Aspectpreloadprefetchmodulepreload
What it loadsResources needed for the current pageResources likely needed for the next navigationES module scripts for the current page
When the browser fetches itImmediately, at high priority during page loadDuring idle time after the current page finishes loadingImmediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best forCritical fonts, hero images, above-the-fold CSSNext-page resources such as docs, images, or scripts for the likely next pageES module entry points and their dependency trees in modern bundler output
Required attributesrel="preload" and the as attributerel="prefetch"rel="modulepreload"
Browser support milestoneChrome 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タグビルダーはブラウザ内で動きますか?

はい。現在のツールはブラウザで出力を生成する設計です。

出力のテストは必要ですか?

はい。テンプレート、ブラウザ、ホスティング設定に合わせて必ず確認してください。

関連ツール

その他のhtmlツール

こちらもお試しください

こちらもお試しください