Ottimizza la priorità delle immagini

I browser utilizzano l'euristica per assegnare le priorità di caricamento alle immagini, ma queste impostazioni predefinite potrebbero non essere sempre in linea con il Largest Contentful Paint (LCP) della pagina.

L'utilizzo di fetchpriority su un elemento <img> ti consente di segnalare esplicitamente l'importanza di un'immagine al browser, garantendo un caricamento più rapido delle immagini fondamentali, mentre quelle non essenziali non competono per la larghezza di banda.

L'attributo loading=lazy impedisce del tutto il download delle immagini quando sono sufficientemente fuori schermo, il che può contribuire ulteriormente a dare priorità alle immagini.

Come implementare

1. Identifica l'immagine LCP: determina quale immagine è la candidata più probabile per il Largest Contentful Paint (di solito l'immagine hero nella parte superiore della pagina).
2. Aumenta la priorità dell'LCP: aggiungi fetchpriority="high" all'elemento <img> per il candidato LCP.
3. Riduci la priorità delle immagini non critiche: per le immagini che fanno parte di una UI secondaria o che vengono visualizzate solo dopo l'interazione dell'utente (come mega menu, finestre modali o slide di caroselli fuori schermo), aggiungi fetchpriority="low".
4. Ottimizza il caricamento lento: non utilizzare mai loading="lazy" sull'immagine LCP. Per le immagini standard below the fold, loading="lazy" è sufficiente per posticipare la richiesta finché l'utente non scorre vicino alle immagini. Evita di aggiungere fetchpriority="low" a queste immagini, poiché vuoi che vengano caricate con priorità normale quando l'utente le scorre. Riserva fetchpriority="low" per le immagini che sono tecnicamente "above the fold", ma non inizialmente visibili (ad es. slide di caroselli nascoste o mega menu). Per queste immagini nascoste, è accettabile utilizzare anche loading="lazy"; il browser gestirà i tempi della richiesta rispettando la priorità bassa.
5. Preferisci le priorità predefinite: se un'immagine deve avere una priorità di caricamento normale, ometti completamente l'attributo fetchpriority anziché impostarlo su auto. Si tratta di una convenzione stilistica per mantenere il codice HTML più pulito, basandosi al contempo sull'euristica nativa del browser.

Esempio di codice

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Best practice

• OBBLIGATORIO: applica sempre fetchpriority="high" all'immagine LCP.
• OBBLIGATORIO: utilizza fetchpriority="high" solo su un massimo di 1-2 immagini critiche per evitare la congestione della rete e la diluizione dell'aumento della priorità.
• OBBLIGATORIO: utilizza fetchpriority="low" per le immagini che sono tecnicamente "above the fold", ma inizialmente nascoste (ad es. slide di carosello nascoste, immagini di mega menu).
• OBBLIGATORIO: non utilizzare fetchpriority="low" su immagini standard below-the-fold che utilizzano già loading="lazy". Queste immagini dovrebbero essere caricate con priorità normale una volta entrate nell'area visibile.
• CONSIGLIATO: evita di utilizzare fetchpriority="auto". Se vuoi la priorità predefinita, ometti completamente l'attributo per mantenere pulito il codice HTML.
• NON combinare fetchpriority="high" con loading="lazy".
• NON utilizzare l'attributo importance deprecato. È stato sostituito da fetchpriority e non è supportato da nessun browser.
• NON utilizzare il valore loading="auto" obsoleto. Inizialmente era supportato da Chrome, ma è stato rimosso e non è supportato da alcun browser.

Strategia di riserva

L'attributo fetchpriority è un potenziamento progressivo per l'elemento <img>. Se un browser non lo supporta, l'attributo viene ignorato e il browser utilizza le sue euristiche di priorità predefinite.