Il tuo primo budget delle prestazioni

Milica Mihajlija
Milica Mihajlija

Quando imposti un budget personale, aziendale o familiare, imposti un limite di spesa e ti assicuri di non superare questo limite. I budget del rendimento funzionano allo stesso modo, ma per le metriche che influiscono sul rendimento del sito web.

Stabilire e applicare un budget per le prestazioni ti assicurerà che il tuo sito venga visualizzato il più rapidamente possibile. In questo modo potrai migliorare l'esperienza dei visitatori e avere un impatto positivo sulle metriche della tua attività.

Ecco come definire il primo budget del rendimento in pochi semplici passaggi.

Analisi preliminare

Se stai cercando di migliorare le prestazioni di un sito esistente, inizia identificando le pagine più importanti. Ad esempio, potrebbero trattarsi di pagine con il maggior volume di traffico di utenti o di una pagina di destinazione del prodotto.

Dopo aver identificato le pagine principali, è il momento di analizzarle. In primo luogo, ci concentreremo sugli obiettivi temporali che misurano meglio l'esperienza utente.

Nel riquadro Controlli di Chrome DevTools troverai Lighthouse. Esegui controlli su ogni pagina di una finestra Ospite per registrare due volte le operazioni seguenti:

Riquadro Lighthouse in Chrome DevTools

Prendiamo come esempio un motore di ricerca altamente specializzato, doggos.com. Il sito doggos.com mira a indicizzare tutti gli articoli correlati ai cani presenti su Internet e le sue pagine più importanti sono la home page e la pagina dei risultati. Di seguito sono riportati i numeri FCP e TTI misurati per il sito su computer desktop e dispositivi mobili.

Computer FCP TTI
Home page 1680 ms 5550 ms
Pagina dei risultati 2060 ms 6.690 ms
Analisi desktop di doggos.com
Dispositivo mobile FCP TTI
Home page 1800 ms 6150 ms
Pagina dei risultati 1100 ms 7.870 ms
Analisi mobile di doggos.com

Analisi competitiva

Una volta analizzato il tuo sito, è il momento di analizzare i siti della concorrenza. Confrontare i risultati di siti web simili al tuo è un ottimo modo per stabilire il budget delle prestazioni. Che tu stia lavorando a un progetto già realizzato o partendo da zero, si tratta di un passaggio importante. Ottieni un vantaggio competitivo quando sei più veloce della concorrenza.

In caso di dubbi su quali siti consultare, ecco alcuni strumenti che puoi provare:

  1. Parola chiave "related:" della Ricerca Google
  2. Funzione siti simili di Alexa
  3. SimilarWeb

Screenshot di una ricerca su Google con la parola chiave correlata

Per ottenere un quadro realistico, prova a trovare circa 10 concorrenti.

Budget per i traguardi di tempo

Il nostro motore di ricerca di nicchia in questo esempio ha una manciata di concorrenti e ci concentreremo sull'ottimizzazione della home page per i dispositivi mobili. Attualmente, oltre metà del traffico internet avviene sulle reti mobili e l'utilizzo dei numeri di cellulare come predefiniti andrà a vantaggio non solo degli utenti di dispositivi mobili, ma anche degli utenti di computer desktop.

Crea un grafico con tempi FCP e TTI per tutti i siti web simili e metti in evidenza quelli più veloci del gruppo. Un grafico come questo offre un quadro più chiaro del rendimento del tuo sito web rispetto a quello della concorrenza.

Sito/home page FCP TTI
goggles.com 880 ms 3150 ms
Doggos.com 1800 ms 6500 ms
quackquackgo.com 2680 ms 4740 ms
ding.xyz 2420 ms 7040 ms
Analisi competitiva di doggos.com sulla rete 3G
Cane al computer
Il sito doggos.com sembra andare bene per la metrica FCP, ma è seriamente in ritardo rispetto al TTI

C'è un margine di miglioramento e una buona linea guida a riguardo è la regola del 20%. In base alle ricerche, gli utenti riconoscono una differenza nei tempi di risposta quando è superiore al 20%. Ciò significa che se vuoi essere notevolmente migliore del miglior sito paragonabile, devi essere almeno il 20% più veloce.

Misura Ora corrente Budget (20% più veloce della concorrenza)
FCP 1800 ms 704 ms
TTI 6500 ms 2.520 ms
Budget delle prestazioni che consentirebbe a doggos.com di superare la concorrenza

