Tutti sappiamo quanto sia importante il rendimento. Ma quando parliamo di rendimento e di rendere i siti web "veloci", cosa intendiamo esattamente?
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).
- Il caricamento di due siti potrebbe terminare nello stesso identico lasso di tempo, ma uno potrebbe sembrare caricarsi più velocemente (se carica i contenuti in modo progressivo anziché attendere la fine per mostrare qualcosa).
- Un sito potrebbe sembrare caricarsi rapidamente, ma poi rispondere lentamente (o per niente) all'interazione dell'utente.
Quando si parla di rendimento, è importante essere precisi e fare riferimento al rendimento in termini di metriche. Criteri oggettivi che possono essere misurati quantitativamente, ma è anche importante assicurarsi che le metriche misurate 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, questo momento non corrisponde necessariamente a qualcosa che interessa all'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, si sono adoperati per standardizzare un insieme di nuove API e metriche che misurano con maggiore precisione l'esperienza degli utenti con il rendimento di una pagina web.
Per garantire che le metriche siano pertinenti per gli utenti, le abbiamo strutturate in base ad alcune domande chiave:
| Sta succedendo? | La navigazione è stata avviata correttamente? Il server ha risposto? |
| È utile? | Sono stati visualizzati contenuti sufficienti per consentire agli utenti di interagire con il video? |
| È utilizzabile? | Gli utenti possono interagire con la pagina o è occupata? |
| È piacevole? | Le interazioni sono fluide e naturali, senza ritardi? |
Come vengono misurate le metriche
In genere, 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
- In situ: su utenti reali che caricano e interagiscono effettivamente con la pagina
Nessuna di queste opzioni è necessariamente migliore o peggiore dell'altra. In genere, infatti, è consigliabile utilizzarle entrambe per garantire un buon rendimento.
Nel laboratorio
Testare il rendimento in laboratorio è fondamentale per lo sviluppo di nuove funzionalità. Prima che le funzionalità vengano rilasciate in produzione, è impossibile misurarne le caratteristiche di prestazioni su utenti reali, quindi testarle in laboratorio prima del rilascio è il modo migliore per evitare regressioni delle prestazioni.
Sul campo
D'altra parte, anche se i test in laboratorio sono un buon sostituto per le prestazioni, non riflettono necessariamente l'esperienza degli utenti reali sul tuo sito.
Il rendimento di un sito può variare notevolmente in base alle funzionalità del dispositivo e alle condizioni della rete dell'utente. Può variare anche in base al fatto che (o al modo in cui) un utente interagisce con la pagina.
Inoltre, i caricamenti delle pagine non sono sempre deterministici. Ad esempio, i siti che caricano annunci o contenuti personalizzati possono avere caratteristiche di rendimento molto diverse da un utente all'altro. Un test di laboratorio non rileverà queste differenze.
L'unico modo per sapere davvero il rendimento del tuo sito per gli utenti è misurarlo effettivamente mentre gli utenti lo caricano e interagiscono con esso. Questo tipo di misurazione è comunemente chiamato monitoraggio dei real user (RUM).
Tipi di metriche
Esistono diversi altri tipi di metriche pertinenti alla percezione del rendimento da parte degli utenti.
- Velocità di caricamento percepita:la velocità con cui una pagina può caricare e visualizzare tutti i suoi elementi visivi sullo schermo.
- Reattività al caricamento:la velocità con cui una pagina può caricare ed eseguire il codice JavaScript necessario affinché i componenti rispondano rapidamente all'interazione dell'utente
- Adattabilità in fase di esecuzione:dopo il caricamento della pagina, la velocità con cui la pagina può rispondere all'interazione dell'utente.
- Stabilità visiva:gli elementi della pagina cambiano in modo imprevisto e potenzialmente interferiscono con le interazioni degli utenti?
- Fluiduità: le transizioni e le animazioni vengono visualizzate a una frequenza fotogrammi costante e passano da uno stato all'altro in modo fluido?
Dati tutti questi tipi di metriche sul rendimento, è facile capire che nessuna singola metrica è sufficiente per acquisire tutte le caratteristiche del rendimento di una pagina.
Metriche importanti da misurare
- First Contentful Paint (FCP): misura il tempo trascorso dall'inizio del caricamento della pagina alla visualizzazione di qualsiasi parte dei contenuti della pagina sullo schermo. (lab, field)
- Largest Contentful Paint (LCP): misura il tempo che intercorre dall'inizio del caricamento della pagina alla visualizzazione sullo schermo del blocco di testo o dell'elemento immagine più grande. (lab, field)
- Interaction to Next Paint (INP): misura la latenza di ogni tocco, clic o interazione da tastiera effettuata con la pagina e, in base al numero di interazioni, seleziona la latenza di interazione peggiore della pagina (o vicina al valore più alto) come singolo valore rappresentativo per descrivere l'adattabilità complessiva di una pagina. (lab, field)
- Total Blocking Time (TBT): misura il tempo totale tra FCP e TTI in cui il thread principale è stato bloccato per il tempo necessario a evitare la reattività all'input. (lab)
- Variazione layout cumulativa (CLS): misura il punteggio cumulativo di tutte le variazioni di layout impreviste che si verificano tra l'inizio del caricamento della pagina e il momento in cui il relativo stato del ciclo di vita diventa nascosto. (lab, field)
- Tempo per primo byte (TTFB): misura il tempo necessario alla rete per rispondere a una richiesta dell'utente con il primo byte di una risorsa. (lab, field)
In alcuni casi verranno introdotte nuove metriche per coprire le aree mancanti, ma in altri casi le metriche migliori sono quelle personalizzate per il tuo sito.
Metriche personalizzate
Le metriche sul rendimento descritte in precedenza sono utili per avere una comprensione generale delle caratteristiche di rendimento della maggior parte dei siti sul web. Sono utili anche per avere un insieme comune di metriche che consenta ai siti di confrontare il proprio rendimento con quello della concorrenza.
Tuttavia, a volte un sito specifico è unico in qualche modo e richiede metriche aggiuntive per avere un quadro completo del rendimento. Ad esempio, la metrica LCP è progettata per misurare il completamento del caricamento dei contenuti principali di una pagina, ma potrebbero esserci casi in cui l'elemento più grande non fa parte dei contenuti principali della pagina e quindi LCP potrebbe non essere pertinente.
Per risolvere questi casi, il gruppo di lavoro sul rendimento web ha standardizzato anche API di livello inferiore che possono essere utili per implementare le tue metriche personalizzate:
- API User Timing
- API Long Tasks
- API Long Animation Frames
- API Element Timing
- API Navigation Timing
- API Resource Timing
- Tempi del server
Consulta la guida sulle Metriche personalizzate per scoprire come utilizzare queste API per misurare le caratteristiche di rendimento specifiche del tuo sito.