I Core Web Vitals (CWV) sono tre metriche di prestazione che Google utilizza come segnali di ranking: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). Migliorare questi punteggi non solo aiuta con la SEO. Migliora direttamente l'esperienza che i tuoi visitatori hanno sul tuo sito. Pagine più veloci ottengono più engagement, tassi di rimbalzo inferiori e tassi di conversione più elevati. Ecco un approccio approfondito e pratico per migliorare ogni metrica su WordPress.
Misura prima di ottimizzare
Prima di apportare modifiche, stabilisci una baseline in modo da poter monitorare i tuoi progressi. Usa questi strumenti per misurare i tuoi attuali Core Web Vitals:
- Google PageSpeed Insights: Inserisci il tuo URL su pagespeed.web.dev. La sezione superiore mostra i dati sul campo da utenti reali (se disponibili) e la sezione inferiore mostra i dati di laboratorio da un test simulato. I dati sul campo sono ciò che Google utilizza effettivamente per il ranking.
- Google Search Console: Vai al report "Core Web Vitals" sotto "Experience". Questo mostra i dati aggregati su tutto il tuo sito, raggruppati per mobile e desktop. Evidenzia quali URL necessitano di miglioramento e quali superano.
- Chrome DevTools: Apri DevTools (F12), vai alla scheda "Performance" ed esegui una registrazione mentre carichi la tua pagina. Questo ti dà tempistiche dettagliate per ogni risorsa e passo di rendering.
- Estensione Chrome Web Vitals: Installa l'estensione "Web Vitals" per misurazioni CWV in tempo reale mentre navighi nel tuo stesso sito.
Annota i tuoi valori baseline di LCP, INP e CLS. Dopo ogni ottimizzazione, testa di nuovo per confermare il miglioramento.
Ottimizzazione LCP: rendi il contenuto principale più veloce
LCP misura quanto tempo impiega l'elemento visibile più grande (di solito un'immagine hero, un titolo o un grande blocco di testo) ad apparire sullo schermo. Google considera un LCP inferiore a 2,5 secondi come "buono". Ecco come abbassarlo:
- Identifica il tuo elemento LCP: In PageSpeed Insights, scorri fino alla diagnosi "Largest Contentful Paint element" per vedere esattamente quale elemento è il tuo LCP. Saperlo ti dice dove concentrarti.
- Ottimizza l'immagine hero: Se il tuo elemento LCP è un'immagine, comprimila, convertila in WebP o AVIF e assicurati che sia adeguatamente dimensionata per il suo contenitore. Un'immagine larga 3000px in un contenitore largo 1200px spreca larghezza di banda. Aggiungi
fetchpriority="high"per indicare al browser di dare priorità al suo download. - Precarica le risorse critiche: Aggiungi un suggerimento di preload nel tuo
<head>per l'immagine LCP in modo che il browser inizi a scaricarla immediatamente invece di aspettare che venga scoperta durante il rendering:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Riduci il tempo di risposta del server: Un TTFB lento rallenta tutto. Usa un plugin di caching (vedi la nostra guida sul caching), aggiorna il tuo hosting se il TTFB supera costantemente i 600ms e considera un CDN per servire i contenuti da server geograficamente più vicini.
- Elimina CSS e JS render-blocking: Sposta il CSS non critico al caricamento asincrono e differisci il JavaScript che non è necessario per il rendering iniziale. Le funzioni "Optimize CSS Delivery" e "Delay JavaScript Execution" di WP Rocket gestiscono questo automaticamente.
- Usa un CDN: Servire asset statici (immagini, CSS, JS) da server edge vicini ai tuoi visitatori riduce la latenza. Cloudflare, BunnyCDN e KeyCDN si integrano tutti bene con WordPress.
- Rimuovi i plugin non necessari: Ogni plugin può aggiungere file CSS e JS alla pagina. Disattiva e rimuovi i plugin di cui non hai più bisogno. Usa il plugin Query Monitor per vedere quali plugin aggiungono il maggior overhead.
Ottimizzazione INP: rendi le interazioni immediate
INP misura quanto velocemente la tua pagina risponde quando un utente fa clic su un pulsante, tocca un link o digita in un campo. Google considera un INP inferiore a 200 millisecondi come "buono". Un cattivo INP di solito proviene da JavaScript che blocca il thread principale. Ecco come risolverlo:
- Riduci il tempo di esecuzione di JavaScript: Verifica i tuoi plugin e rimuovi quelli che aggiungono JavaScript pesante di cui non hai bisogno. Slider, widget di condivisione social e page builder complessi spesso contribuiscono in modo significativo. Usa la scheda Coverage in Chrome DevTools (Ctrl+Shift+P, digita "Coverage") per vedere quanto del tuo JS caricato viene effettivamente utilizzato.
- Differisci gli script non critici: Aggiungi l'attributo
deferagli script che non sono necessari per il caricamento iniziale della pagina. Plugin come Flying Scripts ti permettono di differire script specifici fino all'interazione dell'utente (scorrimento, clic o pressione di un tasto). - Minimizza gli script di terze parti: Tracker di analytics, pixel pubblicitari, widget di chat live e embed di social media eseguono tutti JavaScript. Ognuno aggiunge tempo di esecuzione. Consolida dove possibile, caricali dopo l'interazione dell'utente o sostituisci gli embed pesanti con alternative statiche (ad esempio, uno screenshot di un tweet invece dello script di embed di Twitter).
- Suddividi le task lunghe: Le task JavaScript che durano più di 50ms bloccano il thread principale e ritardano le interazioni dell'utente. Se stai scrivendo JavaScript personalizzato, usa
requestAnimationFrameosetTimeoutper suddividere i calcoli pesanti in blocchi più piccoli. - Riduci la dimensione del DOM: Un DOM grande (più di 1500 nodi) rende ogni operazione JavaScript più lenta perché il browser deve elaborare più elementi. Semplifica la struttura della tua pagina, rimuovi i div wrapper non necessari e considera se ogni sezione di contenuto sia veramente necessaria al caricamento iniziale.
Ottimizzazione CLS: smetti di far saltare i contenuti
CLS misura quanto contenuto visibile si sposta inaspettatamente durante il caricamento della pagina. Google considera un CLS inferiore a 0,1 come "buono". I layout shift frustrano gli utenti perché portano a clic errati e a movimenti visivi disorientanti. Ecco come eliminarli:
- Imposta dimensioni immagine esplicite: Includi sempre gli attributi
widtheheightsulle tue immagini. WordPress lo fa automaticamente per le immagini inserite tramite la libreria multimediale, ma le immagini aggiunte manualmente in HTML personalizzato o tramite page builder possono mancare di questi attributi. Senza dimensioni, il browser non sa quanto spazio riservare, facendo saltare il contenuto quando l'immagine si carica. - Riserva spazio per annunci ed embed: Se visualizzi annunci, imposta un
min-heightsul contenitore dell'annuncio che corrisponda alla dimensione prevista dell'annuncio. Lo stesso vale per gli embed di YouTube, i widget dei social media e altri contenuti di terze parti che si caricano in modo asincrono. - Usa font-display swap: Quando i font personalizzati si caricano lentamente, il browser potrebbe nascondere il testo finché il font non è pronto e poi mostrarlo all'improvviso, causando un layout shift. Imposta
font-display: swapnelle tue dichiarazioni@font-facein modo che il browser mostri immediatamente il testo in un font di fallback e passi al font personalizzato quando è pronto:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Evita di iniettare contenuto above the fold dopo il caricamento: Banner, barre di notifica e popup di consenso ai cookie che spingono il contenuto verso il basso causano layout shift. Usa il posizionamento sticky o overlay invece di inserire elementi nel flusso del documento.
- Precarica i webfont: Se il tuo tema usa font personalizzati, precaricali in modo che siano disponibili più velocemente, riducendo il tempo in cui viene visualizzato il font di fallback:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />Plugin WordPress che aiutano con i Core Web Vitals
Diversi plugin affrontano più metriche CWV contemporaneamente:
- WP Rocket: Cache delle pagine, ottimizzazione CSS/JS, lazy loading, delay JS execution. Il singolo plugin più completo per i miglioramenti CWV.
- Autoptimize: Plugin gratuito per la minificazione, concatenazione di CSS e JS e CSS critico inline. Funziona bene insieme a un plugin di caching.
- Perfmatters: Plugin leggero per disabilitare funzionalità WordPress inutilizzate (emoji, embed, dashicons), gestire script per pagina e aggiungere suggerimenti di preload.
- Flying Scripts: Plugin gratuito che differisce l'esecuzione di JavaScript fino all'interazione dell'utente. Particolarmente efficace per script di terze parti come Google Analytics, Facebook Pixel e widget di chat.
- OMGF (Optimize My Google Fonts): Scarica i Google Fonts localmente e ottimizza il loro caricamento, eliminando la richiesta esterna e migliorando sia LCP che CLS.
Monitorare i miglioramenti nel tempo
I dati sul campo dei Core Web Vitals (i dati che Google utilizza per il ranking) si aggiornano su una finestra mobile di 28 giorni. Ciò significa che i miglioramenti non appaiono immediatamente in Search Console. Dopo aver apportato modifiche, aspetta almeno quattro settimane prima di valutare l'impatto in Search Console. Nel frattempo, usa i dati di laboratorio di PageSpeed Insights e l'estensione Chrome Web Vitals per un feedback più veloce. Stabilisci una routine mensile: esegui PageSpeed Insights sulle tue pagine importanti, registra i punteggi e confrontali con il mese precedente. Questo ti aiuta a rilevare le regressioni in anticipo, in particolare dopo aggiornamenti di plugin o modifiche al tema.
Verifica i Core Web Vitals con InspectWP
InspectWP controlla molti fattori che influenzano i Core Web Vitals: codifica dei contenuti (GZIP/Brotli), versione del protocollo HTTP (HTTP/2 o HTTP/3), numero totale di immagini, conteggi di file JS e CSS e dimensione complessiva dell'HTML. Usa queste metriche come punto di partenza per identificare quali aree necessitano di attenzione. Dopo ogni ottimizzazione, esegui una scansione per confermare il miglioramento.