Core Web Vitals Visualizer: estensione Chrome gratuita per il debug dei CWV

Un'estensione Chrome gratuita per il debug dei Core Web Vitals

Il Core Web Vitals Visualizer è un'estensione Chrome gratuita che ho creato per eseguire il debug dei Core Web Vitals senza aprire i DevTools. Crea un overlay in tempo reale su qualsiasi pagina, mostrandoti esattamente quali elementi influenzano LCP, CLS e INP. Oltre 14.000 sviluppatori la utilizzano.

Ultima revisione di Arjen Karel a marzo 2026

Come specialista dei Core Web Vitals, passo molto tempo a verificare come una pagina reagisce e risponde quando interagisco con essa. Che impatto ha questo sui Core Web Vitals e come cambiano le metriche quando passo all'emulazione mobile o disabilito la cache del browser?

Certo, utilizzo il tracciamento RUM. Questo mi dice a livello di pagina quali metriche vengono superate e quali falliscono. Ma perché falliscono? È qualcosa che puoi capire veramente solo quando interagisci con la pagina.

Per risparmiare molto tempo, ho deciso di automatizzare una piccola parte di un processo lungo e creare un'estensione Chrome che faccia un po' del lavoro noioso al posto mio. Il risultato è il Core Web Vitals Visualizer. Ho deciso di renderlo disponibile per tutti, quindi vai avanti e dai un'occhiata sul Chrome Web Store.

Cosa fa il Core Web Vitals Visualizer?

Innanzitutto, registra i Core Web Vitals in base alla tua interazione con la pagina. Traccia il Largest Contentful Paint, l'Interaction to Next Paint, il Cumulative Layout Shift, il First Contentful Paint e il Time to First Byte.

Successivamente, crea un overlay che visualizza tutte queste metriche. Questo ti dice quale elemento rappresenta il Largest Contentful Paint, quali elementi causano instabilità visiva e, se hai interagito con la pagina, quale evento ha causato il peggior ritardo di input.

Quando fai clic su una qualsiasi delle metriche, il Core Web Vitals Visualizer le scompone nei loro componenti più basilari. Per LCP questo significa che vedi il ritardo di caricamento della risorsa, la durata del caricamento e il ritardo di rendering dell'elemento. Per INP ottieni il ritardo di input, il tempo di elaborazione e il ritardo di presentazione.

Perché non usare Lighthouse?

Ricevo spesso questa domanda. La mia risposta è sempre: "Non ho mai detto di non usare Lighthouse" (sebbene non usi Lighthouse così spesso). Lighthouse è un ottimo strumento e dovresti familiarizzare con esso.

Ma ci sono differenze importanti. Lighthouse è un test di laboratorio e i dati potrebbero non essere rappresentativi della vita reale. Ecco perché la mia estensione utilizza i dati reali del tuo browser. Lighthouse inoltre non fornisce risultati di interazione reali. Non può misurare INP perché non c'è un utente reale che interagisce con la pagina. Al suo posto utilizza il Total Blocking Time come proxy. La mia estensione visualizza il CLS effettivo man mano che si verifica, e scompone LCP e INP nelle loro sottoparti in modo da poter vedere esattamente dove va a finire il tempo.

Che dire dell'estensione Web Vitals di Google?

Google ha deprecato la sua estensione Chrome Web Vitals a gennaio 2025. Ora consiglia di utilizzare invece il pannello Prestazioni di DevTools. DevTools è potente, ma a volte si desidera solo un rapido overlay senza aprire un'intera sessione di profilazione. Questo è esattamente ciò che fa il Core Web Vitals Visualizer. Fornisce anche le scomposizioni delle sottoparti delle metriche che i DevTools non mostrano in un'unica visualizzazione.

Installa il Core Web Vitals Visualizer

Vai sul Chrome Web Store e installa il Core Web Vitals Visualizer. E magari, se ti piace, lascia una recensione. Lo apprezzerei molto.