HTMLツール

無料 Fetch Priority属性ジェネレーター

Core Web Vitalsを改善するためのfetchpriority属性を画像、スクリプト、リンクタグに生成します。

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

Fetch Priority属性ジェネレーターとは

Fetchpriorityは、ブラウザに対してどのリソースをより早く読み込むべきかをヒントとして伝えるHTML属性です。ヒーロー画像に適用するとLargest Contentful Paintの改善に役立ち、重要でないリソースの優先度を下げることもできます。preloadやloading='lazy'とは異なります。画像、スクリプト、スタイルシートの相対的な重要度をブラウザに伝えるために使用します。

クイックアンサー

fetchpriority='high'は、最もLargest Contentful Paint要素になりそうな画像またはリソース1つだけに使用します。多くのリソースを高優先度に設定しないでください。ブラウザが読み込み順序を決定します。

Last updated: 2026-05-25

制限事項

fetchpriorityはヒントであり、指示ではありません。ブラウザはヒューリスティックに基づいて無視する可能性があります。
Safari 15.4以前を含む古いブラウザはfetchpriorityをサポートしていません。
多くのリソースにfetchpriority='high'を使いすぎるとヒントが希釈され、読み込みパフォーマンスが改善されない可能性があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

リソースタイプ（image、script、linkタグ）を選択します。
ユースケース（LCPヒーロー画像、ファーストビュー外のコンテンツ、非重要スクリプト）を選択します。
ツールが選択に基づいてfetchpriorityの値を推奨します。
生成されたタグをコピーし、LighthouseでテストしてLCPの改善を確認します。

主な用途

LCPヒーロー画像にfetchpriority='high'を適用して読み込みを高速化する。
ファーストビュー外の画像にfetchpriority='low'で優先度を下げる。
レンダリングをブロックする重要なスクリプトやスタイルシートの優先度を上げる。

用途

使用例

例

LCPヒーロー画像の最適化

LCP要素であるヒーロー画像にfetchpriority='high'と最適化されたsrcsetを設定します。ブラウザはこの画像を他のリソースより先に読み込みます。

例

低優先度のフッター画像

フッター画像やサードパーティ埋め込みにfetchpriority='low'を設定し、ファーストビューの重要なリソースとの競合を減らします。

よくあるミス

多くのリソースにfetchpriority='high'を適用すると、その効果が相殺されます。
プリロード済みリソースにfetchpriorityを使用する。プリロードタグにはすでに適用されています。
fetchpriorityを適切なloading属性やdecoding属性と組み合わせるのを忘れる。

検証

Chrome DevToolsのNetworkパネルを開き、Priority列を確認してfetchpriorityヒントがブラウザの読み込み順序に反映されていることを確認します。
Performanceパネルを使用して、属性ありとなしでLCPタイミングを比較し、実際の改善を確認します。

比較

fetchpriority vs loading="lazy"

Aspect	fetchpriority	loading="lazy"
What it controls	Relative loading priority of a resource compared to other resources on the same page	Whether the browser delays loading the resource until it is near the viewport
When to use	On the LCP element to load it sooner, or on non-critical resources to deprioritize them	On images and iframes below the fold to defer their load until the user scrolls near them
Effect on LCP	Can improve LCP when set to high on the hero image	Can worsen LCP if applied above the fold. Only use below the fold.
Valid on which elements	img, link, script, iframe	img, iframe
Browser support	Chrome 101+, Edge 101+, Safari 16+, Firefox 122+	Chrome 77+, Edge 79+, Safari 15.4+, Firefox 75+

fetchpriority hints at relative priority for loading while loading="lazy" defers loading until the element is near the viewport. They address different performance concerns and can be used together on the same element.

FAQ

Fetch Priority属性ジェネレーターのFAQ

いくつのリソースにfetchpriority='high'を設定すべきですか？

多くても1つまたは2つの重要なリソースに限定します。すべてが高優先度では、何も優先されません。

fetchpriorityは読み込みを保証しますか？

いいえ、これはヒントです。ブラウザは多くの要因に基づいて最終的な読み込み順序を決定します。

fetchpriority="high"が最も効果的なリソースは？

LCP画像（通常はページ読み込み時に表示される最大のヒーロー画像）、ファーストビューコンテンツをスタイリングするメインCSSファイル、最初に表示されるテキストで使用される重要なWebフォントです。高優先度は1つか2つのリソースにのみ設定してください。複数のリソースが高優先度を競合すると、ブラウザは依然として順序付けを行う必要があり、ヒントの目的が損なわれます。

fetchpriority="low"はいつ使用すべきですか？

ファーストビューよりかなり下の画像、アナリティクススクリプト、サードパーティのチャットウィジェット、ソーシャルメディア埋め込みなど、初期ページレンダリングに寄与しないリソースにlow優先度を使用します。これにより、ブラウザはロードイベントをブロックせずに、より重要なアセットを優先してこれらのリソースを遅延させることができます。