Misurazione dei Core Web Vitals nelle app React
Utilizzi Lighthouse, WebPageTest e la libreria web-vitals per raccogliere i punteggi LCP, INP e CLS.
Misurazione dei Core Web Vitals nelle app React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cosa sono i Core Web Vitals?
I Core Web Vitals sono le metriche di Google relative all'esperienza utente che influenzano il posizionamento SEO: LCP (Largest Contentful Paint — caricamento), INP (Interaction to Next Paint — reattività) e CLS (Cumulative Layout Shift — stabilità visiva).
Soglie ottimali
Valori obiettivo: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. I valori oltre la soglia «poor» (LCP > 4s, INP > 500ms, CLS > 0.25) compromettono significativamente l'esperienza utente e il posizionamento SEO.
Libreria web-vitals
Il pacchetto npm web-vitals misura i CWV nei browser reali tramite un'API semplice.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Inviare i Web Vitals agli strumenti di analisi
Invii i Web Vitals al proprio endpoint di analisi per il monitoraggio degli utenti reali (RUM): Lighthouse misura le prestazioni in laboratorio, mentre il RUM mostra l'esperienza degli utenti reali.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Web Vitals integrati in Next.js
Next.js raccoglie automaticamente i Core Web Vitals. Esporti una funzione reportWebVitals da _app.js (Pages) oppure usi il supporto integrato dell'App Router.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse in Chrome DevTools
Esegua un audit Lighthouse in Chrome DevTools (scheda Lighthouse) per misurare i CWV in laboratorio. Usi la modalità Incognito per evitare interferenze delle estensioni e limiti la rete per simulare un dispositivo mobile.
WebPageTest
WebPageTest.org fornisce grafici waterfall dettagliati, acquisizione video e misurazioni dei CWV da dispositivi reali in diverse aree geografiche: è più realistico di Lighthouse in esecuzione locale.
Chrome User Experience Report (CrUX)
Il dataset CrUX di Google aggrega i dati CWV degli utenti reali per milioni di siti web. Può accedervi tramite Google Search Console, PageSpeed Insights o l'API CrUX.
PerformanceObserver per LCP
Usi l'API nativa PerformanceObserver per osservare le voci LCP e capire quale elemento rappresenta il Largest Contentful Paint.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Debug del CLS
Usi Layout Shift Regions di Chrome DevTools (nel pannello Rendering) per evidenziare con sovrapposizioni rosse gli elementi che causano spostamenti del layout.
Dati di attribuzione
La libreria web-vitals fornisce dati di attribuzione che identificano che cosa ha causato la metrica negativa: l'elemento LCP, l'interazione INP o l'elemento che causa il CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Verifica rapida
Quale Core Web Vital misura la reattività, cioè la rapidità con cui la pagina risponde alle interazioni dell'utente?
Riepilogo
Misuri i CWV con la libreria web-vitals o Lighthouse. Invii le metriche agli strumenti di analisi per il monitoraggio degli utenti reali. Punti a LCP ≤ 2.5s, INP ≤ 200ms e CLS ≤ 0.1. Usi i dati di attribuzione per identificare gli elementi o le interazioni specifici che causano punteggi negativi.
Domande Frequenti
La lezione «Misurazione dei Core Web Vitals nelle app React» è gratuita?
Sì — il testo completo di «Misurazione dei Core Web Vitals nelle app React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Misurazione dei Core Web Vitals nelle app React»?
Utilizzi Lighthouse, WebPageTest e la libreria web-vitals per raccogliere i punteggi LCP, INP e CLS. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Misurazione dei Core Web Vitals nelle app React»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Misurazione dei Core Web Vitals nelle app React
- Analisi del bundle e strategia di code splitting
- Ottimizzazione di immagini e font in React
- Riduzione dell'INP: ottimizzazione degli event handler