Indice dell'articolo
TLDR
Allo stesso modo di una casa, un sito web deve poggiare su fondamenta solide e funzionali. E così come nell’edilizia, le scelte di Web Design fatte in fase di progettazione di un sito web impatteranno sulle sue prestazioni e, di conseguenza, sul tuo business.
L’importanza di una buona progettazione web
Abbiamo già parlato di quanto sia importante avere un sito web veloce.
Di come le performance di caricamento siano diventate fattori di ranking con i Core Web Vitals, o di quando un nostro sito abbia raggiunto il perfect score di 4×100 secondo Google.
Non abbiamo ancora evidenziato però quali siano i principali elementi che incidono sulla velocità di un sito web, e in che modo lo facciano. Paragoniamo solo per un attimo un sito web ad una casa: in caso di terremoto (o meglio, di un aggiornamento dell’algoritmo di Google), se entrambi subiscono dei “danni improvvisi” è bene analizzarne l’infrastruttura.
Inizia tutto dal web design: le scelte di progettazione di un sito web possono impattare le performance del sito stesso e le prestazioni di un business. Considerati i costanti cambiamenti negli algoritmi e nel comportamento degli utenti, è essenziale prendere queste scelte con attenzione, andando oltre alle preferenze personali.
Ma di che impatto stiamo parlando? Secondo Google il 32% degli utenti rinuncia alla navigazione quando una pagina impiega da 1 a 3 secondi per il caricamento, e la percentuale aumenta drasticamente oltre i 3 secondi.
I motori di ricerca vogliono fornire le migliori risposte ai propri utenti in pochi click.
Progettare un sito web che offre contenuti facili e veloci da navigare aiuta non solo il posizionamento nella ricerca organica, ma anche la User Experience e l’advertising.
Non bisogna infatti sottovalutare l’impatto negativo che un sito web lento può avere sulle campagne PPC: se il tempo di caricamento della pagina è eccessivo, è probabile che l’utente finisca per abbandonare il sito e accedere a quello di un competitor. Il risultato? Aver pagato il clic dell’utente sull’annuncio, ma non aver ottenuto nessuna conversione.
Uno studio di KissMetrics ha infatti evidenziato che un ritardo di 1 secondo nella risposta della pagina può comportare una riduzione del 7% delle conversioni. Questo significa che, se un e-commerce genera 100.000€ al giorno, un ritardo di 1 secondo nella risposta delle pagine costerà 2,5 milioni di euro di vendite perse all’anno.
Gli elementi di un Web Design poco efficace
Tra i principali elementi che incidono sull’esperienza dell’utente, sull’ottimizzazione delle conversioni e sugli standard di accessibilità nella progettazione di un sito web, troviamo:
- Hero banner, immagini e caroselli che spostano il contenuto della pagina molto al di sotto dell’above the fold (l’area immediatamente visibile prima di uno scroll);
- Video di grandi dimensioni, con riproduzione automatica e a volte con l’audio;
- Font customizzati provenienti da terze parti, non presenti su tutti i dispositivi;
- Elementi grafici con dimensioni, forme e colori non adeguati per l’accessibilità utente;
- Layout non formattato correttamente tra dispositivi (immagini, font, pulsanti CTA);
- Banner dei cookie non conformi o mal configurati secondo il regolamento GDPR.
Ciò però non significa che sia completamente sbagliato avere uno slider in Homepage, oppure che in nessun caso sia possibile utilizzare font non web-safe; queste sono solo alcune delle innumerevoli best practices consigliate per migliorare le performance web.
Prendiamo in esempio alcuni domini per comprendere quali scelte di web design abbiano intrapreso e che impatto abbiano sulle prestazioni del sito.
Abbiamo testato tempi e sequenze di caricamento delle loro Homepage su webpagetest.org e web.dev/measure, due tool molto conosciuti e frequentemente utilizzati. Il test è stato eseguito simulando un iPhone 6/7/8 con una connessione LTE a Milano via Chrome.
Case Study #1: brand di moda
Il visual look è un fattore cruciale per un e-commerce di moda: in questo caso l’inserimento di un carosello immagini è una scelta praticamente obbligata se messa a confronto con i competitor. Il tempo di caricamento della prima slide però è di 4.5 secondi, oltre i 2.5 secondi consigliati per il Largest Contentful Paint (l’elemento più grande della pagina).
Nei primi 3 secondi di caricamento gli unici elementi visibili sono logo (provvisto di alt text), menu hamburger, icona del carrello, testo per la barra di ricerca e selettore per lo slider. Ma questi elementi sono difficili da vedere, poiché di colore nero su sfondo scuro.
Un pop-up con Call To Action per scaricare l’App viene rapidamente coperto dal banner per l’accettazione dei cookie, che però provoca uno spostamento di layout CLS. Allo scarso punteggio CLS contribuiscono anche le immagini nello slider: il browser non ha modo di sapere quanto siano grandi le immagini fino a quando non hanno caricato completamente.
Case Study #2: ONG internazionale
In quest’esempio il tempo di caricamento totale della pagina è migliore, anche se possiamo evidenziare alcuni elementi che incidono sulle performance di download.
Oltre ad un carosello immagini che supera il limite LCP consigliato, il sito web usa un font personalizzato che dev’essere scaricato prima della visualizzazione di pagina. Il solo font impiega circa 4.5 secondi per il download, limitando il caricamento dei contenuti di testo.
Alcuni elementi non presentano un contrasto dei colori sufficiente, e le immagini non includono il testo alternativo: sono entrambi due aspetti penalizzanti per l’accessibilità.
Il banner dei cookie non è configurato correttamente: consente comunque lo scroll e non prevede le possibilità di scelta per gli utenti, in contrasto alle nuove direttive GDPR ed ePrivacy che prevedono l’installazione dei cookie previo esplicito consenso dell’utente.
Case Study #3: agenzia di comunicazione
L’ultimo esempio dimostra come anche gli “addetti al settore” possano compiere scelte poco efficaci nella progettazione del proprio sito web.
Nel test non è apparso nessun elemento prima dei 3 secondi di caricamento. Lo slider rappresenta il Largest Contentful Paint e impiega oltre 7 secondi per mostrare la prima immagine. Oltre a ciò, le immagini non contengono l’attributo lazy-load per consentire il download in background, occupando così risorse utili per il caricamento della pagina.
Nella pagina sono installati ben 4 font custom, che però impediscono la visualizzazione del testo fino al caricamento completo delle risorse: quindi il browser nasconderà completamente il testo per 14 secondi, invece di mostrare un carattere fallback. Infine, anche in questo caso il banner dei cookie non è GDPR-compliant.
Conclusione: arrivare ad una strategia win-win
Possono essere infiniti i motivi che spingono un’azienda o un’organizzazione a prendere delle scelte di web design non performance-friendly. Il confronto con i competitor, l’utilizzo di test tools poco affidabili o la paura di sacrificare l’immagine del proprio brand.
È sempre possibile però evitare alcune di queste scelte, ad esempio:
- Preferire un’immagine statica e ottimizzata per la navigazione web, da utilizzare come sfondo per i primi contenuti visibili nell’above the fold al posto di video o caroselli;
- Utilizzare un font web-safe per evitare di richiamare troppe risorse da terze parti;
- Favorire un web design in ottica mobile-first e accessibility, in modo da prevenire scostamenti di layout tra dispositivi ed usare elementi grafici adatti a tutti gli utenti;
- Configurare correttamente e tenere aggiornato il banner per l’accettazione dei cookie.
Come professionisti, è nostro compito aiutare i clienti a progettare siti web con ottime prestazioni di caricamento e che soddisfino le aspettative degli utenti, pur mantenendo un design accattivante ed esteticamente bello. Una strategia win-win che permetta al business di guadagnare importanza sia agli occhi degli utenti che dei motori di ricerca.
Scopri i nostri Case Studies e per qualsiasi informazione contattaci a web@antartika.it.
Indice dell'articolo
