Come ottimizzare i Core Web Vitals di WordPress

I Core Web Vitals sono le metriche di Google che misurano l’esperienza utente del tuo sito in termini di velocità, reattività e stabilità visiva. Dal 2021, sono un fattore di ranking SEO ufficiale: un sito con buoni Core Web Vitals ha un vantaggio nel posizionamento rispetto a uno con metriche scarse. In questa guida ti mostro come misurare e ottimizzare i Core Web Vitals del tuo sito WordPress con interventi concreti e misurabili.

Le tre metriche fondamentali

I Core Web Vitals si compongono di tre metriche:

• LCP (Largest Contentful Paint): misura il tempo necessario per rendere visibile l’elemento più grande della viewport (di solito l’immagine hero o il titolo principale). Un buon LCP è sotto i 2.5 secondi.
• INP (Interaction to Next Paint): misura la reattività del sito alle interazioni dell’utente (clic, tap, input). Un buon INP è sotto i 200 millisecondi. Ha sostituito il FID (First Input Delay) nel 2024.
• CLS (Cumulative Layout Shift): misura la stabilità visiva della pagina, ovvero quanto gli elementi si spostano durante il caricamento. Un buon CLS è sotto 0.1.

Come misurare i Core Web Vitals

Puoi misurare i Core Web Vitals con diversi strumenti:

• PageSpeed Insights: lo strumento principale di Google. Mostra sia dati di laboratorio (simulati) che dati di campo (da utenti reali Chrome). I dati di campo sono quelli usati per il ranking.
• Google Search Console: la sezione “Esperienza sulle pagine” mostra lo stato dei Core Web Vitals per tutto il sito, raggruppando le pagine in buone, da migliorare e scarse.
• Chrome DevTools: il tab Performance permette analisi dettagliate del caricamento con waterfall completo.
• Web Vitals Extension: un’estensione Chrome che mostra i Core Web Vitals in tempo reale mentre navighi il sito.

Testa sempre sia la versione desktop che quella mobile. Le prestazioni mobile sono solitamente peggiori e sono quelle che Google usa per il ranking (mobile-first indexing).

Ottimizzare il LCP

Il LCP dipende principalmente dalla velocità con cui l’elemento più grande viene caricato e renderizzato. Le cause più comuni di un LCP lento e le soluzioni:

• Immagine hero non ottimizzata: l’immagine principale della pagina è spesso l’elemento LCP. Comprimi l’immagine, usa il formato WebP o AVIF e specifica sempre gli attributi width e height. Un plugin come ShortPixel o Imagify comprime automaticamente le immagini al caricamento.
• Preload dell’immagine LCP: aggiungi un tag link rel=”preload” nell’head per l’immagine hero, dicendo al browser di iniziare a scaricarla immediatamente senza aspettare il parsing del CSS.
• Non usare lazy load sull’immagine LCP: il lazy loading ritarda il caricamento delle immagini fino a quando non sono visibili nel viewport. L’immagine LCP è già nel viewport — il lazy loading la rallenta. Escludi l’immagine hero dal lazy loading.
• Server lento (TTFB alto): se il server impiega troppo tempo a rispondere, l’LCP ne risente direttamente. Attiva la cache di pagina e ottimizza il server come descritto nella nostra guida sul TTFB.
• CSS e JS bloccanti il rendering: fogli di stile e script nel tag head bloccano il rendering della pagina. Minimizza il CSS critico, differisci i CSS non essenziali e carica i JavaScript con defer o async.

Ottimizzare l’INP

L’INP misura quanto rapidamente il sito risponde alle interazioni. Un INP alto significa che il browser è impegnato a eseguire JavaScript pesante e non risponde immediatamente ai clic dell’utente. Le soluzioni:

• Ridurre il JavaScript: ogni script caricato compete per il tempo di esecuzione del browser. Rimuovi i JavaScript non necessari con un plugin come Asset CleanUp che permette di disabilitare script specifici per pagina.
• Differire gli script non critici: usa l’attributo defer per gli script che non sono necessari per il rendering iniziale. WP Rocket e Flying Scripts possono ritardare il caricamento degli script fino alla prima interazione dell’utente.
• Evitare layout complessi: elementi con animazioni CSS pesanti, carousel con molte slide o mega menu con centinaia di voci richiedono elaborazione significativa a ogni interazione.
• Ridurre i plugin che aggiungono JavaScript frontend: plugin di chat, popup, countdown, social sharing e analytics aggiungono tutti script che competono per le risorse del browser. Minimizza il numero di script frontend.

Ottimizzare il CLS

Il CLS misura gli spostamenti inaspettati degli elementi durante il caricamento. Nulla è più frustrante di cliccare un pulsante e vedere la pagina spostarsi proprio in quel momento, facendoti cliccare qualcos’altro. Le cause e soluzioni:

• Immagini senza dimensioni: se le immagini non hanno attributi width e height, il browser non sa quanto spazio riservare fino al caricamento dell’immagine. Quando l’immagine appare, il contenuto sottostante si sposta. WordPress aggiunge automaticamente le dimensioni alle immagini caricate nella libreria media — il problema si verifica con immagini aggiunte manualmente nel codice.
• Font che causano FOUT/FOIT: il caricamento dei font web può causare un flash di testo non stilizzato (FOUT) o un flash di testo invisibile (FOIT). Usa font-display: swap nei tuoi @font-face e precarica i font critici.
• Annunci e embed: banner pubblicitari, video YouTube incorporati e widget social che si caricano in ritardo spostano il contenuto. Riserva spazio fisso per questi elementi con dimensioni CSS esplicite.
• Contenuto iniettato dinamicamente: banner di cookie consent, barre di notifica e popup che appaiono dopo il caricamento possono spostare il contenuto. Posizionali con position: fixed per evitare che influenzino il layout.

Plugin consigliati per i Core Web Vitals

• WP Rocket: il plugin più completo per le prestazioni. Gestisce cache, preload, lazy loading, minificazione, rimozione CSS inutilizzato e delay JavaScript in un unico strumento.
• Perfmatters: plugin leggero per disabilitare funzionalità WordPress non necessarie, gestire script per pagina e ottimizzare il caricamento delle risorse.
• ShortPixel o Imagify: compressione automatica delle immagini e conversione in WebP.
• Asset CleanUp: gratuito, permette di disabilitare CSS e JavaScript di plugin specifici su pagine dove non servono.
• Flying Scripts: gratuito, ritarda il caricamento degli script non critici fino alla prima interazione dell’utente.

Vuoi migliorare i Core Web Vitals?

L’ottimizzazione dei Core Web Vitals richiede un’analisi specifica per ogni sito, perché le cause delle metriche scarse variano in base a tema, plugin, contenuti e configurazione server. Il team di SoccorsoWP può eseguire un audit completo dei Core Web Vitals del tuo sito, identificare i problemi specifici e implementare le ottimizzazioni necessarie per portare tutte le metriche nel verde. Apri un ticket e migliora il ranking del tuo sito.