8 consigli per migliorare la percezione delle proprie pagine web

Per gestire con successo un programma di affiliazione a Performance è determinante che le proprie pagine web siano seguite da quanti più utenti possibile, e soprattutto che lo “zoccolo duro” di utenti conquistati negli anni continui a visitare assiduamente la pagina, seguendo con interesse i contenuti proposti. È necessario dunque migliorare la percezione che gli utenti hanno delle proprie pagine web, dando loro l’illusione che siano sempre più veloci e interattive. Gli utenti effettivi sono quelli soddisfatti, che seguono la pagina perché realmente interessati e partecipano attivamente al suo successo.

Nella costante evoluzione della rete internet, con le mille nuove opportunità offerte ogni giorno dal web, una sola variante si mantiene costante: si tratta delle aspettative degli utenti, i quali apprezzano molto la velocità di un sito. Stando ad alcuni studi di settore, i numeri relativi ai tempi di risposta e al loro rapporto con la percezione umana si sono mantenuti praticamente stabili nel corso degli ultimi quarantacinque anni. Tali numeri vengono definiti hard-wired e sono praticamente universali, nel senso che non cambiano in base al dispositivo, all’applicazione o al collegamento che si sta usando in quel determinato momento. È proprio per questo motivo che ci si sofferma sulla percezione dell’utente, cercando il modo di rendere le pagine più veloci, almeno apparentemente.

L’obiettivo che si intende raggiungere è rendere possibile il caricamento di una pagina in un secondo (o anche meno), e, obiettivo ancora più ambizioso, far sì che il rendering di una pagina avvenga nell’arco di cento millisecondi o anche meno. Tuttavia, se ci si ferma a considerare quante cose devono accadere nel sistema prima che la pagina cominci a concretizzarsi, apparendo sul browser, un secondo sembra un traguardo quasi impossibile da raggiungere: dal look-up DNS e connessione TCP al parsing HTML, dal download dei fogli di stile all’esecuzione di JavaScript, si tratta di operazioni che per compiersi correttamente hanno bisogno di almeno una manciata di secondi. Da altri studi di settore, questa volta relativi alle prestazioni dell’e-commerce, è risultato che già solo il rendering dei primi cinquecento retailer avveniva in 2,9 secondi. In altre parole, un utente tipo seduto dinanzi allo schermo del computer guarda una schermata vuota per quasi tre secondi prima di cominciare a vedere qualcosa.

Ciò non è consigliabile, soprattutto considerando la cronica mancanza di tempo che caratterizza la maggior parte dei visitatori e la pluralità di contenuti simili a quelli delle nostre pagine.

Come raggiungere quindi un obiettivo tecnicamente impegnativo come l’alleggerimento del nostro tempo di caricamento? Innanzi tutto, eliminando tutto quello che non serve, come script pesanti e tutti quegli elementi che rallentano troppo il caricamento. E poi, ogni volta che ci si scoraggia, ripetere a mente una frase di Ilya Grigorik, tratta dal suo libro Networking Browser High Performance: “Il tempo è misurato oggettivamente ma è percepito soggettivamente, ed è assolutamente possibile migliorare le prestazioni percepite“. In altre parole, anche se poco o nulla si può fare per diminuire il tempo d’attesa dell’utente, molto invece si può fare – e va fatto – per far sì che il tempo percepito sia minore rispetto a quello effettivo. A tal proposito, ecco dunque otto trucchi e tecniche che è possibile utilizzare per manipolare il tempo soggettivo a vostro vantaggio.

1. L’installazione di una Progress Bar

Mai sottovalutare il potere di una semplice ma efficace barra di avanzamento, la quale contribuisce a migliorare l’esperienza dell’utente su quelle pagine che sono necessariamente più lenta (ad esempio la pagina dei risultati di ricerca). Le barre di avanzamento rassicurano i visitatori che la pagina è funzionante e danno un’idea del tempo d’attesa necessario. Tuttavia, prima di inserire una barra di avanzamento, è necessario analizzare con attenzione i tempi medi di caricamento della pagina. Se infatti la pagina viene caricata in cinque secondi o ancora meno, una barra di avanzamento farà sì che il caricamento sia percepito come più lento di quello che realmente è. Per questo motivo, Jakob Nielsen suggerisce che le barre di avanzamento vanno riservati a quelle pagine/applicazioni che richiedono dieci secondi o più di caricamento. Le barre di avanzamento che offrono l’illusione di un ripple/movimento di sinistra possono migliorare la percezione del tempo di attesa fino al 10%; le progress bar che pulsano, aumentando la frequenza di pulsazione man mano che la barra progredisce, sono percepite come più veloci. Allo stesso modo, le barre di avanzamento che accelerano tendono a soddisfare maggiormente gli utenti.

