Come leggere un report Lighthouse senza farsi prendere dal panico

La prima regola: il tuo punteggio non è il tuo sito

Apri un report Lighthouse per la prima volta e ti trovi davanti a un muro di numeri, riquadri colorati e avvisi su cose di cui non hai mai sentito parlare. La reazione naturale è il panico. Il punteggio è rosso. Ci sono diciassette audit non superati. Il sito sarà sicuramente rotto?

Probabilmente no. Lighthouse è uno strumento diagnostico, non una pagella. Il punteggio è un benchmark sintetico eseguito in condizioni di laboratorio—spesso su una connessione limitata, simulando uno smartphone di fascia media del 2017. Ti dice come si comporta il tuo sito in quello scenario specifico, non come lo sperimentano gli utenti reali nel mondo reale.

Questo è importante perché la maggior parte dei team si fissa sul punteggio e perde il contesto. Un punteggio di 65 può andare bene per una web app complessa con dati in tempo reale. Un punteggio di 95 può comunque offrire un'esperienza scadente se vengono ottimizzate le cose sbagliate. Il punteggio è un punto di partenza per l'indagine, non una metrica di successo.

Cosa leggere per primo: Core Web Vitals

Salta il punteggio complessivo delle prestazioni. Scorri fino alla sezione Metriche e guarda tre numeri: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP). Questi sono i Core Web Vitals, e sono le uniche metriche di prestazioni che Google usa come segnale di ranking.

• LCP misura quanto tempo impiega l'elemento visibile più grande a renderizzare. Obiettivo: sotto i 2,5 secondi. Se superi i 4 secondi, gli utenti stanno aspettando troppo per vedere contenuti significativi.
• CLS misura la stabilità visiva—quanto la pagina salta mentre si carica. Obiettivo: sotto 0,1. Se superi 0,25, gli utenti cliccano accidentalmente la cosa sbagliata perché i pulsanti si sono spostati.
• INP misura la reattività—quanto rapidamente la pagina risponde a clic, tocchi e pressione dei tasti. Obiettivo: sotto 200ms. Se superi 500ms, il sito sembra lento e poco reattivo.

Queste tre metriche sono correlate alla frustrazione reale degli utenti. Sistemali prima di preoccuparti di qualsiasi altra cosa.

Opportunità vs. diagnostica: conosci la differenza

Lighthouse divide i risultati in due categorie: Opportunità e Diagnostica. Le opportunità sono ordinate in base al risparmio di tempo stimato. La diagnostica è contesto aggiuntivo—cose che potrebbero essere problemi, oppure no.

Parti dalle Opportunità. Se Lighthouse dice che "Eliminare le risorse che bloccano il rendering" potrebbe far risparmiare 1,2 secondi, è un miglioramento concreto. Se dice che "Ridurre il JavaScript inutilizzato" potrebbe far risparmiare 0,1 secondi, probabilmente non vale il refactor.

La diagnostica è più delicata. "Evitare dimensioni eccessive del DOM" suona male, ma se il tuo CLS va bene e il tuo INP è veloce, un DOM grande potrebbe non danneggiare nessuno. La diagnostica offre indizi, non obblighi. Indaga quelli che sono coerenti con le tue metriche reali.

Gli audit che di solito puoi ignorare

Alcuni avvisi di Lighthouse sono residui storici o troppo aggressivi. Ecco quelli che causano più panico inutile:

• "Non usa listener passivi per migliorare le prestazioni di scorrimento" — È una micro-ottimizzazione che raramente sposta davvero l'ago. A meno che tu non abbia prove di uno scrolling scattoso, saltala.
• "Gli elementi immagine non hanno larghezza e altezza esplicite" — Questo conta per il CLS, ma solo se le immagini causano spostamenti del layout. Se il tuo CLS è già buono, non fare refactor solo per soddisfare l'audit.
• "Servire le immagini in formati di nuova generazione" — Sì, WebP e AVIF sono più piccoli. Ma se le tue immagini sono già ottimizzate e il tuo LCP è veloce, è un miglioramento gradito, non una crisi.
• "Evitare payload di rete enormi" — Lighthouse segnala tutto ciò che supera 1,6 MB. Ma una pagina da 2 MB che si carica rapidamente è meglio di una pagina da 500 KB che blocca il rendering. Concentrati su come vengono consegnati i byte, non solo sul totale.

Cosa fare quando è tutto rosso

Se il tuo punteggio Lighthouse è sotto 50 e la maggior parte degli audit fallisce, probabilmente hai a che fare con una di queste tre cause principali:

1. Font non ottimizzati. I web font sono ancora il miglioramento di prestazioni più facile sulla maggior parte dei siti. Controlla se stai caricando sei pesi del font quando ne usi solo due, o se stai inviando file WOFF invece di WOFF2.
2. CSS e JavaScript che bloccano il rendering. Se il tuo First Contentful Paint (FCP) supera i 3 secondi, qualcosa impedisce al browser di disegnare la pagina. Cerca file CSS grandi o script sincroni nel <head>.
3. Immagini sovradimensionate. Se l'elemento LCP è un'immagine ed è da 4 MB, il problema è quello. Comprimi l'immagine, applica il lazy-loading alle immagini below-the-fold e usa la sintassi per immagini responsive.

Correggi una di queste cose e riesegui Lighthouse. Spesso vedrai un salto di 20-30 punti. Poi affronta la successiva.

Dati di laboratorio vs. dati sul campo: il controllo di realtà

Lighthouse gira in laboratorio. Simula una connessione lenta e un dispositivo lento, ma non può simulare il comportamento reale degli utenti—come le persone scorrono, cosa cliccano, se sono su un Wi-Fi instabile.

