Preload / Prefetch 生成ツール
preload、prefetch、preconnect、dns-prefetch、modulepreload のリソースヒントリンクタグをリアルタイム検証付きで生成します。
このツールについて
Preload / Prefetch 生成ツールは、Web開発者がリソースヒント用のHTML <link> タグ — preload、prefetch、preconnect、dns-prefetch、modulepreload — を作成できる無料のブラウザベースツールです。手動でリンクタグを記述し、各ヒントタイプに必要な属性を覚える代わりに、シンプルなフォームでリソースを設定すると、正しくフォーマットされた出力が即座に得られます。
リソースヒントは、現代のWebパフォーマンス最適化の重要な要素です。ページが明示的に必要とする前に、リソースのフェッチや接続の確立を開始するようブラウザに指示します。クリティカルCSSやヒーロー画像に適切に配置された <link rel="preload"> は、Largest Contentful Paint（LCP）スコアを数百ミリ秒短縮できます。同様に、Google Fontsや分析サーバーなどのサードパーティオリジンへの <link rel="preconnect"> は、DNSルックアップ、TCPハンドシェイク、TLSネゴシエーションのレイテンシを排除します。
このツールはW3C仕様で定義された5つのリソースヒントタイプすべてをサポートしています。preload と modulepreload では、as 属性（script、style、font、image、fetch、document、audio、video、worker）、crossorigin 属性、MIMEタイプ、レスポンシブプリロード用のメディアクエリ、きめ細かな優先度制御のための fetchpriority 属性を指定できます。ツールはリアルタイムで設定を検証し、フォントプリロードでの crossorigin 属性の忘れや、preloadタグでの as 属性の省略などの一般的なミスを警告します。
出力は2つの形式で利用可能です：<head> セクションに貼り付けるための標準HTML <link> タグと、サーバーサイド設定用のHTTP Link ヘッダー（CDNやHTTP/2サーバープッシュで有用）。組み込みプリセットは最も一般的なシナリオ — Google Fontsプリコネクト、CDNプリコネクト、クリティカルCSSプリロード、ヒーロー画像プリロードなど — をカバーしています。
DevToolboxの全ツールと同様に、すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。SEOに取り組んでいる場合は、メタタグ生成ツールも役立つでしょう。
使い方
- リソースを追加をクリックするか、Common Presetを選択して開始します。「Google Fonts Preconnect」や「Hero Image Preload」などのプリセットはフィールドを自動的に入力します。
- リソースのURLまたはオリジンを入力します。preconnectとdns-prefetchにはオリジンのみ（例：
https://fonts.gstatic.com）を使用します。preloadとprefetchにはフルリソースパスを使用します。 - リソースヒントタイプを選択します — preload、prefetch、preconnect、dns-prefetch、またはmodulepreload。
- preloadとmodulepreloadのas属性を設定します（例：font、style、script、image）。リソースの下に表示される警告を確認します。
- リソースがクロスオリジンの場合、crossoriginを設定します。フォントは同一オリジンリクエストでも常に
crossorigin="anonymous"を必要とします。 - オプションでfetchpriority（high / low / auto）、MIMEタイプ、またはレスポンシブプリロード用のメディアクエリを設定します。
- HTML TagsとHTTP Headerの出力形式を切り替えます。Copy（またはCtrl+Shift+C）をクリックして、生成された出力をクリップボードにコピーします。
よくある質問
preloadとprefetchの違いは何ですか？
preloadは、現在のページに必要なリソースを高優先度でフェッチするようブラウザに指示します。ブラウザはすぐにダウンロードします。prefetchは、将来のナビゲーションでリソースが必要になる可能性が高いことを示し、アイドル時間中に低優先度でダウンロードします。現在のページのクリティカルリソース（CSS、フォント、ヒーロー画像）にはpreloadを、ユーザーが次に訪問する可能性の高いページのリソースにはprefetchを使用します。
preconnectとdns-prefetchはいつ使うべきですか？
ブラウザがすぐにサードパーティオリジンに接続する必要があるとわかっている場合はpreconnectを使用します。DNSルックアップ、TCPハンドシェイク、TLSネゴシエーションを事前に実行します。dns-prefetchはフォールバックとして、または重要度の低いオリジンに使用します — DNSルックアップのみを実行します。一般的なパターンは両方を使用することです：モダンブラウザ用の<link rel="preconnect">とフォールバック用の<link rel="dns-prefetch">。
プリロードされたフォントにcrossorigin属性が必要な理由は？
@font-faceでフェッチされるフォントは、同一オリジンリクエストでもデフォルトでCORSを使用します。crossorigin属性なしでフォントをプリロードすると、ブラウザはそれを2回フェッチします — プリロードから1回（CORSなし）と@font-faceルールから1回（CORSあり）。crossorigin="anonymous"を追加すると、両方のリクエストが一致し、プリロードされたリソースが使用されます。
modulepreloadとは何ですか？
modulepreloadはJavaScript ESモジュール専用のリソースヒントです。as="script"の通常のpreloadとは異なり、modulepreloadはモジュールをフェッチするだけでなく、パースして実行の準備も行います。また、モジュールの静的依存関係もフェッチします。これにより、ESモジュール構文（import/export）を使用するモダンJavaScriptアプリケーションでより効率的になります。
fetchpriority属性は何をしますか？
fetchpriority属性（high、low、auto）は、リソースフェッチの相対的な優先度についてブラウザにヒントを与えます。ヒーロー画像のプリロードにfetchpriority="high"を設定すると、他の画像よりも優先するようブラウザに指示します。重要度の低いプリロードにfetchpriority="low"を設定すると、クリティカルリソースとの競合を防ぐことができます。デフォルトはautoで、ブラウザが判断します。
データは安全ですか？
はい。すべてのタグ生成と検証はクライアントサイドのJavaScriptを使用してブラウザ内で完全に行われます。URL、リソース設定、その他のデータがサーバーに送信されることはありません。内部URL、ステージング環境、その他の機密設定でも安全にお使いいただけます。