CMS headless: Jamstack per la velocità di un sito

Il sito di un nostro cliente, makeupdesignory.it, era un Wordpress con prestazioni molto scadenti. Un utente che atterrava sulla homepage con un dispositivo mobile medio e una connessione 4G avrebbe visto qualcosa comparire sulla pagina solo dopo circa 7 secondi (start render), guardando una pagina bianca vuota, e avrebbe visualizzato contenuti utili solo dopo aver atteso altri 20 secondi completi (LCP).

Molti dei problemi erano causati dalle prestazioni intrinseche di Wordpress unite a un hosting scadente, generando un TTFB (il cosiddetto tempo al primo byte) molto elevato.

Inoltre, c'erano altri problemi legati al modo in cui il codice del tema era scritto, con una scarsa ottimizzazione di come le risorse come Javascript, immagini e CSS venivano caricate dai browser. Ciò causava a sua volta il ritardo nel caricamento di contenuti importanti, come immagini e testo, che avrebbero dovuto essere immediatamente visibili all'utente. 

Dato che il pubblico di questo sito era composto per oltre il 70% da utenti mobile, è diventato evidente che le prestazioni fossero un fattore chiave non solo per aumentare la posizione nelle ricerche organiche, dal momento che i Core Web Vitals sono variabili di ranking, ma soprattutto per migliorare l'esperienza utente. 

Questo avrebbe a sua volta ridotto il bounce rate e migliorato le conversioni.

Headless CMS: l’utilizzo di Jamstack

Abbiamo preso in carico il progetto di redesign del sito utilizzando un'architettura Jamstack.

CMS come Wordpress, Drupal, Magento, ecc. sono presenti da molto tempo e sono eccellenti. Detto questo, tali architetture soffrono notoriamente di alcuni problemi strutturali come prestazioni scadenti e rischi per la sicurezza.

I siti web costruiti con il framework Jamstack separano il codice (Javascript) dall'infrastruttura (API) e dal contenuto (Markup), rendendo più facile la scalabilità.

In generale, le architetture web Jamstack offrono questi vantaggi:

• Velocità: le pagine sono pre-renderizzate in modo che il server non debba generare una pagina quando viene richiesta.
• Sicurezza: poiché c'è una separazione tra frontend e backend, Jamstack è mediamente molto più sicuro rispetto ai tradizionali CMS monolitici.
• Scalabilità: poiché con Jamstack il server fornisce solo risorse statiche, supera i limiti dei tradizionali CMS.
• Gestione dei contenuti semplificata: L'utilizzo di un CMS headless come Storyblok rende più facile per il team gestire e aggiornare i contenuti del sito.
• Miglioramento delle prestazioni SEO: Le prestazioni migliorate del sito possono influenzare positivamente il posizionamento nei motori di ricerca.
• Flessibilità e adattabilità: La separazione dei componenti rende il sito più flessibile e adattabile a diverse esigenze e tecnologie emergenti.

Per questo progetto, i nostri sviluppatori hanno scelto Gatsby come CMS headless supportato da Storyblok per la gestione dei contenuti.

Ciò ha garantito un framework solido per il backend combinato a una gestione dei contenuti facile per il team da gestire, per la quale inoltre forniamo anche un semplice e breve percorso di formazione.

Ottimizzazione delle prestazioni web

Prima del lancio e durante le prime 2-3 settimane del nuovo sito web, ci siamo presi il tempo per testare, diagnosticare e implementare strategie per massimizzare le prestazioni di un sito che già si caricava molto più velocemente. Il risultato finale, nelle stesse condizioni di test, è stato un LCP di soli 2,4 secondi!

Nell’immagine possiamo vedere come effettivamente l'utente avrebbe dovuto aspettare quasi 30 secondi per vedere qualcosa di utile sulla homepage.

Grazie a un buon design della homepage, questo ha comportato un contenuto molto più stabile, portando a un CLS di soli 0,03, ben al di sotto del massimo consentito da Google per superare il test Core Web Vitals di 0,1.

Ecco la differenza con il sito web prima della migrazione.

L'impatto sul business

• Core Web Vitals

Subito dopo il lancio del sito, il rapporto Core Web Vitals su Google Search Console (intorno al 3/6/23) ha mostrato miglioramenti. Ulteriori ottimizzazioni hanno portato a risultati ancora migliori in Aprile.

I Core Web Vitals sono un fattore di ranking che può diventare cruciale in mercati altamente competitivi. Può fare la differenza tra dominare la posizione in cima alle ricerche organiche.

• Bounce rate

Mentre altri fattori come un nuovo design più user-friendly e la navigazione del sito potrebbero aver avuto un impatto sul bounce rate, siamo certi che una parte della diminuzione dal 40% a circa il 20% del bounce rate può essere attribuita al miglioramento dell'esperienza utente.

Ciò mostra un maggiore coinvolgimento degli utenti, che può portare a un chiaro aumento del tasso di conversione, come mostrato in molti studi di casi indipendenti.