Web Vitals e l'esperienza di pagina

L’esperienza della pagina è una delle poche aree di SEO in cui gli interessi dei motori di ricerca, degli utenti e del tuo team di entrate si allineano perfettamente. Una pagina che dipinge velocemente, risponde istantaneamente e non spinge i suoi pulsanti intorno a metà carico si classifica un po ‘meglio, converte notevolmente meglio e viene abbandonata molto meno. Eppure Core Web Vitals lavora spesso in stallo perché i team annegano nei punteggi di laboratorio, inseguono un perfetto 100 in Lighthouse o risolvono metriche che non sono mai state il problema. Questa guida spiega cosa misura effettivamente ogni vitale, come diagnosticare con la giusta origine dati e dove si nascondono di solito le vere correzioni.

Le tre metriche, tradotte nell’esperienza umana

La più grande pittura di contenuto: “Quando si è sentita caricata la pagina?”

LCP segna il momento in cui il più grande elemento visibile – di solito un’immagine eroe, banner o blocco titolo – termina il rendering. Si avvicina all’istante in cui un visitatore percepisce la pagina come “là”. La soglia di Google per una buona esperienza è di 2,5 secondi o meno al 75 ° percentile di visite reali. I guasti LCP sono quasi sempre problemi di risorse: un’enorme immagine eroe non ottimizzata, una risposta lenta del server, un CSS di blocco del rendering o font che ritardano la vernice del testo.

Interazioni a Next Paint: “ha risposto quando l’ho toccato?”

INP ha sostituito il primo ritardo di input come metrica di reattività ed è più rigoroso: misura il tempo da qualsiasi interazione dell’utente – tocca, fai clic, premi chiave – al prossimo aggiornamento visivo, per tutta la durata della pagina, riportando il caso peggiore. La soglia “buona” è di 200 millisecondi. I guasti INP sono problemi JavaScript: compiti lunghi che scavano il filo principale, gestori di eventi pesanti, tempeste di idratazione nei framework JS e script di terze parti che funzionano esattamente nel momento sbagliato.

Spostamento di layout cumulativo: “ha fatto il salto di pagina mentre lo stavo usando?”

CLS valuta la quantità di contenuti visibili che si muove inaspettatamente durante la vita della pagina, con 0,1 o meno considerati buoni. Il classico trasgressore: un annuncio o un’immagine in ritardo di caricamento senza dimensioni riservate spinge il paragrafo che stavi leggendo – o il pulsante che stavi per toccare – da qualche altra parte. CLS è di solito la più semplice da risolvere perché le cause sono meccaniche: attributi di larghezza e altezza mancanti, banner iniettati e caratteri che si scambiano in diverse dimensioni.

Dati di laboratorio: diagnostica con la giusta fonte

I dati sul campo sono il verdetto

Il Chrome User Experience Report (CrUX) aggrega le misurazioni di utenti reali di Chrome sulle pagine effettive ed è ciò che i sistemi di ranking di Google e il report Core Web Vitals della Search Console utilizzano. Se i dati del campo passano, si passa – indipendentemente da ciò che dice Lighthouse. Inizia sempre la diagnosi nel report di Search Console Core Web Vitals o nella sezione del campo di PageSpeed Insights, perché questa è la verità fondamentale sui visitatori reali su reti e dispositivi reali.

I dati di laboratorio sono il microscopio

Lighthouse e WebPageTest eseguono la pagina in un ambiente controllato, producendo tracce dettagliate su cui è possibile agire: su quale elemento è il candidato LCP, quali script eseguono attività lunghe, quali risorse bloccano il rendering. Gli strumenti di laboratorio rispondono “perché è lento”, non “è lento per gli utenti”. Il flusso di lavoro sano esegue una direzione: i dati di campo identificano pagine e metriche inadempienti, gli strumenti di laboratorio sezionano la causa e i dati di campo confermano la correzione settimane dopo una volta accumulate visite reali sufficienti.

Non ottimizzare per il punteggio Lighthouse

