loading

Lazy loading, fetch priority, and image decoding hints. Three attributes that work as a set to control how and when the browser loads resources.

Overview

Three native attributes control when and how the browser fetches resources. Used together, they form a performance strategy:

  • loading controls when a resource starts loading
  • fetchpriority controls how urgently a resource is fetched relative to others
  • decoding controls whether image decoding blocks rendering

loading

Defers resource loading until the element is near the viewport. Use loading="lazy" on images and iframes below the fold.

ValueBehavior
eagerLoad immediately (the default)
lazyDefer loading until near the viewport

Applies to: <img>, <iframe>

<img src="hero.jpg" alt="Hero banner" /> <!-- Below the fold: defer loading until the user scrolls near --> <img src="gallery-1.jpg" alt="Gallery photo 1" loading="lazy" /> <img src="gallery-2.jpg" alt="Gallery photo 2" loading="lazy" /> <!-- Lazy-load an iframe --> <iframe src="/embed/widget" loading="lazy"></iframe>

When Not to Lazy Load

  • Above-the-fold images should load immediately. Lazy-loading your LCP image delays it.
  • Small images (icons, avatars) have little to gain from lazy loading.
  • Background images in CSS are not affected by the loading attribute.

fetchpriority

Tells the browser how important a resource is relative to others of the same type. The browser already assigns default priorities; this attribute lets you override them.

ValueBehavior
highFetch at higher priority than normal
lowFetch at lower priority than normal
autoLet the browser decide (the default)

Applies to: <img>, <link>, <script>, <iframe>

<!-- LCP image: fetch as fast as possible --> <img src="hero.jpg" alt="Hero" fetchpriority="high" /> <!-- Carousel images not initially visible: lower priority --> <img src="slide-2.jpg" alt="Slide 2" fetchpriority="low" loading="lazy" /> <img src="slide-3.jpg" alt="Slide 3" fetchpriority="low" loading="lazy" /> <!-- Preload a critical font --> <link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high" /> <!-- Lower priority for non-critical script --> <script src="/analytics.js" fetchpriority="low"></script>

LCP Optimization

The most common use: add fetchpriority="high" to your Largest Contentful Paint image. This tells the browser to prioritize that image over other resources discovered at the same time.

decoding

Hints whether image decoding should block rendering. Decoding converts the compressed image data into pixels. For large images, this can take noticeable time.

ValueBehavior
asyncDecode off the main thread (non-blocking)
syncDecode synchronously (blocks rendering)
autoLet the browser decide (the default)

Applies to: <img>

<!-- Let the browser decode off the main thread --> <img src="photo.jpg" alt="Large photo" decoding="async" /> <!-- Must render immediately (rare: icons, inline SVG replacements) --> <img src="icon.svg" alt="" decoding="sync" />

Putting It All Together

A typical page uses all three attributes as a system:

  1. Hero/LCP image: fetchpriority="high" + decoding="async"
  2. Below-fold images: loading="lazy" + decoding="async"
  3. Third-party embeds: loading="lazy"
<!-- Hero image: load immediately, high priority, async decode --> <img src="hero.jpg" alt="Hero banner" fetchpriority="high" decoding="async" /> <!-- Below-fold content image: lazy load, async decode --> <img src="content-photo.jpg" alt="Content photo" loading="lazy" decoding="async" /> <!-- Below-fold iframe: lazy load --> <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" loading="lazy" title="Video embed"></iframe>

See Also