Google Page Experience: cosa abbiamo fatto

In cosa consiste questo Update? In soldoni Google, che da sempre pone le esigenze dell’utente al primo posto, da ora in poi farà ancora più attenzione a quanto un sito risponde velocemente al caricamento, basandosi sui Core Web Vitals. Si tratta fondamentalmente di indicatori specifici della User Experience che valutano:

• la velocità di caricamento della pagina
• la stabilità di caricamento degli elementi presenti nella pagina
• l’interattività della pagina

Di fronte a questa prospettiva imminente, gli animi del nostro team SEO e soprattutto di quello dei web developer erano già in fibrillazione. Devi sapere che l’area developer di Lotrèk è formata da tanti baldi giovani, con il cervello sempre in movimento e pronto a sfornare idee brillanti volte per pompare le performance dei siti e degli e-Commerce che sforniamo. Ricordo ancora molto bene l’impegno messo dai colleghi impegnati nella realizzazione del sito del nostro cliente Barco Reale per raggiungere punteggi sempre più alti su Page Speed di Google. 

Come ci siamo mossi dunque per affrontare questo cambiamento? 

Un team all’opera per migliorare la User Experience

Devo essere sincera, la velocità di caricamento dei siti web è da sempre un nostro pallino, quindi questo Update non ci ha colti alla sprovvista. Ti voglio quindi raccontare quelli che sono gli interventi principali e gli aspetti fondamentali che curiamo per avere tempi di reazione brillanti durante il loading. 

In agenzia realizziamo sia soluzioni custom che progetti basati su WordPress a seconda degli obiettivi e delle esigenze del cliente. Se quelli custom solitamente non danno problemi lato performance di caricamento, poiché pensati fin dall’origine per essere celeri, su quelli WordPress dobbiamo mettere più energie, alla luce delle caratteristiche stesse di questo CMS che per sua natura - e soprattutto per i plugin che si possono installare - può peccare sulla velocità. 

Ecco svelati i nostri segreti:

• immagini: croce e delizia di ogni SEO specialist. Per esperienza, durante le Audit di un sito, sono spesso le immagini - troppo pesanti - a impattare sulle performance di caricamento. Il trucco è caricarle in formati moderni, già ottimizzate, con grandezze (width e height) dichiarate, responsive e quindi dotate dell’attributo srcset e con il lazy load. Ecco anche le linee guide di Google in merito. 
• font: per velocizzare il caricamento, impostiamo rel="preload" e per inizializzarli impostiamo la feature CSS font-display, così da gestirne appunto la visualizzazione in base a quando il font è scaricato e pronto all’uso.
• Javascript e CSS: altro elemento che può rivelarsi un incubo per la velocità. In fase di scrittura teniamo sempre un occhio di riguardo alle performance, adottando tecniche di debounce e throttle quando necessario. Si tratta di tecnicismi che permettono di ritardare o raggruppare l’esecuzione di eventi così da ottimizzare il caricamento della pagina.

Un altro mantra quando si parla di Javascript e di CSS è quello di dosarli q.b. come in cucina e impiegare risorse esterne solo quando strettamente necessario. Ad esempio se utilizziamo un framework di Bootstrap, non usiamo tutto il pacchetto, ma prendiamo solo quello che ci serve. 

Il passaggio successivo è quello di ottimizzare i bundle finali di Javascript e CSS, adottando tecniche di minificazione ad esempio. Tutto ciò consiste nell’eliminare il superfluo, senza compromettere il corretto funzionamento. Per i profani, è una pulizia stile Marie Kondo ;) 

Alla base di tutto questo ragionamento, c’è la logica secondo la quale usiamo risorse esterne - che potrebbero mettere a rischio le performance di caricamento del sito - solo quando servono. Ad esempio se sul sito è prevista la presenza di un carosello per lo scorrimento di immagini o testo, è molto probabile che lo realizzeremo da zero anziché affidarci a soluzioni già esistenti. 

Sì, questo approccio richiede un po’ più tempo, ma il risultato ottenuto è migliore perché così facendo siamo sicuri di quello che mettiamo nel codice. 

Altra situazione similare è quella relativa all’impiego di plugin. Esistono siti WordPress che ne sono così infarciti, da diventare dei macigni. Noi amiamo usarli come ultima spiaggia, altrimenti ci affidiamo a soluzioni sviluppate in casa, che ottimizziamo e curiamo con attenzione. 

Se vuoi un aiuto per velocizzare il tuo sito web oppure stai pensando di crearne uno super performante, contattaci per un preventivo! 

PS: un ringraziamento al mio collega Andrea Morosi, Lead del team Front end Development, che mi ha dato buona parte delle info contenute in questo articolo.