Il punteggio di prestazioni a numero singolo è una sintesi ponderata progettata per il triage rapido e viene misurata su un dispositivo simulato di fascia media. Le squadre bruciano settimane spostandosi da 71 a 94 mentre i loro vitali sul campo non si muovono mai – o stavano già passando. Stabilisci gli obiettivi in termini di tre metriche di campo e le loro soglie al 75° percentile. Questa è la definizione di fatto.

Fissaggio LCP: ottenere la cosa principale sullo schermo prima possibile

Ridurre e dare priorità alla risorsa LCP

Identificare l’elemento LCP negli strumenti di laboratorio, quindi rendere il suo viaggio più breve: servire l’immagine in un formato moderno (WebP o AVIF) alla dimensione visualizzata, non la risoluzione della fotocamera originale; precaricarlo; e mai lazy-loading l’immagine eroe è una delle ferite LCP autoinflitte più comuni. Se l’elemento LCP è testo, assicurarsi che il webfont carichi con lo swap font-display o che venga prima visualizzato un font di sistema.

Tagliare il tempo prima che il browser possa anche iniziare

LCP include il tempo di risposta del server. Le query di database lente, la cache delle pagine mancanti e i server distanti spingono LCP fuori prima di un singolo byte delle questioni relative all’immagine ottimizzata. La cache a pagina intera per i visitatori anonimi, un CDN per le risorse e le risposte compresse in genere fanno di più per LCP su siti dinamici rispetto a qualsiasi modifica front-end. Controlla il time-to-first-byte nelle tue tracce; se si tratta di una grande frazione del budget LCP, prima risolvi il back-end.

Sblocca rendering

Fogli di stile e script sincrono nella vernice a blocchi di testa. Inlinea la piccola quantità di CSS necessaria per il layout sopra il riquadro, rimanda il resto e sposta gli script su async o def. Ogni tag di terze parti aggiunto alla testa è una tassa LCP; controllarli ogni anno ed eliminare gli zombie.

Fissaggio INP: Smetti di agganciare il thread principale

Trovare e dividere le attività lunghe

Il browser non può rispondere a un tocco mentre viene eseguita una lunga attività JavaScript. Utilizzare il pannello Performance o il campo INP per trovare attività oltre 50 millisecondi, quindi suddividerle: cedere al ciclo di eventi tra blocchi, rinviare il lavoro non essenziale con requestIdleCallback e spostare il calcolo puro ai lavoratori web. L’obiettivo non è mai una pagina silenziosa – è una pagina che lascia sempre lacune per la gestione degli input.

Audit script di terze parti senza pietà

Analytics, widget di chat, heatmap, gestori di consensi e payload dei tag manager dominano di routine il tempo di caricamento principale. Caricali dopo che la pagina è interattiva, usa le facciate per le incorporazioni pesanti (una miniatura che carica il vero lettore video solo su clic) e applica una semplice regola: qualsiasi script che non può nominare la decisione aziendale che informa viene rimosso.

Guarda l’idratazione del quadro

I framework di app a pagina singola che vengono visualizzati sul server e quindi idratati sul client possono produrre una pagina che sembra pronta ma ignora l’input durante l’idratazione. Se lo stack lo fa, investigare l’idratazione parziale o progressiva, l’architettura delle isole o semplicemente spedire meno JavaScript alle pagine di contenuti che non hanno mai avuto bisogno di un framework app in primo luogo.

Fissaggio CLS: riserva spazio per tutto

Dare ogni immagine e dimensioni incorporate

Gli attributi di larghezza e altezza (o CSS aspect-ratio) consentono al browser di prenotare la casella corretta prima che l’asset arrivi, eliminando il turno più comune. Lo stesso vale per iframe, lettori video e slot pubblicitari – riservare un contenitore fisso anche se il contenuto all’interno varia.

Non iniettare mai il contenuto sopra il contenuto esistente

