preload、preconnect、dns-prefetchジェネレーター

preload、preconnect、dns-prefetchジェネレーター: 用途

resource hintsは<head>内のタグで、ページが必要とするものをブラウザーに伝え、接続やダウンロードを先に進めてもらいます。適度に使えばメインコンテンツが表示されるまでの時間が短くなりますが、使いすぎると逆効果です。

アドレスまたはページのHTMLを貼り付けると、ツールが選びます：重要なドメイン最大3つにはpreconnect（フォントならcrossorigin付き）、残りと分析スクリプトにはdns-prefetch、1〜2個のフォントとメイン画像（fetchpriority=high付き）にだけpreload、次に開かれそうなページにはprefetch。各タグにはその理由が付きます。

使い方

1. アドレスまたはHTMLを貼り付けます。
2. ドメイン、メイン画像、次のページを確認します。
3. タグを<head>にコピーします。

使うタイミング

• Google Fontsを使うサイト。
• 上部に大きな画像があるページ。
• Core Web VitalsのLCPの改善。

よくある質問

preconnectとdns-prefetchの違いは何ですか？

preconnectは、ブラウザーが必要とする前に、他のドメインとの接続全体（DNS、TCP、TLS）を開きます。dns-prefetchはDNSの解決だけで、より軽く、重要度の低いドメイン向けです。preconnectは2〜3個の少数のドメインに使い、残りにはdns-prefetchを使います。

preloadはいつ使いますか？

ブラウザーが発見するのが遅い重要なリソースにだけ使います。たとえば、見出しのフォント（CSSの中に隠れている）や、CSSで背景として指定したメイン画像です。preloadが多すぎると、重要なものと帯域を奪い合い、サイトが遅くなります。

なぜフォントにcrossoriginが必要なのですか？

フォントは常にCORSモードで取得されます。preloadやpreconnectにcrossorigin属性がないと、ブラウザーはすでにダウンロードしたものを再利用できず、フォントを2回リクエストしてしまいます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール