Condividiamo una serie di utili suggerimenti, consigli e strategie per migliorare i tempi di caricamento e download di un sito.
I Benefici della Pagespeed Optimization
Implementare una serie di attività volte ad ottimizzare i tempi di caricamento del sito web aziendale porta una serie di benefici sia per l’utente che per i motori di ricerca.
Benefici per l’utente
I tempi di caricamento dei contenuti incidono sulla percezione dell’esperienza di navigazione dell’utente. Questo porta una miglior qualità di navigazione e impatta sulle conversioni.
Benefici per i motori di ricerca
Più è veloce il download di un documento (tempi in cui il browser percepisce i file che gli stiamo inviando), migliore sarà il crawl budget. Il tempo di caricamento (cioè nella fase in cui il browser scarica file di impostazione CSS e JavaScript e li va a comporre per ottenere il rendering della pagina) di una pagina è sempre più un importante fattore di ranking.
Web performance
Quando parliamo di web performance non ci riferiamo semplicemente a come rendere più veloce la restituzione dei nostri documenti, ma anche come rendere più veloce l’interpretazione delle informazioni da parte del browser.
Sistema client-server: un approfondimento
Per capire bene dove intervenire occorre conoscere a fondo il sistema client-server in cui ci si muove. Vediamo di seguito alcuni dettagli.
Il client chiede al web server un documento o più documenti. Il web server li elabora. Elaborata la richiesta, genera una risposta e la invia al client.
Semplificando il concetto, nel nostro caso il rapporto è tra il browser (o meglio lo spider dei motori di ricerca) ed il web server che elabora la richiesta e la restituisce.
Momenti in cui intervenire
Possiamo quindi intervenire in più punti per andare ad ottimizzare i processi di download e caricamento.
Possiamo intervenire nella fase di richiesta (come da immagine qui sotto) per migliorare i tempi di risoluzione di DNS e di connessione.
Possiamo intervenire in una seconda fase (come da immagine qui sotto) per migliorare i tempi di elaborazione e download dei documenti.
Possiamo intervenire in un ultimo punto (come da immagine qui sotto) per migliorare il rendering della pagina e di tutti i file che la compongono (CSS, JavaScript, file immagini, etc.)
Quindi possiamo intervenire:
- Lato frontend (cioè quando il browser va a richiedere i documenti e li va ad assemblare): impatto del 75/84% sul tempo di caricamento finale
- Backend (interventi implementati lato webserver, CMS…): impatto del 16-25% sul tempo di caricamento finale.
Strumenti per il monitoraggio della Pagespeed Optimization
Per andare ad ottimizzare occorre dotarsi di strumenti utili per il monitoraggio, ad esempi:
- GTmetrix
- Site 24×7
- Solarwind pingdom
Strumenti di diagnostica per la Pagespeed Optimization
PageSpeed Insights di Google fornisce moltissime informazioni e sono state aggiunte nuove metriche come i Core Web Vitals. Il tool da anche indicazioni su dove potremmo andare ad intervenire.
KPI da monitorare nella Pagespeed Optimization
Dopo aver impostato gli strumenti di monitoraggio occorre definire in modo chiaro i KPI da tenere sotto controllo.
- Tempi di caricamento (load time)
- Dimensioni dei file che facciamo scaricare al browser
- Richieste http
In generale è importante considerare il fatto che non esiste una soluzione giusta in assoluto, dipende dal contesto tecnologico del singolo sito.
Dove intervenire?
Si può intervenire a più livelli:
- A livello di web server, andando a raffinare le configurazioni
- A livello di linguaggio di programmazione andando a migliorare, soprattutto quando si parla di ambienti CMS custom, i tempi di elaborazione del risultato che viene mandato al client
- A livello CMS, andando a verificare il funzionamento corretto ed eliminando eventuali plugin o moduli che non servono
- A livello frontend cioè come il browser interagisce con il sito per chiedere i vari documenti
CSS, JS ed Immagini
Per ottimizzare questi aspetti occorre verificare se tutto quello che stiamo richiamando all’interno del codice HTML serve veramente o può essere accorpato. Oppure potrebbe essere eliminato, evitando inutili chiamate http al browser.
Riducendo questi file l’impatto positivo si potrà verificare a livello di:
- Tempi di caricamento
- Chiamate http
Immagini e Pagespeed Optimization
In questo caso occorre lavorare andando a valutare reali requisiti di risoluzione, compressione e formati delle immagini. Ad esempio il formato WebP.
In questo modo andremo ad intervenire su:
- Tempi di caricamento
- Dimensione dei file
- Immagini
Un utile consiglio è quello di valutare il lazy loading per gestire il caricamento delle immagini coerentemente alla visualizzazione nel browser. Quindi far scaricare subito le immagini che devono essere visualizzate immediatamente e far scaricare successivamente le altre.
Chiamate http e peso dei file rimarranno gli stessi, ottenendo però un miglioramento dei tempi di caricamento.
JS e Pagespeed Optimization
Valutare la gestione dell’esecuzione degli script ritardando quelli non necessari per la prima interazione con il contenuto.
Cache e Pagespeed Optimization
Comunicare alla cache del browser per quanto tempo i contenuti (CSS, JS, Immagini…) sono validi, quindi possono essere mantenuti senza doverli ricaricare nelle successive visualizzazioni. Questo accorgimento impatterà su:
- http
- tempi di caricamento
http/2 e Pagespeed Optimization
Andare ad implementare il protocollo http/2 o scegliere un hosting che lo consideri nella configurazione. http2 consente di gestire insieme ai browser le richieste asincrone dei vari documenti. In minor tempo e con un minor numero di connessioni il browser riesce a ricevere più file.
L’impatto è su tempi e richieste http.
Compressione e Pagespeed Optimization
Immagini e altri contenuti possono essere alleggeriti, ma anche compressi. Ad esempio tramite compressione Gzip sul web server. Si guadagna sul peso.
Cache webserver e Pagespeed Optimization
Il webserver tiene in cache la versione di una pagina web che non deve quindi essere rielaborata dai CSS. In pratica viene fatta una fotografia della pagina che resta invariata per un tot di tempo. Quando viene inviata la richiesta, non si interroga più il CMS ma è il browser a restituire direttamente l’immagine salvata. Una volta scaduta (cioè terminati i minuti per cui viene tenuta in memoria) allora viene rigenerata la pagina.
Consente di memorizzare versioni di documenti abbattendo i tempi di elaborazione delle pagine. Questo incide notevolmente sui tempi di caricamento.
CDN e Pagespeed Optimization
Principalmente per i contenuti statici (es: immagini) permette di rendere i file disponibili su server distribuiti, tendenzialmente più vicini agli utenti. Tempi migliori.
DNS e Pagespeed Optimization
Lavorare su DNS ad esempio scegliendo servizi di gestione domini che consentono risoluzione DNS più veloce. Produce un impatto positivo su tempi di caricamento, pesi ed http.
CMS e Plugin
Verificare le prestazioni del CMS. Soprattutto se si tratta di CMS proprietario o altamente personalizzato, o dei plugin installati.
Core Web Vitals come fattori di ranking
PageSpeed Insights di Google già da info su questi aspetti:
- LCP performance di caricamento del blocco principale della pagina
- FID tempo necessario per l’interattività dell’utente
- CLS Stabilità visiva
Suggeriamo la consultazione di questo approfondimento dedicato ai Core Web Vitals.
Simone Rinzivillo, durante il suo intervento al Web Marketing Festival 2020 ha condiviso una serie di utili suggerimenti, consigli e strategie per migliorare i tempi di caricamento e download di un sito. Il post è stato scritto facendo riferimento a questo interessante intervento.
Vuoi saperne di più su come migliorare le Performance del sito web della tua Azienda?
Scopri di più sul nostro servizio di Web Performance Optimization.
Verifica come sono le performance del tuo sito con questi strumenti:
Se ti interessa conoscerci meglio, scoprire come lavoriamo in KAUKY e come potremmo contribuire al progetto della tua azienda:
- chiamaci allo 0385/266133
- scrivi a info@kauky.com
- contattaci per fissare un appuntamento online.
