Per aiutarti a ottimizzare il tuo sito per i Core Web Vitals di Google, abbiamo identificato delle potenziali aree di intervento, oltre al modo in cui aggiornarle per migliorare i punteggi. Per ulteriori informazioni sul significato di ciascuna metrica, su come misurarle e sui punteggi ideali, vedere Introduzione ai Core Web Vitals.
Widget personalizzati e pesanti
I widget personalizzati o pesanti possono essere lenti perché caricano contenuti da un servizio di terzi, cosa che richiede il contatto con un'API esterna per recuperare e caricare il contenuto.
Non tutti i widget personalizzati si caricano lentamente: dipende da come sono stati creati.
Widget pesanti: mappe, feed di Twitter, Mi piace di Facebook, feed/pagina di Facebook, commenti di Facebook, audio (Soundcloud, Mixtape), video (personalizzati, YouTube, Vimeo), galleria fotografica, slider di immagini, animazioni Lottie, multi-localizzazione, Google Calendar e Disqus.
Come risolvere
Per migliorare i punteggi di Core Web Vitals:
Rimuovi i widget personalizzati/pesanti dalla parte alta della pagina, spostandoli in basso. In questo modo non potranno i influire negativamente su CLS e FID, caricandosi e facendo scorrere gli altri contenuti verso il basso.
Evita di aggiungere più widget personalizzati/pesanti sulla stessa pagina. Ciascun widget ha tempi di caricamento diversi, che possono ridurre l'LCP.
Se un widget personalizzato causa un notevole FID, puoi chiedere allo sviluppatore di migliorare resa e recupero dei contenuti mediante tecniche quali il caricamento asincrono, il recupero dei dati dal thread principale e altro ancora.
eCommerce
Store viene caricato dinamicamente con JavaScript. Ciò può influire sul CLS perché il caricamento dello Store richiede più tempo rispetto al resto dei contenuti della pagina. Per questo motivo, ti consigliamo di spostare lo Store nella parte bassa della pagina anziché in alto.
Come risolvere
Per migliorare i punteggi di Core Web Vitals:
Aggiungi contenuti sopra lo Store invece di metterlo nella parte superiore della pagina. Questo fa sì che lo Store non compaia come contenuto iniziale.
Crea le tue pagine di categoria o usa il widget Galleria prodotti Store per crearle. Le immagini native e gli elementi della galleria di foto vengono caricati più velocemente rispetto allo Store, perché hanno meno contenuto e codice di cui eseguire il rendering prima di essere visualizzati.
Caratteri
I font web possono rallentare il tuo sito perché il browser deve scaricare e caricare l'intera famiglia di caratteri per ogni combinazione di font e spessore. I caratteri vengono scaricati e incorporati automaticamente all'interno dell'HTML, fino a 50 KB. In questo modo si accelera la velocità con cui il browser esegue il rendering dei font personalizzati e si previene il CLS. Tuttavia, questo accorgimento non è sempre sufficiente ed è per questo che consigliamo di utilizzare al massimo due diverse famiglie di caratteri, senza variarne eccessivamente il peso.
Come risolvere
Per migliorare i punteggi di Web Vitals:
Se usi più di due font, rimuovili da elementi o widget specifici sul tuo sito web. Usa caratteri globali per applicare solo i caratteri e i pesi di cui hai bisogno. Al termine di questa operazione, verranno scaricati solo i font necessari per la corretta visualizzazione del testo.
Google Tag Manager
Google Tag Manager può scaricare librerie e codici aggiuntivi di cui non c'è bisogno, riducendo così l'LCP.
Come risolvere
Per migliorare i punteggi di Web Vitals:
Se possibile, rimuovi Google Tag Manager. Se hai solo una o due tecnologie di tracciamento, potrebbe non valere la pena implementare Google Tag Manager.
Se implementi Google Tag Manager, segui la nostra guida al monitoraggio di Google Tag Manager per assicurarti di caricare il codice di monitoraggio correttamente, in modo che non rallenti il sito.
Non mettere Google Tag Manager nell'intestazione del sito web, perché finirebbe per caricarsi per primo, prima di altri elementi importanti del sito.
Immagini e video di sfondo
Le immagini e i video di sfondo in genere sono la risorsa più pesante che i browser scaricano dal tuo sito. Se ci sono troppe immagini, o un'immagine o video molto pesanti nel contenuto iniziale, questo può causare un ritardo nella LCP e un aumento del CLS, perché il browser deve scaricare tutti gli elementi prima di poter eseguire il rendering. In genere ciò accade con immagini di sfondo di grandi dimensioni, presentazioni di immagini, immagini di sfondo con un'altra immagine sopra o con più immagini di grandi dimensioni su una sola riga nella parte superiore della pagina.
Per “immagine grande” si intende un'immagine che occupa la maggior parte della larghezza della pagina.
Come risolvere
Per migliorare i punteggi di Web Vitals:
Cerca di inserire una sola immagine tra i contenuti iniziali.
Se hai bisogno di avere più immagini tra i contenuti iniziali, riducine le dimensioni a icona o miniatura.
Sposta i video di sfondo e le presentazioni nella parte bassa della pagina. Se vuoi inserire una presentazione, limitala a un massimo di tre immagini.