preloadタグ生成

リソースヒント（Resource Hints）は、ブラウザにリソースの事前読み込みや接続の事前確立を指示するHTML link要素です。

preload は現在のページで確実に使用するリソースを高優先度で事前読み込みし、prefetch は次のページで使う可能性のあるリソースを低優先度で事前読み込みします。preconnect は外部ドメインへのTCP接続・TLSハンドシェイクを事前に完了し、dns-prefetch はDNS解決のみを事前に行います。modulepreload はESモジュールの事前読み込みに特化しています。

これらを適切に設定することで、Core Web Vitals（LCP・FID・CLS）の改善やページ表示速度の向上につながります。特にフォントリソースはcrossorigin属性の設定が必須で、指定しないとブラウザが二重フェッチを行うため要注意。レスポンシブ画像ではimagesrcsetとimagesizesを活用することで、デバイスに応じた最適なリソースの事前読み込みが可能です。

このツールでは、rel属性の種類を選択し、URLや対象リソースの種類（as属性）、MIMEタイプ、crossorigin属性などを設定するだけで、正しいlink要素を生成します。フォント・fetchリソースのcrossorigin属性、imagesrcsetとimagesizesの連動チェックなど、バリデーション機能も搭載。複数のタグをまとめて管理し、一括コピーすることも可能です。