Dimensione Core/Dash: LCP Priority

Dimensione: Risorsa: LCP Priority

La dimensione LCP Priority segmenta i dati di performance in base a come il browser ha scoperto e assegnato la priorità alla risorsa LCP. Mentre la dimensione "Element Type" indica cos'è l'elemento (Testo vs. Immagine), questa dimensione spiega perché il browser ne ha ritardato il caricamento.

Questo è il tuo strumento di audit principale per il ritardo di caricamento. Mostra se la tua risorsa LCP sta lottando per la larghezza di banda o se viene ritardata artificialmente da attributi HTML errati.

La gerarchia delle priorità

Il browser assegna una priorità di download a ogni risorsa. Questa dimensione mappa l'elemento LCP a uno di cinque specifici stati di caricamento, ordinati dal più distruttivo (Lazy Loaded) al più ottimale (Testo/Priorità alta).

Contesto: Quando un utente torna sulla tua pagina tramite il pulsante "Indietro" o "Ricarica", la maggior parte dei browser lo riporta alla posizione verticale precedente. Se questa posizione si trova sotto la piega, la tua Hero Image ottimizzata non è più l'LCP. Il browser misura invece l'elemento più grande all'interno della viewport corrente. Questo genera una serie inevitabile di eventi "Not Preloaded" nel tuo set di dati. E va benissimo così!

1. Lazy Loaded

Se più del 10% dei tuoi elementi LCP finisce in questo bucket, hai individuato un problema. Le immagini in lazy loading vengono messe in coda molto più tardi (dal lento parser DOM e non dal veloce preload scanner). L'attributo loading="lazy" indica al browser di attendere con il download finché il layout non viene calcolato e l'elemento si trova vicino alla viewport.

La soluzione: Devi rimuovere questo attributo loading. L'elemento LCP non deve mai essere caricato in lazy loading.

<!-- ERRATO -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- CORRETTO -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Questo rappresenta il comportamento predefinito del browser. Il browser ha scoperto l'immagine nell'HTML durante il parsing iniziale, ma non ha ricevuto alcun segnale per assegnarle la priorità rispetto ad altre immagini.

L'impatto sulla velocità della pagina dipende dalla complessità della pagina web. L'immagine LCP entra in una coda di contesa delle risorse. Se la tua pagina ha molti script, font, altre immagini non-lazy o stili da scaricare, il browser potrebbe ritardare il download di questa immagine, aumentando il ritardo di caricamento.

3. Preloaded

Questo indica che la risorsa è stata scoperta tramite un tag <link rel="preload"> nell'head del documento. Questo preload consente essenzialmente una scoperta anticipata, anche se il riferimento all'immagine è annidato in profondità nel DOM o nascosto in un file CSS (immagine di sfondo).

Il preloading è il modo più efficace per forzare un download anticipato; tuttavia, richiede di gestire un tag link separato che deve corrispondere esattamente all'URL dell'immagine. Se divergono, scaricherai la risorsa due volte.

4. High fetchpriority

Questo è lo standard ingegneristico moderno. Il browser è stato istruito tramite l'attributo fetchpriority="high" a trattare questa specifica immagine come una risorsa critica.

La strategia: Questo è lo stato obiettivo per gli LCP basati su immagini. Segnala l'importanza direttamente sull'elemento, posizionandolo al di sopra delle altre risorse nella coda di download senza i costi di manutenzione dei tag preload manuali.

5. Non un'immagine

Stato: Nodo di testo / SVG

L'elemento LCP è un blocco di testo (h1, p) o un SVG non elaborato. Questo è lo stato architetturale ideale perché il testo comporta zero ritardi di caricamento (è già presente nel documento HTML).

L'ottimizzazione: Se il tuo LCP rientra in questa categoria ma è ancora lento, il collo di bottiglia è esclusivamente il ritardo di rendering. Devi ottimizzare il tuo Critical Rendering Path (blocco CSS/JS) o la strategia di caricamento dei font (font-display: swap), poiché non c'è alcun file di immagine da scaricare.

Workflow: Ottimizzare il ritardo di caricamento

Usa questa dimensione per validare la tua strategia per le risorse frontend.

1. Elimina il lazy loading: Filtra per Lazy Loaded. Se questo valore è superiore allo 0%, trova il componente che aggiunge loading="lazy" alla hero image e rimuovilo. Questo comportamento è comune nei template dei CMS che applicano il lazy loading a livello globale su tutti i media.
2. Passa a Fetchpriority: Sposta il traffico da Not Preloaded e Preloaded a High fetchpriority. Sostituire <link rel="preload"> con fetchpriority="high" ripulisce il tuo <head> e associa la logica di priorità direttamente al componente.
3. Analizza le immagini di sfondo: Se riscontri un volume elevato in Not Preloaded e il tuo LCP è un'immagine di sfondo, il browser la scopre troppo tardi (solo dopo il parsing del CSS). Devi rifattorizzarla in un tag HTML <img> con fetchpriority="high" o forzare un header Preload.

Regola empirica per gli sviluppatori

Il tuo obiettivo di distribuzione per questa dimensione è rigoroso:

• <10% Lazy Loaded
• > 90% High fetchpriority (per gli LCP basati su immagini)
• 100% Not an image (per gli LCP basati su testo)

Qualsiasi quota di traffico che ricade in "Not Preloaded" rappresenta uno stato non ottimizzato in cui stai cedendo il controllo della priorità delle risorse alle euristiche predefinite del browser.