Per aiutarti a ottimizzare il tuo sito web per i Core Web Vitals di Google, abbiamo identificato diverse potenziali aree problematiche e come aggiornarle per migliorare i tuoi punteggi Core Web Vitals. Per ulteriori informazioni su cosa misura ciascuno dei Core Web Vitals, come misurarlo e i punteggi ideali, consulta Introduzione ai Core Web Vitals.
Widget personalizzati e pesanti
Sia i widget personalizzati che quelli pesanti possono essere lenti perché caricano contenuti da un servizio di terze parti, il che richiede la chiamata ad API esterne per recuperare e quindi caricare il contenuto.
Nota:
Non tutti i widget personalizzati sono lenti da caricare. Dipende da come è stato creato il widget personalizzato.
Widget pesanti: Mappa, Feed di Twitter, Mi piace di Facebook, Feed/pagina di Facebook, Commenti di Facebook, Audio (Soundcloud, Mixtape), Video (Personalizzato, Youtube, Vimeo), Galleria fotografica, Slider di immagini, Animazioni Lottie, Multiposizione, Google Calendario e Disqus.
Come risolvere
Per migliorare i punteggi Core Web Vitals:
- Rimuovi i widget personalizzati/pesanti dalla parte superiore della pagina e spostali più in basso. Questo eviterà che influiscano negativamente su CLS e FID, caricando e poi spostando i contenuti sottostanti più in basso nella pagina.
- Evita di aggiungere più widget personalizzati/pesanti nella stessa pagina. Ogni widget ha tempi di caricamento diversi, il che può ridurre l'LCP.
- Se un widget personalizzato causa un FID, puoi chiedere allo sviluppatore di migliorare il modo in cui il contenuto viene visualizzato e recuperato utilizzando tecniche come il caricamento asincrono, il recupero dei dati dal thread principale e altro ancora.
Caratteri
I font web possono rallentare il tuo sito web perché il browser deve scaricare e caricare l'intera famiglia di font per ogni combinazione di font e peso. I font vengono scaricati e incorporati automaticamente nell'HTML, fino a 50 KB. Questo velocizza il rendering dei font personalizzati da parte del browser e aiuta a prevenire la CLS. Tuttavia, questo non è sempre sufficiente ed è per questo che consigliamo di utilizzare al massimo due diverse famiglie di font e solo pochi pesi per ciascuna.
Come risolvere
Per migliorare i tuoi punteggi Web Vitals:
- Se hai applicato più di due font, rimuovili da elementi o widget specifici del tuo sito web. Utilizza i font globali per applicare solo i font e i pesi di cui hai bisogno. Una volta completata questa operazione, verranno scaricati solo i font necessari per la corretta visualizzazione del testo.
Google Tag Manager
Google Tag Manager potrebbe scaricare librerie e codice aggiuntivi di cui non hai bisogno, il che può ridurre l'LCP.
Come risolvere
Per migliorare i tuoi punteggi Web Vitals:
- Se possibile, rimuovi Google Tag Manager. Se disponi solo di una o due tecnologie di tracciamento, potrebbe non valere la pena implementare Google Tag Manager.
- Se decidi di implementare Google Tag Manager, segui la nostra guida al monitoraggio di Google Tag Manager. Questo ti aiuterà a garantire che il codice di monitoraggio venga caricato correttamente e non rallenti il sito.
- Non posizionare Google Tag Manager nella parte superiore del sito web. Questo fa sì che venga caricato per primo, prima di altri elementi importanti del sito.
Immagini e video di sfondo
Immagini e video di sfondo sono in genere la risorsa più grande scaricata dai browser sul tuo sito. Quando ci sono troppe immagini, un'unica immagine di grandi dimensioni sopra la piega o un video, può verificarsi un ritardo nell'LCP e un aumento del CLS perché il browser deve scaricare gli elementi prima che possano essere visualizzati. Questo accade in genere con immagini/video di sfondo di grandi dimensioni, presentazioni di immagini, immagini di sfondo con un'altra immagine sopra o con più immagini di grandi dimensioni in fila nella parte superiore della pagina.
Nota:
Per "immagine grande" intendiamo un'immagine che occupa la maggior parte della larghezza della pagina.
Come risolvere
Per migliorare i tuoi punteggi Web Vitals:
- Utilizza una sola immagine sopra la piega.
- Se hai bisogno di più immagini sopra la piega, riduci le dimensioni dell'immagine a un'icona o a una miniatura.
- Sposta i video di sfondo e le presentazioni più in basso nella pagina. Se hai bisogno di una presentazione, limita a tre immagini o meno.