Caso Studio: Core Web Vitals e migrazione sito web
Il sito web di un nostro cliente presentava un grave problema di performance con un Largest Contentful Paint (LCP) che superava i 32 secondi su dispositivi mobili. Questo rendeva il sito praticamente inaccessibile per molti utenti, soprattutto su dispositivi mobili.
Google Search Console aveva segnalato il problema, evidenziando un LCP eccessivamente alto su tutte le pagine. Nel Giugno 2023, abbiamo deciso di migrare il sito verso una nuova piattaforma, utilizzando Storyblok per la gestione dei contenuti e Next.js con React per il framework, ma i problemi di LCP persistevano.
In questo caso studio ci concentreremo sulla strategia realizzata per trasformare un sito dalle performance lente in un veloce ed efficace strumento di successo.
Migrazione del Sito Web e Ottimizzazione del LCP
Nonostante la migrazione del sito web da Wordpress a una nuova piattaforma moderna, subito dopo la transizione abbiamo notato un aumento nei problemi di LCP, con molte pagine che ne soffrivano. Sembrava che avessimo reso la situazione peggiore, ma la realtà era abbastanza diversa.
Abbiamo infatti scoperto che il principale responsabile del LCP era il modulo di contatto, caricato durante l'evento di caricamento della pagina. La nostra soluzione è stata far sì che il modulo di contatto si attivasse solo quando gli utenti facevano scroll verso il basso, evitando che fosse rilevato come LCP dai motori di ricerca. Questa modifica ha ridotto il numero di pagine con un alto LCP.
Alcune pagine mostravano però ancora un alto LCP dovuto all'immagine nel banner. Per risolvere questo problema, abbiamo ottimizzato ulteriormente l'immagine LCP, ottenendo notevoli miglioramenti nei tempi di caricamento.
Monitoraggio delle Prestazioni con Web Vitals
Abbiamo installato web-vitals.js nel sito per monitorare le metriche Core Web Vitals di utenti reali in tempo reale. Questo ci ha permesso di individuare che il testo nel banner dei cookie veniva ora rilevato come LCP. Abbiamo risolto questo problema riducendo la quantità di testo nel banner dei cookie. Inoltre questo strumento avanzato ci permette di intercettare problemi di performance futuri e intervenire prima che causino danni al ranking o alla user experience.
Dopo queste ottimizzazioni, Google Search Console ha mostrato che tutte le URL avevano ottime metriche di Core Web Vitals.
Sebbene il TBT rimanesse alto, soprattutto a causa dei video YouTube incorporati, abbiamo capito che non influiva sul ranking, essendo una metrica di laboratorio.
Ciò che veramente conta sono i dati di CrUX utilizzati da Google Search Console per generare i rapporti sui Core Web Vitals.
Core Web Vitals: l’impatto sul Business
L'aumento dell'engagement del 44% e la diminuzione del tasso di bounce rate del 28% sono risultati diretti delle ottimizzazioni dei Core Web Vitals e della migrazione del sito.
Inoltre, abbiamo registrato un impressionante aumento delle conversioni dei contatti di lead del 150%. Sebbene altri fattori abbiano potuto contribuire a questo risultato, l'esperienza utente notevolmente migliorata ha giocato un ruolo fondamentale.
In conclusione
Attraverso una serie di ottimizzazioni mirate dei Core Web Vitals, siamo riusciti a trasformare un sito web che richiedeva oltre 30 secondi per caricarsi in uno che si apre in meno di 2 secondi. Questo ha avuto un impatto significativo sull'engagement degli utenti, sul tasso di rimbalzo e sulle conversioni. L'ottimizzazione dei Core Web Vitals è essenziale per migliorare l'esperienza utente e ottenere risultati concreti per il business.
La migrazione del sito e l'ottimizzazione dei Core Web Vitals hanno portato a un successo notevole.
Risorse:
Usare 'fetchpriority' per ottimizzare il caricamento delle immagini HTML
Giovanni Coppola