2. Caricare per primo qualcosa di utile

Sembrerebbe un consiglio un po’ scontato, ma in realtà molto spesso le pagine tendono a lasciare per ultimi proprio i contenuti più interessanti. Da un’indagine è emerso che il tempo medio di interazione (TTI) per i primi cento retailer era in media di 5,4 secondi: ciò significa che ci vogliono 5,4 secondi per visualizzare il contenuto più importante di una pagina a rendering. Questo rappresenta un fallimento sia per il proprietario che per il visitatore del sito.

Se si deve scegliere quali elementi esporre prima è bene andare a colpire ciò che l’utente cerca. Se siamo in una pagina di risultati di ricerca probabilmente possiamo omettere logo e header e far caricare prima di tutto i risultati ad esempio, lo stesso per i post di un blog.

3. Rimandare il contenuto non essenziale

Unitamente al punto precedente, un accorgimento da seguire è quello di eliminare ogni collegamento superfluo per far sì che il contenuto principale sia immediatamente al centro della scena. I visitatori vedranno più velocemente la pagina se verrà ritardato il caricamento e il rendering di qualsiasi contenuto si trovi sotto l’area inizialmente visibile. Rimandando i contenuti non essenziali, il tempo di caricamento della linea di fondo non cambierà, ma il tempo di caricamento percepito migliorerà di molto.

4. Rendering delle immagini progressive

Il Rendering delle immagini progressive si basa sull’idea che più velocemente si ottiene un’immagine completa nel browser – non importa quale sia la risoluzione –, migliore sarà l’esperienza dell’utente. I file JPEG progressivi non sono nuovi: sono stati ampiamente utilizzati in passato, prima di essere abbandonati a causa di problemi causati dalla connessione. Ora che le velocità di connessione sono migliorate e i file JPEG progressivi sono più sofisticati, questa tecnica nuovamente possibile. L’anno scorso, l’ingegnere di Google Pat Meenan ha studiato i primi duemila siti di vendita al dettaglio e ha scoperto che i file JPEG progressivi hanno migliorato il loro tempo medio di caricamento fino al 15%.

5. L’auto-preload (caching del browser predittivo)

L’auto-preload è una potente tecnica di performance tramite la quale vengono osservati e registrati tutti i percorsi effettuati dagli utenti in un determinato sito web. Sulla base di questa grande quantità di dati, si può prevedere il percorso futuro dell’utente. Il motore carica le risorse delle pagine interessate nella cache del browser di quest’ultimo, consentendo un rendering della pagina fino al 70% più veloce.

6. Far finta che tutto funzioni, anche quando in realtà non sta funzionando

Le pagine appaiono più reattive se, a fronte di una connessione lenta o assente per una manciata di secondi, cliccando per esempio “Mi piace” sul pulsante Instagram, l’interfaccia utente registra il clic e mette in evidenza il pulsante. Essa invia nuovamente i dati al server ogni volta che viene ripristinata la connessione. In questo modo, il sito appare sempre funzionante, anche quando non lo è.

7. Conversione “click-to-touch”

Si tratta di un suggerimento valido per i cellulari. Gli utenti di tali dispositivi mobili sono a conoscenza del lieve ritardo che si verifica tra il momento in cui si tocca lo schermo e il tempo necessario affinché la pagina risponda. Ogni volta che si tocca lo schermo, infatti, il dispositivo deve essere in grado di tradurre tale evento “touch” in un evento “click”. Questa traduzione richiede tra i 300 e i 500 millisecondi per click. A Radware di recente è stata sviluppata una nuova funzionalità detta “tocco di conversione”, la quale converte automaticamente gli eventi sollevando il browser mobile dal sovraccarico della traduzione in tempo reale “click-to-touch”.

8. Far sì che l’attesa corrisponda al valore percepito dall’utente

Se sono necessari lunghi tempi di attesa, è opportuno assicurarsi di stare offrendo qualcosa dal valore commisurato all’attesa. In tal senso, un buon esempio è dato dai siti web di viaggi. Quando si cercano le migliori tariffe alberghiere, per esempio, la maggior parte degli utenti non bada ai secondi necessari per il caricamento poiché suppone che il motore stia cercando in un enorme archivio di offerte di viaggio per offrire i risultati migliori.