loading

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.

Applies to: <img>, <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.

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

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.

Applies to: <img>

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"