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:
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 |
| Dispositivo mobile | FCP | TTI |
|---|---|---|
| Home page | 1800 ms | 6150 ms |
| Pagina dei risultati | 1100 ms | 7.870 ms |
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:
- Parola chiave "related:" della Ricerca Google
- Funzione siti simili di Alexa
- SimilarWeb
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 |
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 |
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 |
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.
Passaggi successivi
Assicurati che il budget delle prestazioni venga applicato in tutto il progetto e incorporalo nel processo di compilazione.