Segnali Web principali: comprendere LCP, INP e CLS prima di applicare la patch

Accessibilità e prestazioni web · 6 lettura minima

Prima di correggere i Core Web Vitals, identifica cosa misura ciascuna metrica e da dove provengono i dati. LCP misura l'aspetto dei contenuti più idonei visibili, la reattività INP alle interazioni e la stabilità visiva CLS. Un valore errato non ne indica automaticamente la causa. La segnalazione deve essere collegata a una pagina, a un dispositivo e a un comportamento osservabile prima di scegliere un intervento.

Da ricordare

• LCP, INP e CLS descrivono problemi diversi.
• Le misurazioni dei visitatori e i test di laboratorio si completano a vicenda.
• Un punteggio complessivo non sostituisce la lettura di ciascun indicatore.
• Correggere una causa documentata, quindi verificare anche il percorso dell'utente.

Comprensione dei tre indicatori

LCP: quando viene visualizzato il contenuto principale

La vernice con contenuto più grande misura quando il contenuto idoneo più grande diventa visibile nell'area visualizzata. Può trattarsi di un'immagine, un blocco di testo o di contenuto video, a seconda del definizione di web.dev. Questo non è né il primo elemento visibile né la fine del caricamento dell'intera pagina.

Quindi inizia identificando l'elemento misurato su cellulare e computer. Non dare la colpa al banner: il candidato potrebbe cambiare con il layout.

INP: la risposta visiva a un'interazione

L'interazione con Next Paint osserva la latenza dei clic, delle pressioni e delle interazioni con la tastiera durante la visita. Misura il ritardo fino al successivo aggiornamento visivo e conserva una delle interazioni più lente, con elaborazione di valori estremi. Il documentazione INP specifica che non misura tutti gli effetti successivi di un'azione, comprese le operazioni di rete asincrone.

Un pulsante che visualizza rapidamente uno stato di attesa può quindi essere reattivo, mentre il risultato del server arriva più tardi. Guarda le azioni che effettivamente aiutano: apri un filtro, modifica una variante o aggiungi al carrello.

CLS: viaggi imprevisti

Lo spostamento cumulativo del layout valuta i movimenti imprevisti degli elementi visibili. Il suo punteggio, senza unità di tempo, conserva la sequenza più importante dei movimenti secondo le finestre di misurazione, come spiegato web.dev su CLS. Non è un tempo di caricamento né la somma di tutti i movimenti possibili.

Un'immagine senza segnaposto, un font o un modulo inserito in ritardo sono strade da esaminare, non cause dimostrate dal solo punteggio.

Leggere le soglie senza trasformarle in una promessa

Il Riferimento Web Vital definisce le seguenti soglie per un'esperienza classificata come buona:

Queste soglie vengono valutate al 75esimo percentile, separatamente su dispositivo mobile e computer. Ciò significa che tre quarti delle esperienze misurate hanno un valore inferiore o uguale a quello ritenuto. Questa non è una media. I tre indicatori devono rispettare le rispettive soglie affinché la valutazione complessiva sia buona. Un'assenza di INP, ad esempio la mancanza di interazioni misurate, non deve essere trasformata in un valore zero. Ciò non garantisce ulteriori vendite o posizione nei risultati di ricerca.

Distinguere i dati reali da quelli di laboratorio

In PageSpeed ​​​​Insights, i dati reali di CrUX coprono gli ultimi 28 giorni. Se nella pagina mancano dati, il report può utilizzare i dati di origine, che raggruppano le pagine dalla stessa origine, ovvero lo stesso protocollo, nome host e porta. Questo non raggruppa automaticamente tutti i sottodomini. Se anche questi sono insufficienti non viene visualizzata alcuna misura reale. Il Documentazione di PageSpeed Insights spiega questi casi: controllare sempre il perimetro prima di interpretare un valore.

Il laboratorio esamina una pagina in condizioni controllate. Aiuta a riprodurre un problema e testare una correzione. Un carico Lighthouse senza interazione non misura INP; Total Blocking Time aiuta nella diagnosi, ma non la sostituisce. La guida a discrepanze tra laboratorio e campo ricorda inoltre che i movimenti potrebbero manifestarsi successivamente nella visita, al di fuori del test iniziale.

Esempio illustrativo: non risolvere il problema sbagliato

In questo esempio fittizio, un negozio nota che un INP deve essere migliorato sui dispositivi mobili, mentre la sua immagine principale viene visualizzata correttamente. Ridurre ulteriormente questa immagine non è una risposta sufficiente. Il team riproduce innanzitutto l'apertura di un filtro dopo il caricamento, quindi chiede di esaminare il lavoro eseguito al momento di questo supporto.

Una correzione del componente viene testata nelle stesse condizioni. Il filtro deve rimanere utilizzabile e fornire un feedback visivo comprensibile. Non si assume alcun guadagno numerico: le nuove osservazioni e misurazioni vengono utilizzate per verificare l'ipotesi.

Lista di controllo prima di qualsiasi correzione

• Scegli le pagine rappresentative: categoria, prodotto, carrello o richiesta.
• Annotare il dispositivo, l'URL, l'ambito dei dati e l'indicatore interessato.
• ​​​​Identifica l'elemento LCP o l'azione associata al problema.
• Mantenere un report iniziale e le fasi di riproduzione.
• Formulare un'ipotesi tecnica da verificare con lo sviluppatore.
• Testare una modifica isolata, quindi le funzioni interessate.
• Quindi monitora i dati effettivi, quando disponibili.

Limitazioni ed errori comuni

Confrontare test effettuati su diversi dispositivi o impostazioni può confondere la diagnosi. La modifica di più estensioni contemporaneamente impedisce di attribuire l'effetto a una causa. Infine, questi indicatori non controllano l’accessibilità, né l’accuratezza del paniere, né la chiarezza delle informazioni. Un miglioramento tecnico deve preservare il funzionamento del sito.

Domande frequenti

È sufficiente una buona valutazione di Lighthouse?

No. Descrive un test di laboratorio. Osserva le metriche effettive disponibili e prova le interazioni importanti, anziché limitarti a ricordare la valutazione.

L'assenza di dati significa che il sito è veloce?

No. Indica che il rapporto non dispone di un campione sufficiente. I test controllati rimangono utili, senza essere presentati come misurazioni dei tuoi visitatori.

Perché i dati effettivi non cambiano immediatamente?

La finestra del giorno 28 contiene ancora le visite precedenti alla correzione. Prima verificare il cambiamento in laboratorio, poi osservare l'evoluzione senza aspettare un cambio immediato.

Passaggio successivo

Prepara una scheda con un URL, un indicatore problematico e un'azione ripetibile. Se lo richiedi 4SYSTEM, allegare il verbale e le relative condizioni di misurazione. Questa base ci permette di discutere una correzione precisa piuttosto che una vaga richiesta di rapidità.

Fonti e risorse

• web.dev: Web Vital e soglie.
• web.dev: definizione di LCP.
• web.dev: definizione di INP.
• web.dev: definizione di CLS.
• web.dev: laboratorio e campo.
• Google: Leggi PageSpeed Insights.