Hero image missing fetchpriority

What this means

Orino found an image in a hero or header component file that has no fetchpriority="high" attribute (or priority prop in Next.js). Without a priority hint, the browser treats the image as a normal-priority resource and may fetch stylesheets, fonts, or other images first. For the element that will become the LCP, that delay is unnecessary and costs real time.

How to fix it

Next.js

Add the priority prop to <Image>. This sets fetchpriority="high" and disables lazy loading.

import Image from 'next/image'

// before
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} />

// after
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

Astro

Add fetchpriority="high" to the <Image> component. Astro passes HTML attributes through.

---
import { Image } from 'astro:assets'
import heroImage from '../assets/hero.jpg'
---

<!-- before -->
<Image src={heroImage} alt="Hero" />

<!-- after -->
<Image src={heroImage} alt="Hero" fetchpriority="high" />

SvelteKit

Add fetchpriority="high" to the <img> or <enhanced:img> tag.

<!-- before -->
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />

<!-- after -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high" width="1200" height="600" />

Nuxt

Add fetchpriority="high" to <NuxtImg>. You can also set preload to inject a <link rel="preload"> in the document <head>.

<!-- before -->
<NuxtImg src="/hero.jpg" alt="Hero" width="1200" height="600" />

<!-- after -->
<NuxtImg src="/hero.jpg" alt="Hero" fetchpriority="high" width="1200" height="600" preload />

Verify the fix

Re-run the audit:

npx orino audit https://yourdomain.com

In Chrome DevTools Network panel, find the hero image request. The Priority column should show “Highest”.