Tutti sappiamo quanto sia importante il rendimento, ma quando parliamo di rendimento e di come rendere i siti web "veloci", cosa intendiamo nello specifico?
La verità è che il rendimento è relativo:
- Un sito potrebbe essere veloce per un utente (su una rete veloce con un dispositivo potente), ma lento per un altro utente (su una rete lenta con un dispositivo di fascia bassa).
- Due siti potrebbero completare il caricamento nello stesso lasso di tempo, ma uno potrebbe sembrare caricarsi più velocemente (se i contenuti vengono caricati progressivamente invece di attendere la fine per visualizzare i contenuti).
- Un sito potrebbe sembrare caricarsi rapidamente, ma rispondere lentamente (o non rispondere affatto) all'interazione dell'utente.
Quando si parla di prestazioni, è importante essere precisi e fare riferimento alle prestazioni in termini di metrics. Criteri oggettivi che possano essere misurati quantitativamente, ma è anche importante assicurarsi che le metriche che misuri siano utili.
Definizione delle metriche
In passato, il rendimento web veniva misurato con l'evento load. Tuttavia, anche se load è un momento ben definito nel ciclo di vita di una pagina, quel momento non corrisponde necessariamente a qualcosa di importante per l'utente.
Ad esempio, un server potrebbe rispondere con una pagina minima che si "carica" immediatamente, ma poi rimanda il recupero dei contenuti o la visualizzazione di qualsiasi elemento sulla pagina fino a diversi secondi dopo l'attivazione dell'evento load. Tecnicamente una pagina di questo tipo ha un tempo di caricamento rapido, ma questo tempo non corrisponde all'esperienza di caricamento della pagina da parte dell'utente.
Negli ultimi anni, i membri del team di Chrome, in collaborazione con il W3C Web Performance Working Group, hanno lavorato per standardizzare una serie di nuove API e metriche che misurano in modo più accurato l'esperienza degli utenti relativa alle prestazioni di una pagina web.
Per garantire che le metriche siano pertinenti per gli utenti, rispondiamo ad alcune domande chiave:
| Si verifica? | La navigazione è stata avviata correttamente? Il server ha risposto? |
| È utile? | La pubblicazione di contenuti è sufficiente per favorire l'interazione da parte degli utenti? |
| È utilizzabile? | Gli utenti possono interagire con la pagina o è occupato? |
| È piacevole? | Le interazioni sono fluide, naturali e prive di ritardi? |
Come vengono misurate le metriche
Generalmente, le metriche sul rendimento vengono misurate in due modi:
- Nel lab: utilizzo di strumenti per simulare il caricamento di una pagina in un ambiente coerente e controllato
- Sul campo: su utenti reali che caricano e interagiscono effettivamente con la pagina
Nessuna di queste opzioni è necessariamente migliore o peggiore dell'altra: in effetti, generalmente è consigliabile utilizzare entrambe per garantire un buon rendimento.
Nel laboratorio
Verificare le prestazioni nel lab è essenziale durante lo sviluppo di nuove funzionalità. Prima del rilascio delle funzionalità in produzione, è impossibile misurarne le caratteristiche prestazionali su utenti reali, quindi testarle nel lab prima del rilascio della funzionalità è il modo migliore per evitare regressioni delle prestazioni.
Sul campo
D'altra parte, anche se i test nel lab sono un proxy ragionevole per le prestazioni, non riflettono necessariamente l'esperienza degli utenti effettivi sul tuo sito.
Le prestazioni di un sito possono variare drasticamente in base alle funzionalità del dispositivo di un utente e alle condizioni della rete. Può variare anche a seconda che l'utente (o come) stia interagendo con la pagina.
Inoltre, i caricamenti delle pagine non sono sempre deterministici. Ad esempio, i siti che caricano contenuti o annunci personalizzati possono presentare caratteristiche di rendimento molto diverse da un utente all'altro. Un test di laboratorio non coglie queste differenze.
L'unico modo per conoscere veramente le prestazioni del tuo sito per gli utenti è misurarne effettivamente le prestazioni mentre questi utenti caricano e interagiscono con esso. Questo tipo di misurazione è comunemente chiamato Monitoraggio utenti reali (RUM).
Tipi di metriche
Esistono diversi altri tipi di metriche pertinenti per la percezione del rendimento da parte degli utenti.
- Velocità di caricamento percepita: velocità con cui una pagina viene caricata e mostra tutti i suoi elementi visivi sullo schermo.
- Reattività del caricamento: velocità con cui una pagina può caricare ed eseguire qualsiasi codice JavaScript richiesto affinché i componenti rispondano rapidamente all'interazione dell'utente.
- Reattività durante il runtime: dopo il caricamento pagina, la velocità con cui la pagina può rispondere all'interazione dell'utente.
- Stabilità visiva:gli elementi sulla pagina si spostano in modi non previsti dagli utenti e che potenzialmente interferiscono con le loro interazioni?
- Uniformità: le transizioni e le animazioni vengono visualizzate con una frequenza fotogrammi uniforme e fluiscono in modo fluido da uno stato all'altro?
Dati tutti questi tipi di metriche sul rendimento, si spera che non sia un'unica metrica sufficiente per acquisire tutte le caratteristiche di rendimento di una pagina.
Metriche importanti da misurare
- First Contentful Paint (FCP): misura il tempo che intercorre tra l'inizio del caricamento della pagina e il momento in cui viene visualizzata una qualsiasi parte dei contenuti della pagina sullo schermo. (lab, campo)
- LCP (Largest Contentful Paint): misura il tempo che intercorre tra l'avvio del caricamento della pagina e il rendering del blocco di testo o dell'elemento immagine più grande sullo schermo. (lab, campo)
- Interazione con Next Paint (INP): misura la latenza di ogni interazione con tocco, clic o tastiera effettuata con la pagina e, in base al numero di interazioni, seleziona la latenza di interazione peggiore della pagina (o quasi del valore più alto) come singolo valore rappresentativo per descrivere l'adattabilità complessiva di una pagina. (lab, campo)
- Tempo di blocco totale (TBT): misura il tempo totale tra FCP e TTI in cui il thread principale è stato bloccato per un tempo sufficiente a impedire la reattività dell'input. (lab)
- Cumulative Layout Shift (CLS): misura il punteggio cumulativo di tutte le variazioni impreviste del layout che si verificano tra l'avvio del caricamento della pagina e il momento in cui il suo stato del ciclo di vita diventa nascosto. (lab, campo)
- Time to First Byte (TTFB): misura il tempo impiegato dalla rete per rispondere alla richiesta di un utente con il primo byte di una risorsa. (lab, campo)
In alcuni casi, verranno introdotte nuove metriche per coprire le aree mancanti, ma in altri casi le metriche migliori sono quelle su misura per il tuo sito.
Metriche personalizzate
Le metriche sul rendimento illustrate in precedenza sono utili per comprendere le caratteristiche di rendimento della maggior parte dei siti sul web. Sono utili anche per avere un insieme comune di metriche che consentono ai siti di confrontare il loro rendimento con quello della concorrenza.
Tuttavia, può capitare che un sito specifico sia in qualche modo unico e richieda metriche aggiuntive per acquisire un quadro completo del rendimento. Ad esempio, la metrica LCP ha lo scopo di misurare il termine del caricamento dei contenuti principali di una pagina, ma potrebbero verificarsi casi in cui l'elemento più grande non fa parte dei contenuti principali della pagina e, di conseguenza, l'LCP potrebbe non essere pertinente.
Per far fronte a questi casi, il Web Performance Working Group ha standardizzato anche API di livello inferiore che possono essere utili per implementare le tue metriche personalizzate:
- API User Timing
- API Long Tasks
- API Element Timing
- API Navigation Timing
- API Resource Timing
- Tempistiche del server
Consulta la guida sulle metriche personalizzate per scoprire come utilizzare queste API per misurare le caratteristiche di rendimento specifiche per il tuo sito.