Prestazioni web: perché sono così importanti e come ottimizzarle

Sia che tu abbia già un negozio online, o se stai pensando di lanciarti in un'avventura nel mondo dell'e-commerce, avrai sicuramente già sentito parlare dell'importanza delle prestazioni. Ciò corrisponde, in linea generale, alla velocità di caricamento di una pagina web. A questo concetto di performance corrispondono degli indicatori, e ogni anno o quasi, appaiono nuovi termini tecnici per cercare di quantificare le prestazioni di un sito web: tempo di caricamento, e più recentemente Time to First Byte (TTFB, in italiano "tempo al primo byte") oppure First Contentful Paint (o FCP, in italiano "prima visualizzazione con contenuti") per citare solo i principali.

A prima vista, questi termini tecnici possono suonare un po' strani ma, niente paura, una volta capita la loro importanza, si riveleranno utilissimi per te ed i tuoi clienti.

Perché le prestazioni sono così importanti per un negozio online? 

Se oggi nessuno si stupisce se una pagina si carica velocemente, una pagina che carica lentamente sarà invece notata immediatamente, e gli utenti vorranno abbandonarla rapidamente, prima ancora che il contenuto venga visualizzato sullo schermo. La maggior parte dei visitatori di un sito partirà infatti da una pagina se questa non carica il suo contenuto completamente in meno di 3 secondi.

Nel settore altamente competitivo dell'e-commerce, dove l'immediatezza è fondamentale, garantire buone prestazioni web è quindi essenziale per convertire i tuoi visitatori in clienti, sia su dispositivi mobili che su desktop. Infatti, si stima che un guadagno di 0,1 secondi nel tempo di caricamento del tuo sito e-commerce può aumentare il tuo tasso di conversione dell'8%!

Tre argomenti per migliorare le prestazioni del tuo negozio online:

• Migliorerai significativamente l'esperienza dei tuoi clienti, aumentando spontaneamente il tuo tasso di conversione,
• Guadagnerai la capacità di ospitare un numero massimo di utenti simultaneamente, evitando di perdere clienti preziosi durante i periodi di grande affluenza,
• Aumenterai la visibilità del tuo sito grazie ad una velocità di caricamento ottimale delle pagine che ti permetterà di migliorare la tua posizione nei risultati dei motori di ricerca (SEO).

Quindi, quando parliamo di prestazioni del tuo negozio online, dovrai riflettere su punti come:

1. Esperienza utente,
2. Conversioni,
3. Visibilità.

Per quanto riguarda il tuo negozio, si tratterà principalmente di aumentare la sua velocità di caricamento, rispettando ovviamente i requisiti tecnici di un sito e-commerce nel 2021. 

Quali indicatori e come ottimizzarli?  

Consideriamo 5 indicatori chiave che hanno un impatto diretto sia sulle prestazioni del tuo sito che sull'esperienza dell'utente. Tra questi, il Time to First Byte e lo Speed Index sono considerati particolarmente importanti perché permettono di capire le prestazioni di un sito nel suo insieme. 

1.Time to First Byte (TTFB o "tempo al primo byte") 

Questo indicatore corrisponde al tempo di risposta del server: si tratta dei millisecondi più importanti nel caricamento di una pagina. Alcuni dei principali elementi che determinano il tempo di risposta sono la configurazione del server (linguaggi utilizzati, librerie, ecc... che permettono di ottimizzare il tempo di caricamento e determinano la solidità del sito) e il tempo di esecuzione delle richieste del database.

Buono a sapersi: Google lo considera buono se è inferiore o uguale a 200 millisecondi e accettabile fino a 500 ms. È spesso l'unico indicatore che varia nel tempo, ed è spesso condizionato dal traffico

Il nostro suggerimento: Usa una CDN (Content Delivery Network) che sarà particolarmente utile per i tuoi clienti all'estero e considera di permettere la memorizzazione nella cache delle risorse statiche.

2. First Contentful Paint (o "prima visualizzazione con contenuti")

Questo è il primo punto importante per l'utente, che può trovarsi di fronte ad un tempo di attesa tra il momento in cui clicca su un link e il momento in cui la pagina visualizza un elemento. Questo valore corrisponde principalmente al tempo necessario per il browser a caricare la risposta del server ed a visualizzare il primo elemento del contenuto della pagina. Questo primo elemento non sarà necessariamente ed unicamente estetico: potrebbe essere un'immagine oppure un blocco colorato. 

Buono a sapersi: Viene considerato buono se avviene in meno di 2,5 secondi (TTFB incluso); possiamo quindi stimare che il tempo di caricamento dei file che bloccano il rendering deve avvenire in meno di 2 secondi.

