pictuary
CompressResizeSocial Media
BlogSize GuideGlossary

← Glossary

web performance and seo

fetchpriority

An HTML attribute that tells browsers to download critical images before other resources.

What is fetchpriority?

Fetchpriority is an HTML attribute that instructs browsers to prioritize the download of specific resources, most importantly the hero image that determines Largest Contentful Paint (LCP) performance. The attribute accepts three values: `fetchpriority="high"` for critical resources, `fetchpriority="low"` for deprioritized content, and `fetchpriority="auto"` for default browser behavior. When applied to above-the-fold images, fetchpriority overrides browser heuristics that often assign images lower priority than JavaScript and CSS files.

Importance of fetchpriority

Without fetchpriority, browsers may delay downloading your hero image while fetching lower-priority resources, causing poor LCP scores and slower perceived page load times. Adding fetchpriority="high" to your LCP image ensures it downloads alongside critical CSS and JavaScript, directly improving Core Web Vitals performance. This single HTML attribute change can reduce LCP times by hundreds of milliseconds without requiring image compression or file size optimization.

fetchpriority in Practice

The Google Flights team documented a 700-millisecond LCP improvement by adding fetchpriority="high" to their hero image element. This represents a substantial performance gain from changing a single line of HTML code. The attribute works in Chrome 101+, Firefox 132+, Edge 101+, and Safari 17.2+, covering approximately 90% of global browsers as of 2026.

fetchpriority Best Practices

  • → Add fetchpriority="high" to every above-the-fold hero image that serves as your LCP element.
  • → Combine fetchpriority="high" with loading="eager" and explicit width/height attributes for maximum effectiveness.
  • → Never apply both fetchpriority="high" and loading="lazy" to the same image as they contradict each other.

Example of fetchpriority

An e-commerce product page adds fetchpriority="high" to its main product photo (1200x800 pixels, 180KB JPEG file) that appears above the fold. Before the change, the image loaded after 2.1 seconds as browsers prioritized CSS and JavaScript files first. After adding the fetchpriority attribute, the same image loads in 1.4 seconds, improving the page's LCP score by 700 milliseconds and moving it from "Needs Improvement" to "Good" in Core Web Vitals.

Related Terms

LCP (Largest Contentful Paint)Hero imageAbove the foldLazy loadingCLS (Cumulative Layout Shift)Core Web VitalsImage SEOsrcset attribute

Frequently Asked Questions

what is fetchpriority in HTML

Fetchpriority is an HTML attribute that tells browsers which resources to download first during page loading. It accepts three values: "high" for critical resources like hero images, "low" for less important content, and "auto" for default browser behavior. The attribute is most effective when applied to above-the-fold images that determine your page's LCP performance.

does fetchpriority high improve LCP

Yes, fetchpriority="high" on hero images significantly improves LCP times by ensuring critical images download alongside high-priority CSS and JavaScript files. Google's own Flights team documented a 700-millisecond LCP improvement from this single attribute change. The attribute works by overriding browser heuristics that typically assign images lower download priority than other resources.

should I use fetchpriority high on hero images

Yes, you should add fetchpriority="high" to every above-the-fold hero image that serves as your page's LCP element. This ensures the critical image downloads immediately rather than waiting for other resources to complete first. Combine it with loading="eager" and explicit dimensions for maximum performance benefit, but never use it with loading="lazy" as they contradict each other.