PageSpeed è da molto tempo un fattore di ranking rilevante: i risultati in termini SEO e per l’esperienza utente dei tuoi visitatori
Fino a poco tempo fa, non era così semplice misurare esattamente le performance di un sito web: diversi strumenti, diverse teorie, diverse metriche… Ma dall’introduzione del core web vitals, oggi è possibile avere una chiara panoramica accedendo semplicemente a Google Search Console, che ci indica quante e quali pagine necessitano di miglioramenti (sulla base dei parametri LCP, FID e CLS, che abbiamo analizzato in questo articolo). Vediamo quindi come apportare tali miglioramenti.
1. Configurare dimensioni immagini
Questo è un errore piuttosto comune nell’era del responsive: se non si indica nel codice la dimensione di un’immagine, il browser dovrà ogni volta adeguarla alla pagina mostrata su quello specifico device, e questo influirà negativamente sui tempi di caricamento ma sopratutto sul parametro CLS (elementi che si muovono durante il caricamento di pagina), molto importante per il googlebot mobile. Sarebbe opportuno, pertanto, indicare sempre le dimensioni di un’immagine o un video con gli attributi “width” e “height”.
2. Utilizzati i formati più recenti per le immagini… e comprimerli
Oggi, se paragoniamo i formati più conosciuti quali JPEG e PNG con alcuni dei formati più recenti quali AVIF, JPEG2000 o WebP, ci possiamo rendere conto che i primi sono forse un tantino superati. WebP, ad esempio, è un formato che riduce mediamente il peso dell’immagine del 30% rispetto a PNG o JPEG alla stessa identica qualità. Oggi è supportato dalla quasi totalità dei browser, ed è pertanto da preferire sopratutto per immagini di dimensioni importanti, sfruttando comuni plugin di conversione disponibili per i più comuni CMS.
Non dimenticarti poi di comprimere le tue immagini, puoi arrivare a ridurne il peso fino al 75%, con evidenti benefici in termini di performance. Per WordPress consigliamo il plugin WP Smash.
3. Deferire le immagini offscreen
Le immagini offscreen sono quelle che l’utente non visualizza “above the fold”, ovvero nello spazio visivo inizialmente disponibile sul sito: esse quindi saranno visualizzate solo dopo uno scroll iniziale più o meno prolungato. E’ buona prassi, ed è questo un elemento essenziale nell’ottimizzazione Page Speed, deferire il caricamento di tali risorse in un secondo momento: Google infatti misura il page speed basandosi solo sui contenuti “above the fold”, ecco perchè tutto il resto può essere rimandato con un lazy loading o su richiesta dell’utente.
4. Deferire css non utilizzati e minimizzare quelli utilizzati
Il browser analizza l’intera DOM (la pagina completa) e verifica quali css deve applicare ad ogni porzione di essa: è evidente che se nel codice di pagina sono presenti css non utilizzati, il tempo di analisi sarà superiore, è quindi consigliabile eliminarli. Al tempo stesso, va considerato che i file css spesso contengono elementi non necessari al browser quali commenti, spazi, interruzioni di linea o pezzi di codice inutilizzati: se i file sono compilati bene, non avrai grandi benefici nel minimizzarli, ma è un’operazione davvero semplice su molti CMS e pertanto vale la pena implementarla.
5. Estrarre i css critici
I css sono risorse che bloccano il rendering della pagina: ciò significa, in altre parole, che fino a quando il browser non li avrà individuati ed applicati interamente, la pagina non sarà visibile. E’ evidente, pertanto, che sarebbe opportuno estrarre i cssi utili “above the fold” (inserendoli nell’header della tua pagina) da tutti quelli che possono essere caricati in un secondo momento. Questo migliorerà in modo tangibile il tuo score LCP, rendendo il caricamento di pagina più veloce.
6. Deferire codice di terze parti
Spesso il codice di terze parti di tipo javascript, quale ad esempio i bottoni del social sharing o video “embeddati” da altre fonti, tendono a risultare pesanti nel caricamento della pagina: questo perchè quando il browser incontra questi elementi, assegna loro una priorità rispetto al codice html, con inevitabile aumento dei tempi di caricamento. Soluzione: anche in questo caso rilevare quali elementi di terze parti non sono indispensabili per la fruizione della pagina “above the fold”, e caricarli in modo asincrono (download e successivo render su richiesta).
6. Precaricare le risorse essenziali
Spesso il browser carica le risorse ritenute più importanti, quali i file css, prima di script o immagini, ma non sempre questo comportamento è l’ideale: l’unico modo per condizionare la priorità di download delle risorse è quello di utilizzare il tag nelle tue pagine. Questo tag, in sostanza, informa il browser che per quella pagina è essenziale la risorsa “x” (un’immagine, un video, uno script, un font ecc…) per il rendering “above the fold”, e pertanto ne richiede la disponibilità il più presto possibile. E’ un accorgimento molto utile sopratutto in pagine complesse e che necessitano di diversi elementi per essere visualizzate dall’utente in modo efficace.
6. Ottimizzare il browser caching
Il browser caching, solitamente abilitato di default, consente di non dover caricare da zero ogni elemento quando si visita una pagina web una seconda volta. Tuttavia, il funzionamento standard di tale automatismo prevede che solo determinate risorse vengano “cachate” e per un periodo di tempo limitato. L’obiettivo è quello di cachare quante più risorse possibile e più a lungo possibile, ed al tempo stesso essere certi che quando un elemento subisce un aggiornamento (es. cambia un’immagine del tuo slideshow iniziale), esso venga riconsiderato e reso disponibile all’utente. Esistono quindi tecniche di gestione dei parametri di browser caching, ed a tal proposito consigliamo la lettura di questa guida (in inglese): https://web.dev/http-cache/
Abbiamo analizzato, chiaramente in modo non totalmente esaustivo, alcuni dei principali aspetti che possono condizionare la velocità di pagina, intesa ed interpretata secondo l’algoritmo core web vitals. Sono certamente tra i più efficaci e relativamente semplici da implementare, quindi un’ottima base di partenza per rendere il tuo sito “pagespeed friendly”.