Il nostro suggerimento: Comprimi i tuoi file HTML/CSS/JS e riduci i file che bloccano il rendering.

3. Largest Contentful Paint (LCP o "visualizzazione elemento di maggiori dimensioni")

LCP è il secondo momento più importante per l'utente, questo valore include la maggior parte degli elementi visibili. Si tratta del momento in cui la pagina web prende forma e ottiene il suo aspetto finale (o quasi). Questa fase può essere la più lunga e "pesante" a seconda del contenuto da visualizzare.

Per capire meglio di cosa si tratta, ecco un esempio: .

 

Buono a sapersi: Viene considerato buono se avviene in meno di 2,5 secondi (come il FCP) e accettabile fino a 4 secondi. Molti studi mostrano che oltre i 3 secondi la frequenza di rimbalzo aumenta significativamente...

Il nostro suggerimento: Ottimizza le immagini, genera diversi formati utili (jpeg 2000, jpeg XR webp ecc...), fornisci le tue immagini in diverse dimensioni nel codice HTML, imposta la cache (browser e server). 

4.First Input Delay (o "ritardo prima interazione") 

Questo valore è legato all'interattività di una pagina e corrisponde al tempo di risposta del browser quando si compie un'azione sul primo elemento interattivo disponibile. Si tratta, ad esempio, del momento in cui viene cliccato un link o un pulsante. 

Buono a sapersi: Questo indicatore misura il tempo di frustrazione di un utente, cioè il tempo che un utente aspetta prima che il browser risponda quando clicca sul primo elemento interattivo visualizzato.

5.Time to Interactive (o "tempo per l'interattività")

Questo indicatore è un po' oscuro e spesso mal interpretato. Misura il tempo trascorso dall'inizio della navigazione fino a quando le risorse della pagina sono state caricate e il thread principale del browser è stato inattivo per almeno 5 secondi, ovvero che non c'è stata un'esecuzione di script più lunga di 50 ms.

Buono a sapersi: Il tuo sito e-commerce può offrire buone prestazioni generali, avere un buon FID e, ciononostante, essere caratterizzato da un "Time to Interactive" negativo.

Il nostro suggerimento: Ti consigliamo di posticipare i JavaScript non essenziali al caricamento e di eliminare gli script non necessari alla pagina visualizzata per non appesantire il thread principale. Ciò richiede una buona segmentazione del tuo codice.

Ecco una sequenza temporale più rappresentativa dell'intervallo tra i vari indicatori.

Ecco un esempio di sequenza temporale di un buon sito (secondo i criteri di Google) :

Un indicatore supplementare: lo Speed Index ("indice di velocità") o SI

Questo indicatore non è incluso nella lista perché dipende molto da valori come FCP e LCP, i quali dipendono a loro volta dal TTFB. Ciò è il risultato di un calcolo basato sulla velocità e la progressività di caricamento della parte visibile della pagina (o in gergo "above the fold").

Misura (potenzialmente) quindi le "sensazioni" dell'utente durante il caricamento delle pagine e, proprio come il FID, si tratta di uno dei più recenti indicatori UX usati da Google per la SEO.

Conclusioni 

Ogni indicatore è influenzato dal precedente, il che li rende tutti importanti. E, come detto all'inizio dell'articolo, il TTFB è particolarmente importante ed estremamente variabile, poiché dipende dalla qualità della tua soluzione di hosting e dal traffico; un TTFB negativo può quindi ridurre drasticamente le prestazioni del tuo sito. Si tratta di un indicatore che, spesso, non viene fornito dalla maggior parte degli strumenti di misurazione delle prestazioni (Page Speed Insights, GtMetrix), perché si tratta di una fase di caricamento delle pagine complessa, oscura, spesso molto tecnica (da qui la difficoltà di accedere e interpretare le informazioni per utenti non esperti). Ed è per questo che ti suggeriamo di ricorrere a servizi specializzati, come, ad esempio, l'offerta PrestaShop Platform, soprattutto se lavori con un sito sviluppato su PrestaShop. 

PrestaShop Platform, un servizio che ti accompagna nella crescita del tuo negozio:

• Una soluzione di hosting dedicata e progettata per Prestashop, con 3 ambienti disponibili
• Un'interfaccia in grado di fornire KPI tecnici e chiari 
• Una sola interfaccia per gestire tutti i tuoi ambienti (sviluppo, pre-produzione e produzione)
• Migrazioni tra gli ambienti semplificate
• Un team di supporto a tua disposizione per il massimo della serenità