Se stai cercando di ottimizzare un sito esistente, questo obiettivo potrebbe sembrare impossibile da raggiungere. Questo non significa che tu debba rinunciare. Inizia con piccoli passi e imposta un budget il 20% più veloce della velocità attuale. Continua a ottimizzare da lì.

Per doggos.com, un budget rivisto potrebbe essere simile a questo.

Misura Ora corrente Budget iniziale (20% più veloce rispetto all'ora attuale) Obiettivo a lungo termine (20% più veloce rispetto alla concorrenza)
FCP 1800 ms 1440 ms 704 ms
TTI 6500 ms 5200 ms 2.520 ms
Abbiamo rivisto il budget per le prestazioni di doggos.com

Combinare metriche diverse

Un budget di rendimento elevato combina diversi tipi di metriche. Abbiamo già definito il budget per le tempistiche dei traguardi e ora ne aggiungeremo altri due al mix:

  • metriche basate sulla quantità
  • metriche basate su regole

Budget per le metriche basate sulla quantità

Qualunque sia il numero totale di pagine che ti viene in mente, prova a pubblicare una dimensione inferiore a 170 kB di risorse percorso critico (compresse/minimizzate). In questo modo, il tuo sito web sarà veloce anche su dispositivi economici e una connessione 3G lenta.

Puoi avere un budget maggiore per l'esperienza desktop, ma non spingerti oltre. Secondo i dati dell'HTTP Archive dell'ultimo anno, il peso mediano delle pagine sia su computer che su dispositivi mobili è superiore a 1 MB. Per ottenere un sito web ad alte prestazioni, devi puntare ben al di sotto di questi valori mediani.

Ecco alcuni esempi basati sui budget TTI:

Rete Dispositivo JS Immagini CSS HTML Caratteri Totale Tempo all'interattività
3G lento Moto G4 100 30 10 10 20 ~170 kB 5 s
4G lenta Moto G4 200 50 35 30 30 ~345 kB 3 sec
WiFi Computer 300 250 50 50 100 ~750 kB 2s

Definire un budget in base alle metriche di quantità non è un'attività complicata, Un sito web di e-commerce con moltissime foto dei prodotti è molto diverso da un portale di notizie che consiste principalmente di testo. Se il tuo sito include annunci o dati di analisi, la quantità di codice JavaScript che stai spedendo aumenta.

Utilizza la tabella precedente come punto di partenza e apporta modifiche in base al tipo di contenuti con cui stai lavorando. Definisci cosa includerà le pagine, esamina la tua ricerca e fai una stima delle dimensioni delle singole risorse. Ad esempio, se stai creando un sito web con molte immagini, imposta limiti più rigidi alle dimensioni JS.

Quando il tuo sito web è funzionante, verifica il tuo rendimento in base alle metriche sul rendimento incentrate sugli utenti e modifica il budget.

Budget per le metriche basate su regole

Le metriche basate su regole molto efficaci sono i punteggi di Lighthouse. Lighthouse valuta la tua app in cinque categorie, una delle quali riguarda le prestazioni. I punteggi relativi al rendimento vengono calcolati in base a cinque metriche diverse, tra cui First Contentful Paint e Time to Interactive.

Quando provi a creare un ottimo sito, imposta un budget minimo per il punteggio delle prestazioni di Lighthouse su 85 (su 100). Utilizza Lighthouse CI per applicarlo alle richieste di pull.

Dare priorità

Chiediti quale livello di interazione ti aspetti di trovare sul tuo sito. Se si tratta di un sito web di notizie, l'obiettivo principale degli utenti è leggere i contenuti, quindi dovresti concentrarti su un rendering rapido e mantenere un valore FCP basso. I visitatori di doggos.com vogliono fare clic su link pertinenti il prima possibile, pertanto la priorità principale è un TTI basso.

Scopri con esattezza quali parti del tuo pubblico consultano su computer piuttosto che su dispositivi mobili e assegna le priorità di conseguenza. Un modo per saperlo è verificare cosa fa il tuo pubblico sui siti web della concorrenza tramite la dashboard Report sull'esperienza utente di Chrome.

Dati sulla distribuzione dei dispositivi dal report sull'esperienza utente di Chrome
Dati sulla distribuzione dei dispositivi dal Report sull'esperienza utente di Chrome

Passaggi successivi

Assicurati che il budget delle prestazioni venga applicato in tutto il progetto e incorporalo nel processo di compilazione.