Poiché la velocità della pagina è diventata nel corso degli anni una metrica importante sia per la SEO che per la UX, il concetto di a budget per le prestazioni web è anche venuto alla ribalta. Ora è più evidente che le prestazioni web sono un argomento che richiede una prospettiva condivisa tra tutti i dipartimenti, piuttosto che essere solo la priorità di un singolo dipartimento o individuo.

Per spiegarlo con un esempio: i dipartimenti di marketing potrebbero voler implementare la conversione e codici di remarketing/retargeting, insieme a strumenti come Criteo e RTB House, che utilizzano il retargeting basato sul prodotto. Potrebbero anche aspettarsi foto e animazioni accattivanti. Nel frattempo, i reparti di prodotto possono richiedere l'integrazione di strumenti come Hotjar e chiarezza. I reparti software, invece, mirano a sviluppare il più rapidamente possibile sia sul frontend che sul backend. La domanda e i costi associati a queste esigenze in termini di velocità della pagina sono in realtà in equilibrio. Il budget per le prestazioni web è emerso per stabilire questo equilibrio in modo efficace.

Un budget per le prestazioni web implica l'impostazione di una velocità target per la tua piattaforma su una piattaforma specifica e la definizione di obiettivi numerici a cui tutte le parti interessate aderiranno per raggiungere questa velocità. In breve, il costo della velocità è rappresentato dal budget relativo alle prestazioni web.

 

image-5.png
Fonte: https://wp-rocket.me/blog/performance-budgets/

 

Tutto inizia con una proposta. Proponi tu la velocità con cui la tua pagina dovrebbe aprirsi su un particolare tipo di connessione. Ad esempio, alcune proposte di budget per la performance potrebbero essere:

  • La home page può aprirsi in meno di 2 secondi con una connessione mobile 3G veloce (1.6 Mbps)?
  • La pagina dei risultati della ricerca può aprirsi in meno di 5 secondi con una connessione 3G lenta (780 Kbps)?

Successivamente, crei un piano d'azione e sottometriche per realizzare queste proposte, suddividendolo in parti.

A parte le proposte, possono esserci altri obiettivi di budget prestazionali. Per esempio:

  • Aumentare il Faro mobile punteggio della pagina di dettaglio superiore a 80
  • Ridurre le dimensioni di tutte le immagini sul sito desktop fino a meno di 500 KB

Metriche del budget di prestazione

Esistono tre diverse prospettive accettate per determinare le metriche di un budget di performance:

Metriche basate sui numeri

  • Numero massimo di caratteri/dimensione massima dei caratteri
  • Numero massimo di immagini/dimensione massima dell'immagine
  • Numero massimo di script, stili, video, ecc./Dimensione massima di script, stili, video, ecc
  • Dimensione massima dell'HTML
  • Numero massimo di richieste HTTP
  • Numero massimo di script di terze parti

 

image-7.png
Fonte: https://web.dev/vitals/

 

Metriche basate sul tempo

  • Prima volta Contentful Paint (FCP).
  • Tempo di Paint Contentful (LCP) più grande
  • Tempo di ritardo del primo ingresso (FID).
  • Tempo al tempo interattivo (TTI).
  • Tempo di blocco totale (TBT).
  • Punteggio Cumulative Layout Shift (CLS).
  • Punteggio dell'indice di velocità

Metriche basate su regole

  • Punteggio del faro
  • Punteggio GTmetrix
  • Punteggio del test della pagina web
  • Punteggio lento
performance-budget-calcolatrice.png
Fonte: https://www.performancebudget.io/

Quando si imposta il budget per le prestazioni web, in genere è consigliabile combinare tutte queste prospettive nella giusta misura anziché sceglierne solo una. Puoi usare il simulatore del budget prestazionale per trovare i numeri necessari per raggiungere la velocità target.

Valuta i tipi di pagina separatamente

Un punto cruciale quando si determina il budget prestazionale è non basarlo su una singola pagina del sito. Un errore comune è testare solo la homepage, il che porta ad una valutazione incompleta.

Dovresti iniziare esaminando la piattaforma e identificando diversi tipi di pagine. Quindi, analizza il traffico della piattaforma per identificare le pagine che ricevono più traffico e dare loro la priorità. Il risultato sarà una tabella simile a questa:

  • Pagina iniziale
  • Pagine di elenco statiche
  • Pagine di elenchi dinamici
  • Pagine di dettaglio
  • Pagine di pagamento
  • Pagine dei risultati di ricerca
  • Pagine della campagna
  • Pagine del blog

Devi concentrarti su i budget di rendimento di questi tipi di pagina separatamente, in base alle priorità.