Dimensione Core/Dash: Priorità LCP

Dimensione: Risorsa: Priorità LCP

La dimensione Priorità LCP segmenta i dati di performance 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 lottando per la larghezza di banda o se è 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 (Testo/Priorità Alta).

Contesto: Quando un utente torna 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 è assolutamente normale!

1. Lazy Loaded

Se più del 10% dei tuoi elementi LCP appare in questo bucket, hai identificato un problema. Le immagini in lazy loading vengono accodate molto più tardi (dal lento parser del DOM e non dal veloce preload scanner). L'attributo loading="lazy" istruisce il browser ad attendere per 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 lazy-load.

<!-- 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 l'analisi iniziale ma non ha ricevuto alcun segnale per darle priorità rispetto ad altre immagini.

L'impatto sulla velocità della pagina (pagespeed) 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 dell'immagine è sepolto in profondità nel DOM o nascosto in un file CSS (immagine di background).

Il preloading è il modo più efficace per forzare un download anticipato, ma richiede il mantenimento di un tag link separato che deve corrispondere esattamente all'URL dell'immagine. Se differiscono, si finisce per scaricare 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 al di sopra degli altri asset nella coda di download senza l'overhead di manutenzione dei tag di preload manuali.

5. Non un'immagine

Stato: Nodo di Testo / SVG

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

L'Ottimizzazione: Se il tuo LCP rientra 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 ci sono file immagine da scaricare.

Flusso di lavoro: Ottimizzare il Load Delay

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

1. Elimina il Lazy Loading: Filtra per Lazy Loaded. Se questo valore è maggiore dello 0%, trova il componente che aggiunge loading="lazy" alla hero image e rimuovilo. Questo è comune nei template dei 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. Audita le Background Images: Se hai un alto volume in Not Preloaded e il tuo LCP è un'immagine di background, il browser la sta scoprendo troppo tardi (solo dopo che il CSS è stato analizzato). Devi refattorizzare questo in un tag HTML <img> con fetchpriority="high" o forzare un header Preload.

Regola Pratica Ingegneristica

Il tuo obiettivo di distribuzione per questa dimensione è rigoroso:

• <10% Lazy Loaded
• > 90% High fetchpriority (per LCP di Immagini)
• 100% Non un'immagine (per LCP di Testo)

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