Indice dei contenuti
    Pagespeed Optimization

    Pagespeed Optimization: come velocizzare il tuo sito

    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.


    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.

    IMG dall’intervento di Simone Rinzivillo al WMF2020

    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.

    IMG dall’intervento di Simone Rinzivillo al WMF2020

    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.

    IMG dall’intervento di Simone Rinzivillo al WMF2020

    Possiamo intervenire in una seconda fase (come da immagine qui sotto) per migliorare i tempi di elaborazione e download dei documenti.

    IMG dall’intervento di Simone Rinzivillo al WMF2020

    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.)

    IMG dall’intervento di Simone Rinzivillo al WMF2020

    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

    Per andare ad ottimizzare occorre dotarsi di strumenti utili per il monitoraggio, ad esempi:

    • GTmetrix
    • Site 24×7
    • Solarwind pingdom

    Strumenti di diagnostica

    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

    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

    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

    Valutare la gestione dell’esecuzione degli script ritardando quelli non necessari per la prima interazione con il contenuto.


    Cache

    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

    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

    Immagini e altri contenuti possono essere alleggeriti, ma anche compressi. Ad esempio tramite compressione Gzip sul web server. Si guadagna sul peso.


    Cache webserver

    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

    Principalmente per i contenuti statici (es: immagini) permette di rendere i file disponibili su server distribuiti, tendenzialmente più vicini agli utenti. Tempi migliori.


    DNS

    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.


    Paola Rovati

    Sii il primo a lasciare un commento.

    I tuoi commenti