Quando apri un sito web ti aspetti si carichi instantaneamente. Più lunga è l'attesa del caricamento più aumentano i sentimenti negativi di frustrazione e fastidio. Un sito web lento diminuisce le conversioni, rende la navigazione meno piacevole e peggiora la valutazione di Google nei nostri confronti: per questi motivi è fondamentale avere dei siti web veloci e performanti.
Come abbiamo spiegato nell'articolo "la differenza tra Ux E Ui design" evitare che l'utente percepisca la navigazione in modo negativo è lo scopo di un UX designer.
Di cosa parliamo in questo articolo:
Google ha come obiettivo quello di mostrare ai suoi utenti i prodotti più utili e inerenti alla loro ricerca. Per farlo utilizza algoritmi complessi che premiano le "best practices" da lui consigliate (e il più delle volte apprezzate anche dagli utenti).
Una di queste "best practices" che influisce anche sul posizionamento in SERP è proprio la velocità. Un sito lento viene penalizzato da Google e crea problemi agli utenti aumentando quello che viene definito in gergo "tasso di rimbalzo".
Pensala in questo modo: hai voglia di un gelato, decidi di provare la miglior gelateria della città, ma il gelataio è lentissimo e tu aspetti 5 - 10 -15 minuti prima di avere il gelato tra le mani ormai parzialmente sciolto. Torneresti in questa gelateria? Non ti sentiresti frustrato e preso in giro? Se sei restato per 15 minuti ad aspettare probabilmente è perchè già conoscevi la gelateria, ma avresti aspettato tutto quel tempo in un'altra che non hai mai sentito nominare?
Lo stesso avviene quando si apre un sito web: un utente che sa cosa cerca e vuole assolutamente quel prodotto, anche su un sito lento, continuerà la navigazione. Un utente poco informato o poco interessato invece abbandonerà il sito dopo pochi secondi e non tornerà.
Così si perdono clienti, si rende più lungo il custumer journey dell'utente e si suscitano sentimenti negativi nei propri visitatori. Per questo Google avvantaggia i siti web veloci.
Esclusa l'ottimizzazione SEO, Google utilizza diverse metriche per valutare un sito web: velocità di caricamento, interattività e stabilità visual. Questi elementi prendono il nome di Core Web Vitals.
La First Input Delay (FID) misura il tempo tra l'azione dell'utente, ad esempio cliccare un tasto, e l'esecuzione dell'azione da parte del browser.
Se un utente dopo aver cliccato un bottone non nota cambiamenti lo preme una seconda volta, poi una terza, poi una quarta e inizia a innervosirsi, questo se il First Input Delay supera i 100 ms. Per questo motivo Google considera buoni tutti i siti che hanno un FID uguale o inferiore a 100 ms.
Il Largest Contentful Paint (LCP) misura il tempo di caricamento della pagina, per essere precisi il tempo di caricamento degli elementi all'interno dell'above the fold (view port) ovvero ciò che è visibile nella pagina web senza effettuare lo scroll.
Più quest'area impiega tempo a caricarsi completamente, più l'indice peggiora. Google considera buono un LCP inferiore a 2,5 secondi.
Il Cumulative layout shift (CLS) misura lo spostamento degli elementi visibili all'interno dell'area visibile ed è definita come metrica user-centric.
Quando una pagina si carica e ha troppi cambiamenti di layout (ad esempio un'immagine che caricandosi sposta del testo o un pop-up) l'utente distoglie l'attenzione, perde la riga che stava leggendo o peggio clicca sul bottone sbagliato.
Il CLS secondo Google deve essere inferiore allo 0,1.
Se vuoi approfondire il CLS puoi trovare informazioni info in lingua inglese su web.dev
Per controllare le performance di un sito web esistono diversi servizi online tra cui Pagespeed di Google, Gtmetrix e Pingdom.
Analizzando il nostro sito tramite Page Speed Insight vengono mostrati i punteggi attribuiti ai Core Web Vitals e altri indici utili a calcolare la qualità e la velocità dei siti web. Il nostro sito uxinpills.it ha ottenuto un misero 46 su 100 nelle performance mobile e un discreto 78 nelle performance desktop.
La versione mobile di un sito web generalmente ha sempre punteggi più bassi rispetto alla controparte desktop, questo perchè gli smartphone sono meno potenti e potrebbero dover caricare pagine in situazioni di scarsa ricezione. Per questi motivi è importante che siano ottimizzate a dovere.
Page Speed Insight fornisce anche degli ottimi suggerimenti per rendere i siti web più veloci e performanti. Nel nostro caso suggeriva di:
Scaricare immagini da Internet e utilizzarle nel nostro sito web senza prima diminuirne le dimensioni è uno degli errori più comuni e che rendono i siti estremamente lenti e pasanti da caricare.
Ipotizziamo che trovi una bellissima immagine su unsplash.com.
È ideale per essere la cover del tuo nuovo sito web.
La scarichi e pesa circa 9 mb.
La carichi sul tuo sito e improvvisamente il tempo di caricamento aumenta a dismisura, sai perchè?
Perché ora il browser deve scaricare 9 mb di dati in più rispetto a prima e il download non è istantaneo, soprattutto se la tua connessione non è delle migliori. Più la connessione è lenta e più una pagina web è pesante, più il tempo di caricamento aumenterà.
Le immagini scaricate da unsplash e le varie banche immagini sul web sono solitamente molto grandi (in pixel) e molto pesanti (megabyte). Per diminuirne le dimensioni puoi usare tool online come Resizeimage oppure software come Gimp o Photoshop. Un'immagine di 1920x1080 px (risoluzione full hd) è solitamente sufficientemente per un'immagine di copertina a tutto schermo.
Ridimensionata l'immagine è il momento di ottimizzarla per il web. Per farlo puoi utilizzare Tinypng, un ottimo tool online che permette di diminuire drasticamente il peso delle tue immagini mantenendo la intatta la qualità visiva.
Finiti questi passaggi la tua immagine dovrebbe pesare al massimo qualche centinaio di kb (meno è meglio è!).
Il nostro consiglio è di testare sempre: se l'immagine appare sgranata allora aumentane le dimensioni, è importante trovare un bilanciamento tra qualità e peso!
Spesso i temi WordPress hanno tantissimo codice che poi non viene utilizzato e che rallenta il caricamento del sito web. Trovare il codice superfluo, modificarlo e ottimizzarlo non è una cosa banale. Se non possiedi conoscenze approfondite ti consigliamo di rivolgerti a un professionista o optare per un tema più snello.
Su WordPress esitono innumerevoli plugin che svolgono ottimamente i compiti di minificazione del codice e velocizzano il sito web.
Il più performante secondo i test è Wp-rocket (esistono moltissimi test ben fatti ma le performance variano ad ogni aggiornamento dei plugin), ma esistono moltissime valide alternative anche gratuite come:
Questi plugin una volta configurati correttamente possono far schizzare i tuoi punteggi su Page Speed Insight. È importante testare sempre il proprio sito in modalità incognito dopo averli configurati. Questi plugin potrebbero nel peggiore dei casi mostrare il tuo sito web in maniera "sbagliata" o bloccare delle funzionalità necessarie. Non preoccuparti, se disattivi il plugin il tuo sito tornerà come prima. Ricorda di testarli in ambienti di test, mai su un sito già online.
In questo articolo non ci addentreremo nella complessissima tecnologia che si cela dietro alla cache, ma possiamo sintetizzare il suo funzionamento prendendo come esempio una semplice moltiplicazione.
7 x 7
Molto probabilmente se ti chiedessero il risultato di questa operazione saresti in grado di rispondere quasi istantaneamente, memore della tabellina del 7 ripetuta alle elementari, ma cosa accadrebbe se ti chiedessero quanto fa 78 x 56?
Dovresti calcolarlo e ci metteresti sicuramente del tempo. Questo perchè non hai "salvato in memoria" il risultato di questa operazione.
E cosa succederebbe se avessi appena letto che 78 x 56 = 4368?
Siamo piuttosto sicuri che risponderesti correttamente e in tempo 0! Tuttavia non avresti eseguito nessun calcolo perché ricordavi il risultato.
La cache funziona così: memorizza informazioni nel browser dell'utente o nel server e così facendo è in grado di mostrare le pagine web più velocemente non dovendo eseguire nuovamente i calcoli necessari.
Per avere siti web veloci è fondamentale un buon hosting
La scelta dell'hosting su cui ospitare il tuo nuovo sito web può essere difficoltosa ma è fondamentale. Spesso utenti alle prime armi scelgono provider famosi come Aruba incosapevoli del fatto che questi provider low cost sono adatti soltanto a siti senza pretese e di certo sono sconsigliati per installare e-commerce o siti molto grandi.
Un buon hosting migliora di molto la velocità di caricamento di un sito web. Di seguito ti consigliamo i due servizi che abbiamo provato di persona e reputiamo siano i migliori.
Utilizziamo Siteground da anni, il servizio è ottimo così come la velocità che è in grado di assicurare.
Il prezzo è competitivo solo alla prima fatturazione poi diventa piuttosto caro. Il vero punto di forza di Siteground è l'assistenza tecnica, impeccabile e sempre disponibile anche in lingua italiana.
Siteground è un ottimo provider ma tieni presente che il rinnovo sarà piuttosto caro.
Netsons è il provider che ospita il nostro Blog. Le performance sono ottime soprattutto con il piano SSD. Anche l'assistenza è ottima, alcuni problemi di installazione del nuovo sito o relative ai DNS sono state risolte in un istante. Assistenza anche qui in italiano.
I piani sono più convenienti rispetto a Siteground. L’unica "pecca" risiede nel pannello di controllo che risulta meno immediato.
Quali sono i punteggi del nostro sito web dopo le ottimizzazione apportate?
Su mobile un punteggio di 78 e su desktop un punteggio di 91!
Nelle settimane successive abbiamo ottimizzato ulteriormente il codice del nostro sito web raggiungendo i 90 punti nella versione mobile e i 98 nella versione desktop!
Dopo questa presentazione delle principali tecniche di ottimizzazione web dovresti essere in grado di migliorare le performance dei tuoi siti web.
Ricorda che è importante anche sviluppare il tuo sito web con codice pulito e facendo attenzione a quali plugin, page builder o funzionalità aggiuntive si utilizzano.
Ti aspettiamo nella sezione commenti per consigli o chiarimenti!
Finalmente un sito web con le palle! Un sito che spiega ben bene come funziona!