Dimensione Core/Dash: LCP Priority

Dimensione: Risorsa: LCP Priority

La dimensione LCP Priority segmenta i dati sulle prestazioni in base a come il browser ha scoperto e prioritizzato la risorsa LCP. Mentre la dimensione "Element Type" ti dice cos'è l'elemento (Testo vs. Immagine), questa dimensione ti dice perché il browser ne ha ritardato il caricamento.

Questo è il tuo strumento di audit principale per il Load Delay. Rivela se la tua risorsa LCP sta competendo 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 dei cinque stati di caricamento specifici, classificati dal più distruttivo (Lazy Loaded) al più ottimale (Text/High Priority).

Contesto: Quando un utente ritorna alla tua pagina tramite il pulsante "Indietro" o "Ricarica",  la maggior parte dei browser lo riporta alla posizione verticale precedente. Se questa posizione è below the fold, la tua Hero Image ottimizzata non è più il LCP. Invece, il browser misura l'elemento più grande nel viewport corrente. Questo crea una serie inevitabile di eventi "Not Preloaded" nel tuo dataset.  E questo va perfettamente bene!

1. Lazy Loaded 

Se più del 10% dei tuoi elementi LCP appare in questo bucket, hai identificato un problema. Le immagini con lazy loading vengono accodate molto più tardi (dal lento parser DOM e non dal veloce preload scanner). L'attributo loading="lazy"  istruisce il browser ad attendere con il  download finché il layout non è calcolato e l'elemento è vicino al viewport.

La Soluzione: Devi rimuovere questo attributo di caricamento. L'elemento LCP non dovrebbe mai essere caricato in modalità lazy.

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

<!-- CORRECT -->
<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 prioritizzarla rispetto ad altre immagini.

L'impatto sulla velocità della pagina dipende dalla complessità della tua 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 Load Delay.

3. Preloaded

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

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

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 target per il LCP basato su immagini. Segnala l'importanza direttamente sull'elemento, spingendolo sopra le altre risorse nella coda di download senza l'overhead di manutenzione dei tag di preload manuali.

5. Not an Image

Stato: Nodo di Testo / SVG

L'elemento LCP è un blocco di testo (h1, p) o un SVG grezzo. Questo è lo stato architettonico ideale perché il testo comporta zero Load Delay (è già presente nel documento HTML).

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

Workflow: Ottimizzare il Load Delay

Usa questa dimensione per convalidare la tua strategia delle 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 è comune nei template CMS che applicano il lazy loading globalmente a tutti i media.
2. Migra 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 accoppia la logica di priorità direttamente al componente.
3. Controlla le Immagini di Sfondo: Se hai un volume elevato in Not Preloaded e il tuo LCP è un'immagine di sfondo, il browser la sta scoprendo troppo tardi (solo dopo il parsing del CSS). Devi rifattorizzare questo in un tag HTML <img> con fetchpriority="high" o forzare un header Preload.

Regola Generale Ingegneristica

Il tuo obiettivo di distribuzione per questa dimensione è rigoroso:

• <10% Lazy Loaded
• > 90% High fetchpriority (per LCP Immagine)
• 100% Not an image (per LCP Testo)

Qualsiasi traffico che ricade in "Not Preloaded" rappresenta uno stato non ottimizzato in cui stai cedendo il controllo della priorità delle risorse all'euristica predefinita del browser.