jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

HTMLツール

Fetch Priority属性ジェネレーター

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

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

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

Fetch Priority属性ジェネレーターは、Core Web Vitalsを改善するためのfetchpriority属性を画像、スクリプト、リンクタグに生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。

Quick answer

Use fetchpriority='high' only for the one image or resource most likely to become the Largest Contentful Paint element. Do not mark many resources as high priority -- the browser still decides loading order.

Limitations

  • fetchpriority is a hint, not a directive. The browser may ignore it based on heuristics.
  • Older browsers including Safari 15.4 and below do not support fetchpriority.
  • Overusing fetchpriority='high' on many resources dilutes the hint and may not improve loading performance.

使い方

  1. 必要な値を入力します。
  2. 結果パネルの出力を確認します。
  3. ページに合う部分だけコピーします。
  4. 公開前にブラウザとホスティング環境で確認します。

主な用途

  • 公開前の繰り返し作業を短くする。
  • マークアップ、CSS、チェックリストを準備する。
  • 静的サイトで見落としやすい小さなミスを減らす。

よくあるミス

  • 出力を確認せず本番に入れる。
  • 公開URLではなくローカルURLを使う。
  • build後に公開フォルダ内のファイルを確認しない。

Verification

  1. Open Chrome DevTools Network panel and inspect the Priority column to confirm the fetchpriority hint is reflected in the browser loading order.
  2. Compare LCP timing with and without the attribute using the Performance panel to verify actual improvement.

Comparison

fetchpriority vs loading="lazy"

Aspectfetchpriorityloading="lazy"
What it controlsRelative loading priority of a resource compared to other resources on the same pageWhether the browser delays loading the resource until it is near the viewport
When to useOn the LCP element to load it sooner, or on non-critical resources to deprioritize themOn images and iframes below the fold to defer their load until the user scrolls near them
Effect on LCPCan improve LCP when set to high on the hero imageCan worsen LCP if applied above the fold. Only use below the fold.
Valid on which elementsimg, link, script, iframeimg, iframe
Browser supportChrome 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

Fetch Priority属性ジェネレーターはブラウザ内で動きますか？

はい。現在のツールはブラウザで出力を生成する設計です。

出力のテストは必要ですか？

はい。テンプレート、ブラウザ、ホスティング設定に合わせて必ず確認してください。

関連ツール

その他のhtmlツール

こちらもお試しください

こちらもお試しください