Budget delle prestazioni - Guida introduttiva

Milica Mihajlija
Milica Mihajlija

Il rendimento è una parte importante dell'esperienza utente e influisce sulle metriche aziendali. Si tende a pensare che per un buon sviluppatore finisca per avere un sito dalle prestazioni elevate, ma la verità è che raramente un buon rendimento è un effetto collaterale. Come per la maggior parte degli altri aspetti, per raggiungere un obiettivo è necessario definirlo in modo chiaro. Per iniziare, imposta un budget del rendimento.

Definizione

Un budget delle prestazioni è un insieme di limiti imposti alle metriche che influiscono sulle prestazioni del sito. come le dimensioni totali di una pagina, il tempo necessario per caricarsi su una rete mobile o persino il 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 in merito a design, tecnologia e aggiunta di funzionalità.

Disporre di 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 dell'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 pesanti. Inoltre, risultano facili da comunicare sia con i designer che con gli sviluppatori.

Abbiamo già detto alcuni elementi che puoi includere in un budget delle prestazioni, come il peso della pagina e il numero di richieste HTTP, ma puoi suddividerli in limiti più granulari come:

  • Dimensioni massime 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 molto sull'esperienza utente. Due pagine con lo stesso numero di richieste o la stessa ponderazione possono essere visualizzate in modo diverso a seconda dell'ordine in cui le risorse vengono richieste. Se una risorsa importante, come un'immagine hero o un foglio di stile su una delle pagine, viene caricata in una fase avanzata del processo, gli utenti aspetteranno più a lungo per visualizzare qualcosa di utile e percepiranno la pagina più lenta. Se nell'altra pagina le parti più importanti vengono caricate rapidamente, potrebbero non accorgersi nemmeno del resto della pagina.

Immagine del rendering progressivo delle pagine in base al percorso critico

Ecco perché è importante monitorare un altro tipo di metrica.

Tempistiche ⏱️

La sincronizzazione dei traguardi segna gli eventi che si verificano durante il caricamento della pagina, ad esempio l'evento DOMContentLoaded o load. I tempi più utili sono le metriche sul rendimento incentrate sull'utente che forniscono informazioni sull'esperienza di caricamento della pagina. Queste metriche sono disponibili tramite le API del browser e come parte dei report Lighthouse.

First Contentful Paint (FCP) misura quando il browser mostra il primo bit di contenuti dal DOM, ad esempio testo o immagini.

Il tempo all'interattività (TTI) misura il tempo necessario affinché una pagina diventi completamente interattiva e risponda in modo affidabile all'input dell'utente. È una metrica molto importante per monitorare se prevedi un qualsiasi tipo di interazione dell'utente nella pagina, ad esempio clic su link, pulsanti, digitazione o utilizzo di elementi del modulo.

Metriche basate su regole 💯

Lighthouse e WebPageTest calcolano i punteggi delle prestazioni in base a regole di best practice generali, che puoi utilizzare come linee guida. Come bonus, Lighthouse ti offre anche suggerimenti per semplici ottimizzazioni.

Per ottenere risultati ottimali, tieni traccia di una combinazione di metriche sul rendimento basate sulla quantità e su quelle incentrate sull'utente. Concentrati sulle dimensioni degli asset nelle prime fasi di un progetto e inizia a monitorare FCP e TTI il prima possibile.

Stabilisci una base di riferimento

L'unico modo per sapere veramente ciò che funziona meglio per il tuo sito è provarlo, quindi fare delle ricerche e verificare i risultati. Analizza la concorrenza per confrontare la tua posizione. 🕵️

Se non hai tempo, ecco dei buoni numeri predefiniti per iniziare:

  • Meno di 5 sec di tempo all'interattività
  • Meno di 170 kB di risorse percorso critico (compresse/miniminate)

Questi valori vengono calcolati in base ai dispositivi di riferimento reali e alla velocità della rete 3G. Attualmente, oltre la metà del traffico internet avviene sulle reti mobili, quindi dovresti utilizzare la velocità della rete 3G come punto di partenza.

Esempi di budget

Devi disporre di un budget per i diversi tipi di pagine del sito, poiché i contenuti variano. Ad esempio:

  • La pagina del nostro prodotto deve contenere meno di 170 kB di JavaScript su 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 una connessione 3G lenta 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

Loghi Webpack, bundlesize e Lighthouse

La scelta di uno strumento per farlo 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 qualcosa 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 la nuova funzionalità 🧠⛔

Monitora le prestazioni

Assicurarsi che il sito sia sufficientemente veloce significa che 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 metriche aziendali chiave.

Conclusione

Lo scopo di un budget delle prestazioni è quello di consentirti di concentrarti sulle prestazioni nel corso di un progetto; impostandolo per tempo, potrai evitare il backtracking in seguito. Dovrebbe essere il punto di riferimento per aiutarti a capire che cosa includere nel tuo sito web. L'idea principale è stabilire degli obiettivi in modo da poter bilanciare meglio il rendimento senza compromettere la funzionalità o l'esperienza utente.🎯

La guida successiva ti illustrerà come definire il primo budget del rendimento in pochi semplici passaggi.