In questo articolo parliamo di Web Performance Optimization per siti web ed eCommerce. Cosa si intende per web performance? Come si misurano le performance web? Come si fa a misurare e migliorare la velocità di un sito? Cerchiamo di rispondere a queste domande.
Cosa sono le Web Performance?
Quando parliamo di web performance non ci riferiamo più solamente alla velocità di caricamento di una pagina web. I fattori che vengono presi in considerazione per valutare un sito web o eCommerce sono ormai moltissimi e spaziano dalle performance server side all’esperienza utente.
KPI per la misurazione delle Web Performance
In passato i principali indicatori di performance erano:
- Speed Index: misura la velocità con cui il contenuto viene visualizzato durante il caricamento della pagina.
- First Meaningful Paint (FMP): misura il tempo in cui il contenuto principale di una pagina risulta visibile all’utente.
- Time to Interactive (TTI): valuta in quanto tempo la pagina web, oltre ad essere correttamente visualizzata, è effettivamente funzionante e consente all’utente di interagire con essa.
Google ha poi introdotto altri KPI per la misurazione delle web performance che, per la prima volta, tengono in massima considerazione l’esperienza utente.
Si tratta dei Core Web Vitals.
Nel prossimo futuro i Core Web Vitals saranno discriminanti per il posizionamento delle pagine web sui motori di ricerca (in particolare su Google), sono quindi di fondamentale importanza per la SEO.
Core Web Vitals
Nel 2020 Google ha introdotto i cosiddetti Core Web Vitals, ossia fattori di ranking che assumeranno un valore crescente negli anni a venire. Queste metriche risulteranno essenziali per aumentare la qualità della User Experience su siti web ed eCommerce. Si tratta di 3 parametri specifici:
- Loading (LCP – Largest Contentful Paint): cioè il tempo di caricamento del contenuto principale della pagina che deve avvenire entro i 2,5 secondi
- Interactivity (FID – First Input Delay): cioè il tempo entro cui la pagina diventa interattiva, la risposta all’input utente. Scorrimento e zoom non sono considerati come eventi di interazione.
- Visual Stability (CLS – Cumulative Layout Shift): ossia il fatto che, una volta caricata la pagina, non ci siano spostamenti del contenuto che potrebbero ostacolare od inficiare l’azione dell’utente
Le informazioni derivati dai Core Web Vitals verranno combinate con metriche di performance preesistenti per la misurazione dell’esperienza della pagina, quali: l’ottimizzazione per i dispositivi mobili, la navigazione sicura, la sicurezza HTTPS.
Vediamo più nel dettaglio a cosa si riferiscono i Core Web Vitals.
LCP – Largest Contentful Paint
Misura il tempo di caricamento dell’elemento più grande (image o blocco di testo) visibile nella viewport.
Per fornire una buona esperienza utente, i siti dovrebbero avere un LCP entro i primi 2,5 secondi dall’inizio del caricamento della pagina.
FID – First Inpunt Delay
Misura il tempo necessario prima che l’utente possa iniziare ad interagire con la pagina. Google consiglia un FID inferiore ai 100 millisecondi.
Nello specifico, indica l’intervallo di tempo che intercorre tra quando l’utente interagisce con il sito per la prima volta e quando il browser riesce effettivamente a rispondere all’interazione.
Molto importante per evitare la generazione di stress nell’utente e rendere l’esperienza di navigazione il più piacevole.
CLS – Cumulative Layout Shift
Misura la stabilità visiva del layout del sito web, quanto il sito si carica in modo lineare. Fa riferimento alla frequenza con cui gli utenti sperimentano un cambiamento inatteso nel formato del sito web.
Più questo punteggio è basso, più fluida e piacevole risulterà essere anche la navigazione del sito web da parte dell’utente.
Per fornire una buona esperienza utente, i siti dovrebbero riuscire ad ottenere un punteggio CLS inferiore allo score di 0,1.
Il Layout Shift può causare disagio e stress nell’utente.
Approfondimenti sui Core Web Vitals
- Approfondimenti sul Largest Contentful Paint (LCP)
- Approfondimenti sul First Input Delay (FID)
- Approfondimenti sul Cumulative Layout Shift (CLS)
Se ti interessa approfondire l’argomento dei Core Web Vitals e scoprire di più su come intervenire tecnicamente per migliorare queste metriche, ti consigliamo di leggere l’articolo Core Web Vitals: come migliorare la User Experience su siti web ed eCommerce
Alcuni tools per la misurazione delle Web Performance
Gli strumenti utilizzati per la misurazione delle web performance di un sito web o eCommerce sono molteplici ed in continua evoluzione. Vediamo alcuni dei più conosciuti ed utilizzati.
Google Lighthouse
Lighthouse di Google è un tool per monitorare e ottimizzare le performance online, dal punto di vista della velocità di caricamento delle pagine e dell’esperienza vissuta dall’utente (user experience) nel navigare il sito web o eCommerce.
WebPage test
Si tratta di uno dei primi tools utilizzati per la misurazione delle web performance. Consente di testare la velocità di caricamento del sito web e restituisce consigli di ottimizzazione delle prestazioni.
Tips per la Web Performance Optimization
Prima di darvi alcuni suggerimenti per migliorare le Web Performance, ci teniamo a sottolineare che i tempi recuperati con l’applicazione di questi tips sono minimi se considerati singolarmente. La vera ottimizzazione diventa rilevante se considerata nell’insieme. Lavoriamo sul dettaglio per ottenere un miglioramento delle prestazioni visibile a livello globale.
Compressione immagini
Le immagini rappresentano in media il 21% del peso complessivo di una pagina web. Se non ci sono contenuti video sul sito, le immagini costituiscono probabilmente il punto critico numero uno per il peso della pagina ed il conseguente rallentamento nel caricamento.
Le immagini di grandi dimensioni rallentano le pagine web e creano un’esperienza utente non ottimale.
I due metodi comunemente utilizzati per l’ottimizzazione delle immagini web sono:
- la compressione con perdita di dati (lossy)
- la compressione senza perdita di dati (lossless)
L’obiettivo principale della formattazione delle imagini è quello di trovare un equilibrio tra la minore dimensione dei file e una qualità accettabile dell’immagine.
Esistono diversi modi per eseguire queste ottimizzazioni.
Una delle modalità più semplici è quella di comprimere le immagini prima di caricarle su WordPress. Normalmente si può fare con uno strumento come Adobe Photoshop o Affinity Photo. Oppure utilizzando la nuova app online Squoosh di Google. In alternativa, queste operazioni possono essere eseguite utilizzando specifici plugin WordPress.
I due principali elementi da considerare sono il formato del file e il tipo di compressione che si utilizza. Scegliendo la giusta combinazione di formato di file e tipo di compressione, è possibile ridurre le dimensioni dell’immagine di ben 5 volte.
Scopri di più sull’Ottimizzazione delle immagini.
Formato WebP
Segnaliamo l’introduzione da parte di Google di WebP, un nuovo formato immagine che consente una compressione (sia lossy che lossless) di qualità superiore per le immagini sul Web.
È un formato appositamente creato da Google per ottimizzare il caricamento delle immagini sulle pagine web, creando immagini di dimensioni più ridotte per rendere il web più veloce.
Scopri di più su WebP: il nuovo formato immagine per il web
Lazy Loading
Un’interessante opzione in caso di presenza di molte immagini è quella di utilizzare il caricamento differito o Lazy Loading. Si stratta di una tecnica di ottimizzazione che consente di caricare i contenuti visibili ritardando il download e il rendering dei contenuti che appaiono “below the fold” (cioè nella parte non visibile della pagina web).
Il Lazy Loading funziona così:
- Il browser crea il DOM della pagina web senza scaricare le immagini e precaricare i video
- Viene utilizzato JavaScript per determinare quali immagini scaricare e quali video precaricare in base al contenuto inizialmente visibile quando carica la pagina. Quelle immagini e quei video sono scaricati e precaricati nel modo più appropriato.
- Il download e il rendering dei video aggiuntivi sono ritardati fino a quando un visitatore del sito scorre verso il basso e viene visualizzato il contenuto aggiuntivo.
Il risultato finale è che le immagini non vengono scaricate e i video caricati finché non sono effettivamente necessari. Ciò può fornire un significativo miglioramento delle prestazioni per i siti che includono molte immagini ad alta risoluzione e incorporano dei video.
Analisi della Cache
ll caching è di gran lunga uno degli strumenti più importanti per velocizzare WordPress, può ridurre i tempi di caricamento della pagina di oltre il 33%.
Consigliamo di analizzare costantemente la cache per determinare se ci sono richieste GET che bypassano la cache, che invece potrebbero essere memorizzate nella cache, o richieste POST che potrebbero essere eliminate.
Aumentare l’indice di utilizzo della cache del sito WordPress è fondamentale perché l’ideale è che il sito venga servito dalla cache il più possibile.
Preconnect
Uno dei suggerimenti che consigliamo di applicare è il Preconnect. Utilizzare “preconnect” come valore dell’attributo rel, consente di comunicare al browser che la pagina vuole stabilire una connessione con un’altra fonte e che si desidera che il processo inizi il prima possibile.
Il “preconnect” inserito nel codice subito dopo l’apertura della «head» permette di aprire direttamente un canale verso quel dominio. In questo modo il browser non dovrà fermarsi a stabilire una nuova connessione verso quel dominio ogni volta che incontra una risorsa ad esso collegata.
crossorigin=”anonymous”
Con l’utilizzo del valore “anonymus” per l’attributo crossorigin, informiamo il server che la risorsa che sto richiamando si trova già lì e non è necessario stabilire una nuova connessione.
Se le richieste CORS per questo elemento avranno il flag delle credenziali impostato su “same origin”, non dovrebbe stabilire una nuova connessione.
Utilissimo per risparmiare informazioni e connessioni non necessarie.
Utilizzo del defer e async del js
L’attributo Async consente di scaricare ed eseguire in parallelo.
L’attributo Defer permette di scaricare in parallelo e passare all’esecuzione solo dopo aver scaricato tutto.
L’impiego di uno o dell’altro attributo dipende dal contesto e dalle esigenze di priorità.
L’immagine a fianco spiega le diverse casistiche dell’esecuzione e scaricamento del JS nella pagina.
Critical CSS con Critical Path
Il Critical Path applicato al CSS è una metodologia che permette di inserire in pagina un insieme di regole css (critical css) che definiscono quello che appare in view nella parte alta della pagina (above the fold), con l’obiettivo di dare all’utente la percezione che la pagina sia già stata completamente caricata.
Possiamo inoltre importare il css non in maniera standard (preload css), dando spazio ad altri caricamenti.
Link preload per css (Css critical path)
Il rel=preload informa il browser che una risorsa è necessaria come parte della navigazione corrente e che deve iniziare ad essere recuperata il prima possibile. Di seguito, una modalità per far scaricare in alta priorità le risorse css.
Cosa succede con l’esecuzione di questo script? Il css (critical) in head descrive la parte superiore della pagina; al contempo abbiamo dichiarato che il css deve avere una certa priorità; il file viene scaricato come “non prioritario” (media=“print”). In questo modo liberiamo banda per l’inizializzazione di altri componenti come js/tracing, etc.
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.
