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.
Ti potrebbe interessare
Web Design: suggerimenti per la realizzazione di siti web di successo
- 3 elementi chiave per progettare al meglio il tuo sito web
- 5 vantaggi di un sito web sviluppato in WordPress
- Progetta il sito web in base ai tuoi obiettivi di business
- Usabilità: rendere il tuo sito web facile da utilizzare
- Design di un sito web: cosa fare e cosa non fare
- Plug-in WordPress: i migliori, secondo noi!
- Lead Magnet: cosa sono e come funzionano
Siti web dal Design Responsive
- Cosa vuol dire esattamente sito web ottimizzato per i dispositivi mobili?
- Perché scegliere un sito web dal Design Responsive
- UX design: consigli per massimizzare le conversioni da mobile
Landing Page efficace
Web Performance Optimization
- WebP: il nuovo formato immagine per il web
- Certificato SSL: cos’è e come può influenzare il posizionamento di un sito web sui motori di ricerca
- L’hosting del sito web può influenzare le attività di web marketing?
- Pagespeed Optimization: come velocizzare il tuo sito
- Core Web Vitals: migliorare la User Experience su siti web ed eCommerce
- Google Page Experience Update: di cosa si tratta?
- FAQ su Core Web Vitals, Page Experience e SEO
Curiosità
- La storia del World Wide Web in breve
- Come funzionano i siti web
- La storia del Wapuu, il tenero animaletto mascotte di WordPress
- GDPR: quali sono gli obblighi di legge per i proprietari di siti web?
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.
