Web リソースヒントジェネレーター
正しい <link rel> リソースヒントタグ (preload、prefetch、preconnect、dns-prefetch、modulepreload) と同等の HTTP Link ヘッダーをリソースのプレーンリストから生成し、自動的に as= と crossorigin のガイダンスを提供します。
入力
1行に1つのリソース: url | hint type | resource type (as=) | crossorigin | media。url と hint type のみが必須で、後続フィールドは省略できます。Hint types: preload、prefetch、preconnect、dns-prefetch、modulepreload。# で始まる行は無視されます。
出力
自動的に適用される修正 (フォントへの crossorigin 追加など) と確認する価値のあることすべて。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"resources": "https://fonts.gstatic.com | preconnect | | anony…"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/web-resource-hints-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Web リソースヒントジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
Web リソースヒントジェネレーターは、リソースのプレーンリストを正しくフォーマットされた HTML <link rel> タグと preload、prefetch、preconnect、dns-prefetch、modulepreload に相当する HTTP Link: ヘッダーに変換します。ブラウザが実際に適用する属性ルール（preload の as=、フォントの crossorigin）を自動的に適用し、何が変更されたかを教えてくれます。
ツールの使用方法
以下の形式で1行に1つのリソースを入力します：
url | hint type | resource type | crossorigin | media必須なのは URL と hint type のみです。後続フィールドは省略できます。例えば：
https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | fontこのツールは HTML <link> タグ（<head> 用）と同等の HTTP Link: ヘッダー行（サーバーレベルの設定用。header ヒントは HTML が解析される前に適用されます）の両方を生成します。あなたのセットアップで使用するどちらかの形式をコピーしてください。
ヒントタイプ
preload— このページが確実に必要とするリソースを高優先度でフェッチします。レンダリングをブロックしません。as=が必須です。prefetch— 将来の ナビゲーションが必要とする可能性が高いリソースを低優先度でフェッチします。アイドル時に行われます。preconnect— クロスオリジンホストへの接続（DNS + TCP + TLS）をあらかじめ開きます。まだ何もフェッチしません。dns-prefetch— ホストの DNS をあらかじめ解決します。preconnectをサポートしないブラウザーの安価な代替手段です。modulepreload— JavaScript モジュールとその依存関係グラフをプリロードします。
as= と crossorigin が重要な理由
対応する as= 値（script、style、image、font、fetch、document、audio、video、track、worker、embed、object、manifest）のない preload は、ブラウザーが最終的なリクエストとの照合方法を判断できないため、間違った優先度でフェッチされるか、完全に無視されます。特にフォントは、同一オリジンであっても CORS モードでフェッチする必要があります。このツールは as=font 行に対して自動的に crossorigin を追加し、ガイダンスパネルで理由を説明します。
ツールが値なしで crossorigin を追加することがあるのはなぜですか？
値のない crossorigin 属性（="anonymous" なし）は、匿名モード CORS の標準的な短縮形です。ブラウザー自体が独自のプリロード例で使用する形式です。crossorigin="use-credentials" を明示的に使用するのは、リソースがクッキーまたは HTTP 認証を必要とする場合のみです。
HTML タグと HTTP ヘッダー — どちらを使う？
HTTP Link: ヘッダーはブラウザーが HTML の解析を開始する前に検出されるため、<head> に配置された同じ <link> タグよりもわずかに早くヒントできます。CDN またはリバース プロキシーがヘッダーを挿入できる場合、またはサイト全体に適用したい preconnect/dns-prefetch ヒントの場合に便利です。それ以外の場合、HTML タグはそれがサポートするマークアップの隣に存在するため、メンテナンスがより簡単です。
ライブサイトが既に送信しているヘッダーを確認するには、HTTP ヘッダー アナライザーを使用してください。関連する HSTS セキュリティヘッダーについては、HSTS プリロード ヘッダー ジェネレーターを参照してください。新しいヘッダーのヒント作成ではなく古い URL をリダイレクトするには、リダイレクト ルール ジェネレーターを参照してください。