Per un controllo di realtà, confronta i risultati Lighthouse con i dati sul campo del Chrome User Experience Report (CrUX). CrUX mostra come gli utenti reali di Chrome hanno sperimentato il tuo sito negli ultimi 28 giorni. Se Lighthouse dice che il tuo LCP è di 4 secondi ma CrUX mostra 2 secondi, fidati di CrUX. Se entrambi sono negativi, hai un problema reale.

Puoi trovare i dati CrUX in PageSpeed Insights (la versione web di Lighthouse) o in Google Search Console sotto "Core Web Vitals." Se c'è una discrepanza, indaga il motivo. Forse i tuoi utenti reali sono su reti più veloci. Forse Lighthouse sta testando una build di sviluppo non ottimizzata.

Quando rieseguire Lighthouse

Lighthouse è rumoroso. Eseguilo tre volte di seguito e otterrai tre punteggi diversi, anche sulla stessa pagina. Questo perché le prestazioni sono variabili—processi in background, jitter di rete ed euristiche del browser influenzano tutti il risultato.

Per ottenere una baseline stabile, esegui Lighthouse in modalità incognito con tutte le estensioni disattivate, oppure usa la CLI con il flag --preset=desktop per risultati più coerenti. Eseguilo tre volte e fai la media dei punteggi. Se vedi oscillazioni marcate (più di 10 punti), c'è qualcos'altro che non va—forse il server è lento, o la pagina carica risorse diverse ogni volta.

Riesegui Lighthouse dopo ogni modifica significativa. Hai distribuito una nuova strategia per i font? Controlla LCP. Hai applicato il lazy-loading alle immagini? Controlla CLS. Hai aggiunto uno script di terze parti? Controlla INP. Le prestazioni non sono una correzione una tantum; sono un budget da difendere.

Gli strumenti che ti aiutano ad agire sui risultati di Lighthouse

Lighthouse ti dice cosa è lento. Non sempre ti dice come risolverlo. Per quello servono strumenti aggiuntivi:

• WebPageTest ti offre una vista a filmstrip di come la pagina si carica, fotogramma per fotogramma. Essenziale per diagnosticare problemi di LCP e CLS.
• Chrome DevTools Performance panel ti mostra esattamente quale JavaScript sta bloccando il main thread. Usalo per trovare la causa di un punteggio INP scadente.
• Strumenti di compressione immagini ti permettono di ottimizzare le immagini direttamente nel browser, in modo più rapido e più privato rispetto al caricamento su un servizio di terze parti. L'elaborazione delle immagini lato client è un vantaggio per la privacy perché le immagini non lasciano mai il tuo computer.

Lighthouse è il punto di partenza. Questi strumenti ti aiutano a completare il lavoro.

Punti chiave

• Il tuo punteggio Lighthouse è un benchmark di laboratorio, non una misura dell'esperienza utente nel mondo reale. Confrontalo con i dati sul campo di CrUX prima di farti prendere dal panico.
• Concentrati prima sui Core Web Vitals (LCP, CLS, INP). Sono le metriche correlate alla frustrazione degli utenti e all'impatto SEO.
• Dai priorità alle Opportunità in base al risparmio di tempo stimato. Ignora la Diagnostica che non è coerente con i tuoi problemi reali di prestazioni.
• Alcuni audit—come i listener passivi o i formati immagine di nuova generazione—sono micro-ottimizzazioni. Correggi prima le cose importanti.
• Esegui Lighthouse tre volte e fai la media dei risultati. Le prestazioni sono variabili, e una singola esecuzione può essere fuorviante.

FAQ

Q: Perché il mio punteggio Lighthouse cambia ogni volta che lo eseguo?
A: Lighthouse misura le prestazioni in condizioni variabili—velocità della rete, carico della CPU ed euristiche del browser influenzano tutti il risultato. Eseguilo tre volte in modalità incognito e fai la media dei punteggi per una baseline più stabile.

Q: Dovrei ottimizzare prima per mobile o desktop?
A: Mobile. Lighthouse usa per impostazione predefinita una simulazione mobile perché la maggior parte del traffico web è mobile e i dispositivi mobili sono più lenti. Se il tuo punteggio mobile è buono, di solito anche il punteggio desktop andrà bene.

Q: Il mio punteggio Lighthouse è 95, ma il sito sembra comunque lento. Cosa non va?
A: Lighthouse misura il caricamento della pagina, non l'interattività dopo il caricamento. Controlla il tuo punteggio INP e usa il Chrome DevTools Performance panel per profilare cosa succede quando gli utenti cliccano o scorrono. Potresti avere un problema JavaScript che Lighthouse non rileva.

Q: Mi serve un punteggio perfetto di 100?
A: No. Un punteggio di 90+ è eccellente. Inseguire 100 spesso significa ottimizzare cose che non contano per gli utenti. Concentrati sulle metriche reali—LCP, CLS, INP—e ignora il punteggio.

Q: Posso fidarmi di Lighthouse se uso molti script di terze parti?
A: Lighthouse segnalerà gli script di terze parti come un problema, ma non riesce sempre a distinguere tra quelli necessari e quelli non necessari. Usa gli audit "Evitare payload di rete enormi" e "Ridurre il tempo di esecuzione di JavaScript" per identificare i peggiori responsabili, poi decidi se vale la pena mantenerli.

Fonti

• "Lighthouse performance scoring" — Google Developers
• "Core Web Vitals" — web.dev
• "Chrome User Experience Report" — Google Developers
• "WebPageTest Documentation" — WebPageTest.org