Il rendimento è una parte importante dell'esperienza utente e influisce sulle metriche aziendali. Si può avere la tentazione di pensare che un buon sviluppatore è un buon sito ad avere un rendimento migliore, ma la verità è che una buona performance è raramente un effetto collaterale. Come per la maggior parte delle altre cose, per raggiungere un obiettivo devi definirlo in modo chiaro. Inizia impostando un budget di rendimento.
Definizione
Un budget delle prestazioni è un insieme di limiti imposti alle metriche che influiscono sulle prestazioni del sito. Può trattarsi delle dimensioni totali di una pagina, del tempo necessario per caricarla su una rete mobile o persino del numero di richieste HTTP inviate. La definizione di un budget consente di avviare la conversazione sul rendimento web. Serve come punto di riferimento per prendere decisioni relative a progettazione, tecnologia e aggiunta di caratteristiche.
Un budget consente ai designer di pensare agli effetti delle immagini ad alta risoluzione e al numero di caratteri web che scelgono. Aiuta inoltre gli sviluppatori a confrontare diversi approcci a un problema e a valutare framework e librerie in base alle loro dimensioni e al costo di analisi.
Scegli le metriche
Metriche basate sulla quantità ⚖️
Queste metriche sono utili nelle prime fasi di sviluppo perché evidenziano l'impatto dell'inclusione di immagini e script di grandi dimensioni. Inoltre, sono facili da comunicare sia con i designer che con gli sviluppatori.
Abbiamo già accennato ad alcuni aspetti che è possibile includere nel budget delle prestazioni, come il peso della pagina e il numero di richieste HTTP, ma è possibile suddividerli in limiti più granulari, ad esempio:
- Dimensione massima delle immagini
- Numero massimo di caratteri web
- Dimensione massima degli script, inclusi i framework
- Numero totale di risorse esterne, come script di terze parti
Tuttavia, questi numeri non forniscono informazioni sufficienti sull'esperienza utente. Due pagine con lo stesso numero di richieste o con lo stesso peso possono essere visualizzate in modo diverso a seconda dell'ordine in cui vengono richieste le risorse. Se una risorsa critica, come un'immagine hero o un foglio di stile in una delle pagine, viene caricata in una fase avanzata del processo, gli utenti attenderanno più tempo per visualizzare qualcosa di utile e percepiranno la pagina come più lenta. Se sull'altra pagina le parti più importanti vengono caricate rapidamente, potrebbero non essere nemmeno notate, mentre il resto della pagina non lo fanno.
Per questo è importante tenere traccia di un altro tipo di metrica.
Tempistiche dei traguardi 🔒️
I tempi intermedi contrassegnano gli eventi che si verificano durante il caricamento della pagina, come l'evento DOMContentLoaded o load. I tempi più utili sono le metriche sul rendimento incentrate sugli utenti, che forniscono informazioni sull'esperienza di caricamento di una pagina. Queste metriche sono disponibili tramite le API del browser e nell'ambito dei report di Lighthouse.
La metrica First Contentful Paint (FCP) misura quando il browser visualizza il primo bit di contenuti del DOM, come testo o immagini.
Tempo all'interattività (TTI) misura quanto tempo impiega una pagina a diventare completamente interattiva e a rispondere in modo affidabile all'input dell'utente. Si tratta di una metrica molto importante da monitorare se prevedi un qualsiasi tipo di interazione utente sulla pagina, ad esempio clic su link, pulsanti, digitazione o utilizzo di elementi del modulo.
Metriche basate su regole Ψ
Lighthouse e WebPageTest calcolano i punteggi di rendimento in base a regole di best practice generali, che puoi utilizzare come linee guida. Come bonus, Lighthouse offre anche suggerimenti per semplici ottimizzazioni.
Otterrai risultati ottimali se utilizzi una combinazione di metriche sul rendimento incentrate sulla quantità e incentrate sull'utente. Concentrarsi sulle dimensioni degli asset nelle prime fasi di un progetto e iniziare a monitorare il valore FCP e il TTI il prima possibile.
Stabilisci una base di riferimento
L'unico modo per sapere veramente cosa funziona meglio per il tuo sito è provarlo: effettuare delle ricerche e poi testare i risultati. Analizza la concorrenza per scoprire la tua posizione. 🕵️
Se non hai tempo, ecco alcune cifre predefinite per iniziare:
- Tempo all'interattività inferiore a 5 s
- Meno di 170 kB di risorse con percorsi critici (compressi/minimizzati)
Questi numeri vengono calcolati in base a dispositivi di riferimento reali e alla velocità della rete 3G. Oggi oltre la metà del traffico internet avviene su reti mobili, quindi ti consigliamo di utilizzare la velocità della rete 3G come punto di partenza.
Esempi di budget
Devi disporre di un budget per diversi tipi di pagine del sito, poiché i contenuti variano. Ad esempio:
- La nostra pagina di prodotto deve contenere meno di 170 kB di JavaScript sui dispositivi mobili
- La nostra pagina di ricerca deve includere meno di 2 MB di immagini sul computer
- La nostra home page deve caricarsi e diventare interattiva in meno di 5 secondi con 3G lento su uno smartphone Moto G4
- Il nostro blog deve ottenere un punteggio superiore a 80 per i controlli delle prestazioni di Lighthouse
Aggiungi budget delle prestazioni al processo di creazione
La scelta di uno strumento adatto dipende molto dalla portata del progetto e dalle risorse che puoi dedicare all'attività. Esistono alcuni strumenti open source che possono aiutarti ad aggiungere budget al processo di creazione:
Se un valore supera una soglia definita, puoi:
- Ottimizza una funzionalità o un asset esistente 🛠️
- Rimuovi una funzionalità o un asset esistente 🗑️
- Non aggiungere la nuova funzionalità o asset ✋⛔
Monitora le prestazioni
Se il tuo sito è abbastanza veloce, devi continuare a effettuare misurazioni dopo il lancio iniziale. Monitorare queste metriche nel tempo e ottenere dati da utenti reali ti mostrerà in che modo le variazioni del rendimento influiscono sulle principali metriche aziendali.
Conclusione
Lo scopo di un budget delle prestazioni è assicurarsi di concentrarsi sulle prestazioni nel corso di un progetto e di impostarlo in anticipo per evitare un backtracking in seguito. Dovrebbe essere il punto di riferimento per capire cosa includere nel tuo sito web. L'idea principale è quella di definire degli obiettivi in modo da poter bilanciare meglio il rendimento senza compromettere la funzionalità o l'esperienza utente.🎯
La prossima guida ti illustrerà come definire il primo budget per il rendimento in pochi e semplici passaggi.