Le notifiche sui cookie, le barre promozionali e i banner delle app che spingono la pagina verso il basso dopo il caricamento sono fabbriche CLS e in generale l’ostilità dell’utente. Sovrapporre, riservare il loro spazio nel layout iniziale, o ancorarli alla parte inferiore della finestra. Gli inserimenti dinamici di contenuto sotto la piega o in risposta a un’azione dell’utente non contano contro CLS – design intorno a tale indennità.

Scambio di font Tame

Un carattere di fallback metricamente diverso dal webfont rifluisce ogni paragrafo quando avviene lo swap. Utilizzate strategie di ricaduta o di visualizzazione dei font che riducono al minimo il riflusso visibile e sottoinsiemi di font in modo che arrivino abbastanza velocemente da non permettere alla maggior parte degli utenti di vedere lo swap.

Vitali nel contesto: Classificare il peso e il peso aziendale

Aspettatevi un tiebreaker, non una trasformazione

Google è stato coerente nel dire che i segnali di esperienza di pagina sono un fattore tra i tanti e che i grandi contenuti su una pagina mediocre-vitals ancora superano i contenuti sottili su uno veloce. Passare le cose vitali non salverà i contenuti deboli; se non sono male può costare legami contro concorrenti comparabili, soprattutto nelle SERP mercificate. Impostare le aspettative di conseguenza con gli stakeholder – quindi puntare i dati di conversione, dove i miglioramenti della velocità si mostrano molto più drammaticamente che nelle classifiche.

Assegnare priorità ai modelli, non alle singole pagine

Problemi vitali raggruppati per modello: ogni pagina del prodotto condivide lo stesso componente eroe, ogni articolo lo stesso layout di annuncio. Gruppi di Search Console che falliscono gli URL in questo modo per un motivo. Correggere il modello e centinaia di URL passano insieme. Crea un breve elenco dei modelli a traffico più elevato, ottieni ciascuno verde al 75° percentile e aggiungi un budget di prestazioni al tuo processo di sviluppo in modo che le regressioni siano catturate nella revisione del codice piuttosto che nei dati CrUX del prossimo trimestre. L’esperienza della pagina non è un progetto che finisci; è una proprietà che difendi.

Trappole comuni sulla strada per il verde

Inseguire il collo di bottiglia di qualcun altro

La consulenza sulle prestazioni è sensibile ai modelli: la correzione che ha salvato un editore pesante di immagini (compressione di immagini, precarichi) non fa nulla per un sito di marketing SaaS pesante di JavaScript il cui problema è l’idratazione e viceversa. Prima di implementare qualsiasi checklist, conferma quale metrica sta fallendo e quale risorsa domina la traccia sulle tue pagine. Metà dello sforzo sprecato nel lavoro di vita è costituito da team che ottimizzano diligentemente una metrica che stavano già passando mentre quella in fallimento rimane intatta.

Test solo sulla rete di uffici

Una pagina che supera ogni test sulla connessione in fibra di uno sviluppatore e sul laptop dell’anno corrente può fallire male per il pubblico che effettivamente visita. Throttle deliberatamente: test di laboratorio su hardware mobile simulato di fascia media e 4G lento, oltre a controlli periodici su un telefono reale. L’inquadratura 75 ° percentile delle soglie esiste proprio perché l’esperienza mediana non è il problema – la metà più lenta del tuo pubblico è dove vivono i fallimenti e l’abbandono.

Dichiarare la vittoria dopo l’implementazione

La field data lag: CrUX aggrega circa un mese di visite reali, quindi una correzione spedita oggi sposta gradualmente i numeri ufficiali nelle settimane successive. Squadre che controllano il giorno dopo una release e non vedono alcun cambiamento a volte si rimettono in riga perfettamente. Verificare immediatamente con gli strumenti di laboratorio e il proprio monitoraggio dell’utente reale se lo si dispone, quindi lasciare che i dati di campo confermino il proprio programma – e mantenere il monitoraggio in posizione in seguito, perché il prossimo aggiornamento delle dipendenze o il tag di marketing è già programmato per annullare il lavoro.