Core Web Vitals in WordPress: come misurarli e migliorarli
I Core Web Vitals sono le metriche che Google usa per valutare l’esperienza utente del tuo sito. Dal 2021 sono un fattore di ranking: siti con buoni Core Web Vitals hanno un vantaggio nel posizionamento rispetto a quelli con metriche scadenti. In questa guida ti spiego cosa sono, come misurarli e come ottimizzarli in WordPress.
Le tre metriche dei Core Web Vitals
I Core Web Vitals si compongono di tre metriche:
- Largest Contentful Paint (LCP): misura il tempo necessario per caricare l’elemento più grande visibile nella viewport (di solito un’immagine hero o un blocco di testo). L’obiettivo è sotto i 2,5 secondi.
- Interaction to Next Paint (INP): misura la reattività del sito alle interazioni dell’utente (click, tap, pressione tasti). Sostituisce il vecchio FID. L’obiettivo è sotto i 200 millisecondi.
- Cumulative Layout Shift (CLS): misura la stabilità visiva della pagina durante il caricamento. Se gli elementi si spostano mentre la pagina carica, il CLS peggiora. L’obiettivo è sotto 0,1.
Come misurare i Core Web Vitals
Ci sono due tipi di dati: dati di laboratorio (simulati) e dati di campo (utenti reali). Per il ranking di Google contano i dati di campo.
Google PageSpeed Insights: mostra sia i dati di campo (dal Chrome User Experience Report) sia quelli di laboratorio. È il primo strumento da consultare.
Google Search Console: vai nel report Core Web Vitals per vedere lo stato di tutte le pagine del sito, raggruppate per tipo di problema. Distingue tra mobile e desktop.
Chrome DevTools: nella scheda Performance, puoi registrare il caricamento della pagina e analizzare LCP, INP e CLS in dettaglio.
Web Vitals Extension: un’estensione Chrome che mostra i Core Web Vitals in tempo reale mentre navighi il sito.
Migliorare il Largest Contentful Paint (LCP)
L’LCP dipende dalla velocità con cui il browser riesce a scaricare e renderizzare il contenuto principale. Le ottimizzazioni più efficaci:
- Ottimizza l’immagine hero: se l’elemento LCP è un’immagine, comprimila, servila in formato WebP e aggiungile un tag preload nell’head.
- Implementa il Critical CSS: inline il CSS necessario per il contenuto above the fold ed elimina il CSS render-blocking.
- Usa un plugin di caching: la cache genera pagine HTML statiche che vengono servite senza eseguire PHP e query al database.
- Abilita la compressione Gzip/Brotli: riduce le dimensioni dei file trasferiti del 70-80%.
- Riduci il Time to First Byte (TTFB): hosting più veloce, Redis Object Cache e CDN migliorano il TTFB.
Migliorare l’Interaction to Next Paint (INP)
L’INP misura quanto velocemente il sito risponde alle interazioni. Un INP alto è causato da JavaScript che blocca il thread principale del browser:
- Riduci il JavaScript: rimuovi plugin inutilizzati che caricano script su tutte le pagine. Usa un plugin come Asset CleanUp per disabilitare gli asset dove non servono.
- Defer il JavaScript non critico: aggiungi l’attributo defer ai tag script per caricarli senza bloccare il rendering. Plugin come FlyingPress e WP Rocket lo fanno automaticamente.
- Evita il long task: se un singolo script richiede più di 50ms per eseguirsi, blocca le interazioni. Identifica i long task con Chrome DevTools (scheda Performance) e ottimizza o rimuovi gli script responsabili.
- Minimizza i ricalcoli del layout: evita di modificare il DOM in risposta allo scroll o ad altre interazioni frequenti.
Migliorare il Cumulative Layout Shift (CLS)
Il CLS peggiora quando gli elementi della pagina si spostano dopo il caricamento iniziale. Le cause più comuni in WordPress:
- Immagini senza dimensioni: se i tag <img> non hanno attributi width e height, il browser non può riservare lo spazio prima del download. WordPress aggiunge automaticamente queste dimensioni dal 5.5, ma verifica che il tuo tema non le rimuova.
- Contenuti caricati dinamicamente: banner pubblicitari, widget social e embed che si caricano dopo il contenuto principale spostano gli elementi. Riserva lo spazio con un contenitore a dimensioni fisse.
- Font web: quando il font di fallback viene sostituito dal font web, il testo cambia dimensione. Usa font-display: swap e scegli un font di fallback con metriche simili.
- Barre di notifica e cookie banner: se appaiono dopo il caricamento e spostano il contenuto, aggiungile in posizione fissa (fixed) sopra il contenuto.
Plugin per ottimizzare i Core Web Vitals
Ecco i plugin più efficaci per migliorare i Core Web Vitals in WordPress:
- FlyingPress: plugin all-in-one che gestisce caching, Critical CSS, lazy loading, preload e ottimizzazione JavaScript.
- WP Rocket: il plugin di caching più popolare, con funzionalità di ottimizzazione CSS e JavaScript integrate.
- Perfmatters: plugin leggero per disabilitare funzionalità WordPress non necessarie e gestire il caricamento degli asset per pagina.
- EWWW Image Optimizer: ottimizza automaticamente le immagini e le converte in WebP.
Serve assistenza?
Se i Core Web Vitals del tuo sito WordPress sono scadenti e vuoi migliorarli, il team di SoccorsoWP può analizzare il sito e ottimizzare tutte le metriche. Apri un ticket e migliora il tuo posizionamento su Google.
