jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Fetch Priority Attribute Generator

Add fetchpriority='high' or fetchpriority='low' to img, link, and script tags based on use case. Get recommended combos for LCP images, below-the-fold content, and non-critical resources.

Loading tool...

What is Fetch Priority Attribute Generator?

Fetchpriority is an HTML attribute that hints to the browser which resources to load sooner. It helps improve Largest Contentful Paint when applied to hero images and can de-prioritize non-critical resources. It is different from preload and loading='lazy'. Use it to signal relative importance of images, scripts, and stylesheets to the browser.

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.

How to use this tool

  1. Select the resource type: image, script, or link tag.
  2. Choose the use case: LCP hero image, below-the-fold content, or non-critical script.
  3. The tool recommends the fetchpriority value based on your selection.
  4. Copy the generated tag and test with Lighthouse to confirm LCP improvement.

What you can use it for

  • Apply fetchpriority='high' to the LCP hero image for faster loading.
  • De-prioritize below-the-fold images with fetchpriority='low'.
  • Prioritize critical scripts and stylesheets that block rendering.

Use cases

Practical examples

Example

LCP hero image optimization

A hero image that is the LCP element gets fetchpriority='high' plus an optimized srcset. The browser loads this image before other resources.

Example

Low-priority footer images

Footer images and third-party embeds get fetchpriority='low' to reduce contention with critical resources above the fold.

Common mistakes

  • Applying fetchpriority='high' to many resources which cancels the benefit.
  • Using fetchpriority on preloaded resources where it already applies to the preload tag.
  • Forgetting to combine fetchpriority with appropriate loading and decoding attributes.

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

Questions about Fetch Priority Attribute Generator

How many resources should get fetchpriority='high'?

One or two critical resources at most. If everything is high priority, nothing is.

Does fetchpriority guarantee faster loading?

No, it is a hint. The browser decides the final loading order based on many factors.

Related tools

More html tools

Also try

Also try