Webpagetest: Domare il mostro dei test e analizzare le prestazioni del tuo sito web

Jan Hornung Ultimo aggiornamento 03.12.2020
14 Min.
Webpagetest
Ultimo aggiornamento 03.12.2020

Webpagetest.org è probabilmente il migliore e più completo strumento gratuito per misurare il tempo di caricamento della pagina. Sfortunatamente, fornisce molti dati molto complessi. Oggi vi mostrerò cosa dovete impostare, come potete mettere ordine nel guazzabuglio di dati e quali parametri vi servono per un'analisi professionale. Perché solo se sai come si caricano i progetti dei tuoi clienti e le tue pagine, puoi ottimizzarle al meglio.

Il tuo sito dovrebbe essere sicuro. E in fretta. Naturalmente, perché molto dipende dal tempo di caricamento: il tasso di conversione, la sensazione di sicurezza dei tuoi visitatori e il posizionamento su Google della tua offerta. Tuttavia, molti utenti di WordPress non arrivano nemmeno a determinare correttamente il tempo di caricamento della propria pagina.

Per esempio, alcuni proprietari di siti non sanno nemmeno quali strumenti possono usare per analizzare correttamente il loro sito. Oppure non sanno quali impostazioni devono fare per ottenere risultati davvero buoni. Per non commettere gli stessi errori, oggi ti mostrerò come puoi ottenere una panoramica rapida e significativa del tuo sito con il (secondo noi) miglior strumento di misurazione gratuito di sempre. Così sai esattamente quanto velocemente la tua pagina si carica e se e dove hai bisogno di ottimizzare.

Per capire esattamente come funzionano i singoli passi di analisi, ti consiglio di guardare i set di dati collegati ai punti importanti o di analizzare la tua pagina in parallelo. Perché: mettere ordine nell'accozzaglia di dati non è così facile. Ma come ricompensa per lo sforzo riceverete alcuni dei migliori dati che abbiate mai raccolto sul vostro sito. E soprattutto se lavorate per i clienti o guadagnate soldi con i vostri WP-WordPress -progetti, lo sforzo vale la pena.

Webpagetest è il miglior strumento che conosciamo

Lo ammetto: Lodiamo webpagetest.org in questo articolo. Forse troppo effusivamente, ma non senza ragione. Perché Webpagetest è l'unico strumento che conosciamo che permette di determinare in modo affidabile il tempo di caricamento assoluto e percepito del tuo sito. E questo in modo completamente gratuito. Nessuna barriera di pagamento, nessun modello di abbonamento, solo dati preziosi e un'API che ti permette di automatizzare il tutto: è così che dovrebbe essere.

Per amore di completezza, va detto che si ottengono anche bei risultati di misurazione con Pingdom e GTmetrix. Ma non così bene come con Webpagetest. Naturalmente, questo non significa che non puoi e non devi convalidare i tuoi risultati con diversi test in diversi strumenti. E non significa nemmeno che non si debba misurare con Pingdom o GTmetrix. Posso solo raccomandarvi di dare un'occhiata a Webpagetest almeno una volta.

È quasi diventato un mantra per noi: Per misurare il tempo di caricamento della pagina, strumenti come Google PageSpeed Insights non sono sufficienti. Perché questi determinano solo il potenziale di performance della tua pagina. Questi dati sono ovviamente ancora preziosi - da una prospettiva di performance e SEO - ma semplicemente non ti permettono di trarre conclusioni su ciò che accade realmente quando un visitatore chiama la tua pagina.

Ma è esattamente quello che vuoi sapere. Ed è esattamente quello che bisogna sapere per determinare se una misura di ottimizzazione è efficace.

Purtroppo, Webpagetest fornisce non solo dati non molto belli, ma anche risultati di test molto estesi. Pertanto, oggi vi mostrerò come usare Webpagetest e come interpretare i risultati.

Nella prossima sezione, entrerò brevemente nel background dello strumento. Se non ti interessa, salta questa parte.

Webpagetest: Il grande fratello di Google PageSpeed Insights

Webpagetest era originariamente un progetto di AOL e destinato solo all'uso interno. Nel 2008, tuttavia, il programma è diventato un software open source e ora è principalmente mantenuto e ulteriormente sviluppato da Google. L'intera documentazione di Webpagetest può essere trovata su GitHub e può anche essere scaricata e usata localmente.

Mentre PageSpeed Insights vi mostra dove si trova il potenziale di ottimizzazione del vostro sito, Webpagetest può fare molto di più. Ti mostra non solo come puoi migliorare il tuo sito, ma anche direttamente quali effetti hanno le tue misure di ottimizzazione sul tempo di caricamento del tuo sito.

A differenza di Pingdom e GTmetrix, non c'è nessuna società dietro Webpagetest che vuole vendere un servizio a pagamento (ok, tranne Google, ma almeno il servizio non è venduto direttamente). Piuttosto, si potrebbe dire che Webpagetest è parte del piano di Google per rendere il web più veloce in generale. Comunque si voglia valutare gli sforzi di Google in questo contesto.

4 passi per ottenere dati sul tempo di carico davvero significativi

Sì, Webpagetest è più complesso di altri strumenti. Ma non lasciate che questo vi spaventi! In questo caso, la complessità è un bene. Perché significa ottenere grandi dati sul tuo sito web. E anche se sei un utente alle prime armi, puoi ottenere le informazioni rilevanti abbastanza rapidamente.

E questo con i seguenti quattro passi:

Passo 1: Impostare i parametri del test

Passo 2: Ottieni una visione d'insieme

Terzo passo: Analisi dettagliata

Quarto passo: Analisi del tempo di caricamento percepito

Passo 1: Impostare i parametri del test

Webpagetest offre impostazioni molto fini per testare il tuo sito web. Quattro di queste impostazioni sono particolarmente importanti per ottenere buoni risultati di misurazione:

  • il server da testare con (1)
  • il browser da usare per i test (2)
  • le impostazioni avanzate del test, di cui parlerò più dettagliatamente tra poco (3)
Pagina iniziale di Webpagetest
Questo è l'aspetto della pagina iniziale di Webpagetest. È un po' più complesso di quello di Pingdom o GTmetrix.

Il server scelto per il test simula un utente che accede alla pagina da lì. Se si sceglie il server predefinito negli Stati Uniti, il risultato del test sarà restituito per una pagina vista dal Texas. Nella maggior parte dei casi, tuttavia, questo non è necessariamente ciò che si vuole. Pertanto, questa impostazione è molto importante. Perché può distorcere massicciamente il risultato complessivo e deve essere impostato di conseguenza, a seconda del caso d'uso.

I due casi d'uso più comuni sono:

  1. Determinazione del tempo di caricamento per un utente del vostro gruppo target
  2. Confronto del tempo di carico dopo una misura di ottimizzazione

Se volete sapere come i vostri visitatori percepiscono il tempo di caricamento della pagina, allora la posizione del server deve corrispondere il più possibile alla posizione di un utente tipico. Per un blog con lettori principalmente tedeschi, questo significa che dovresti scegliere un server in Germania, per esempio a Francoforte.

Se si vuole sapere che cosa ha preso una misura di ottimizzazione, allora non importa in linea di principio quale posizione del server si usa. L'unica cosa importante è: dovete usare la stessa posizione del server per il test prima e dopo l'ottimizzazione. Altrimenti non è possibile confrontare correttamente i dati di misurazione. Naturalmente, raccomando anche qui un server di prova tedesco. Questo offre semplicemente i risultati più realistici.

Webpagetest: mappa per la selezione del server di prova su Webpagetest.org
Oltre alla selezione della lista, avete anche la possibilità di selezionare il server di prova tramite una mappa. Puoi anche vedere una panoramica di tutti i server di prova qui.

Il browser utilizzato

Webpagetest offre molte opzioni di impostazione per simulare determinate tecniche di trasmissione e browser. Per esempio, puoi definire che la pagina deve essere caricata tramite una connessione 3G e Firefox. Per l'inizio, tuttavia, è sufficiente scegliere il browser che il tuo gruppo target usa più spesso.

Potete trovare informazioni al riguardo in Google Analytics o Piwik. RAIDBOXES è ad esempio visitato per lo più tramite Chrome.

Estratto dai browser utilizzati dai visitatori di raidboxes.de. Questi servono come modello per le impostazioni in Webpagetest.
I browser più utilizzati su raidboxes.de. Quindi per un'analisi in Webpagetest testerei principalmente Chrome. I risultati per Firefox e Safari sono in contrasto naturalmente anche interessanti.

Molto importante: le impostazioni avanzate determinano la qualità dei vostri dati di misurazione!

Oltre ai due parametri che determinano come il test viene eseguito - cioè la posizione del server e il browser utilizzato - Webpagetest offre anche la possibilità di impostare ciò che il test dovrebbe produrre alla fine. Nelle impostazioni avanzate si può, per esempio, definire che solo certi valori debbano essere emessi, o che la misurazione debba fermarsi automaticamente dopo un certo tempo. E qui ci sono due impostazioni che sono particolarmente importanti per ottenere dati ragionevolmente completi e affidabili: Il "Numero di test da eseguire" e la "Vista ripetuta".

In linea di principio, si dovrebbe sempre misurare più di una volta quando si misura il tempo di carico. Altrimenti si corre il rischio di misurare i valori anomali e forse di cercare un problema che non esiste. E credetemi: lo abbiamo già sperimentato alcune volte. Raccomando almeno tre test consecutivi.

Dovresti anche ricordarti di misurare sempre la versione cache della tua pagina. Potete farlo utilizzando l'opzione Repeat View.

Impostazioni avanzate di Webpagetest
Le impostazioni avanzate di Webpagetest sono dove si trova la vera magia dello strumento. Solo se selezionate almeno 3 test qui e includete anche la Repeat View, i dati che otterrete saranno davvero interessanti.

Una volta che avete inserito il vostro URL - ad esempio https://raidboxes.de - e impostato i parametri del test (cioè il server tedesco, il browser, il minimo di 3 ripetizioni e la vista ripetuta), potete iniziare il test. A seconda di quanti altri utenti stanno testando le loro pagine, l'analisi può richiedere alcuni minuti.

È importante notare che Webpagetest testa solo la pagina che è accessibile sotto l'URL, non la vostra intera presenza sul web. Ciò significa che dovresti testare la tua homepage, tutte le landing page e, se rilevante, la tua panoramica dei prodotti individualmente.

In questa guida lavoro con i dati dell'analisi della nostra home page, raidboxes.de. Ciò significa che potete riprodurre tutto ciò che è spiegato qui uno a uno in webpagetest.org. Basta cliccare qui per ottenere i risultati dell'analisi.

Passo 2: avere una visione d'insieme

La prima cosa che vedrete è la panoramica del tempo di caricamento della pagina. Questo è diviso in tre sezioni:

  • i parametri di prova e i risultati delle analisi del potenziale (1)
  • la ripartizione delle caratteristiche principali (2 )
  • la panoramica della struttura della pagina (3)
I risultati del test della pagina web
Panoramica dei primi risultati di webpagetest.org

(1) Più verde è meglio è

Nella prima area, i parametri di prova sono elencati di nuovo per il controllo. Se scoprite un errore qui, ripetete semplicemente il test. Vedrete anche i risultati dell'analisi del potenziale. Webpagetest mostra anche i risultati di Google PageSpeed Insights . Se siete soddisfatti della visualizzazione spartana di Webpagetest, potete fare a meno di PageSpeed Insights .

Webpagetest usa un grado scolastico e un codice colore. A è il punteggio migliore, F il peggiore. Il verde indica un buon grado di ottimizzazione, l'arancione indica un potenziale di ottimizzazione utilizzabile e il rosso indica un bisogno urgente di azione.

(2) Più veloce è meglio è

Nella seconda sezione dei risultati, ti verranno presentati tutti i dati chiave rilevanti del tempo di caricamento della tua pagina per le varianti cache e uncached della tua pagina. È importante notare qui: Nella panoramica, Webpagetest mostra solo i valori di uno dei tre test. La panoramica ti mostra quale test è direttamente accanto alle etichette First View e Repeat View. Run 2, per esempio, è il risultato del secondo test.

Spiegazione dei singoli risultati di Webpagetest
Sfortunatamente, questa visione d'insieme è disponibile solo per i risultati di misurazioni individuali, vale a dire per i test individuali. Per i valori veramente preziosi, bisogna andare un livello più in profondità. Vi spiegherò come farlo tra un momento.

Cinque valori sono particolarmente importanti in questo momento:

  • Tempo di caricamento: il tempo necessario alla vostra pagina finché l'utente ha l'impressione che la pagina sia completamente caricata. Il tempo di caricamento corrisponde quindi al tempo di caricamento totale percepito della vostra pagina.
  • Primo byte: tempo fino alla trasmissione del primo byte di dati tra il client e il server web. Questo valore dovrebbe, se possibile, essere inferiore a 200 millisecondi ed è un'indicazione importante delle prestazioni del vostro hosting.
  • Start Render: questo valore descrive il tempo che una pagina impiega a caricare fino a quando il visitatore viene mostrato il contenuto per la prima volta. Fino a questo momento, la pagina rimane completamente bianca per l'utente. Naturalmente, anche questo valore dovrebbe essere il più basso possibile. Insieme al tempo di caricamento (o documento completo), questo valore forma il parametro di valutazione della velocità percepita del sito web. Start Render segna l'inizio del caricamento visibile della tua pagina, Document Complete la fine.
  • Document Complete: questo valore è identico al Load Time.
  • Fully Loaded: questo valore mostra quando la pagina è completamente caricata con tutti gli script e gli elementi. Descrive il tempo totale di caricamento tecnico della pagina. Questo è per lo più irrilevante per il visitatore. Ciò che è veramente decisivo è il tempo di caricamento percepito.

Per tutti questi valori vale quanto segue: più piccolo è, meglio è. Come linea guida, si può ricordare:

  • il tempo al primo byte dovrebbe essere inferiore a 200 millisecondi
  • Il rendering iniziale non dovrebbe essere superiore a 2,5 secondi
  • Il documento completo non dovrebbe essere superiore a cinque secondi

Naturalmente, questi valori sono solo regole empiriche. Dipende sempre dalla tua pagina: Una pagina di negozio con 50 prodotti - cioè 50 o più immagini e testi descrittivi - si carica naturalmente più lentamente di una pagina di impronta che consiste solo di testo.

Perciò posso solo consigliare: Testate i siti dei vostri concorrenti diretti e dei vostri modelli. In questo modo si ottengono valori comparativi all'interno del settore.

Calcolo dei valori medi - Ora è il momento del nitty-gritty

Sfortunatamente, la panoramica spiegata sopra mostra solo i risultati di una singola misurazione. E ricordate: valori singoli e isolati possono portarvi fuori strada. Ecco perché hai eseguito almeno tre misurazioni consecutive per il test della tua pagina. E le medie di queste tre misurazioni sono le migliori approssimazioni che potete ottenere per il tempo di caricamento della vostra pagina.

E non preoccupatevi: per creare le medie basta premere un pulsante:

Tracciare i risultati del test della pagina web
Cliccando sull'opzione plot Webpagetest calcola i valori medi per i tuoi risultati di misurazione.

Ora si ottiene una quantità inizialmente confusa di dati dai cosiddetti plot. E questi sono esattamente i risultati che volete avere. In linea di principio, questa nuova panoramica è la stessa per tutti i valori. Quindi, una volta che si capisce come leggerli, sono tutt'altro che confusi.

Test della pagina web Vista del tracciato
Questi grafici sono un'eccellente illustrazione del perché si dovrebbero sempre prendere misure multiple: Il punto di misurazione 3 è quasi un secondo peggiore del punto di misurazione 1, quindi la media è essenziale per un'analisi professionale delle prestazioni.

Come potete vedere, tutti e tre i valori misurati (1-3) sono qui tracciati in un diagramma (notevole è soprattutto la differenza tra il punto di misura 1 e il punto 3). Sopra il grafico c'è il valore a cui si riferisce il diagramma (4). In questo caso il tempo di carico percepito(Document Complete o Load Time). Il numero nella colonna Mean descrive ora il valore medio del tempo di carico su tutte e tre le misurazioni (5). Questa media è l'informazione più preziosa che puoi ottenere sul tuo sito.

A proposito: spuntando la casella Repeat puoi anche ottenere i valori del tempo di caricamento con e senza cache. E se volete trovare i risultati per gli altri valori: basta cercare "First Byte" e "Start Render" tramite la ricerca del vostro browser (CTRL+F per PC e cmd+f per Mac).

Conclusione intermedia: molto lavoro per dati particolarmente preziosi

Ok, questo era un sacco di input. Ed erano molti passi. Soprattutto rispetto ai semplici metodi di test. Ma ne vale la pena, perché l'avete visto nei numeri dei grafici: Due test con le stesse impostazioni possono a volte essere distanti un intero secondo. In certe circostanze, il caso decide se investire tempo e denaro nell'ulteriore ottimizzazione delle vostre pagine o meno. E soprattutto se guadagnate i vostri soldi con WordPress , che sia con il vostro negozio, un business di web design o la vostra agenzia, dovreste avere la migliore base di dati per una tale decisione.

Infatti, non siamo ancora alla fine. Perché ora conosci i parametri di performance più importanti della tua pagina, quindi sai quanto velocemente la tua pagina si carica e se c'è ancora potenziale di ottimizzazione, ma non sai esattamente dove la tua pagina può essere migliorata. Ed è proprio a questo che serve l'analisi dettagliata.

Passo 3: Analisi dettagliata

La panoramica ti dice già molto sulla tua pagina. Puoi vedere se c'è ancora margine di miglioramento in certe aree, quanto velocemente la tua pagina si carica effettivamente e se potrebbe caricarsi un po' più velocemente. Tuttavia, non sarete ancora in grado di identificare le cause dei problemi. Ma potete trovarli nei rapporti dettagliati:

I diagrammi a cascata elencano ogni singola richiesta HTTP che un browser fa al server web. A prima vista, questi diagrammi sembrano molto complessi e confusi. Ma se sai come fare, puoi estrarre un sacco di dettagli sul tuo sito da un grafico a cascata con un solo sguardo. Qui vi mostriamo come leggere correttamente i grafici a cascata e come potete usarli per ottimizzare ulteriormente il vostro sito.

Fondamentalmente, una pagina veloce ha un diagramma a cascata breve con poche e brevi richieste. Ciò significa che la lunghezza del diagramma e la lunghezza delle barre nelle singole linee sono particolarmente rilevanti.

Nella Performance Review troverai informazioni dettagliate su come le prestazioni del tuo sito sono già ottimizzate. Questa revisione dettagliata contiene tre elementi:

  • la lista di controllo dell'ottimizzazione
  • la ripartizione dettagliata del test di rendimento
  • il glossario

Dovresti dare un'occhiata al glossario prima se analizzi il tuo sito con webpagetest.org per la prima volta. Tutti i termini importanti della Performance Review sono spiegati qui.

Estratto dal glossario di Webpagetest.
Purtroppo in inglese, ma Webpagetest spiega effettivamente ogni termine tecnico in dettaglio.

Nella lista di controllo dell'ottimizzazione, troverete i singoli criteri di valutazione che vengono applicati a ciascuna delle richieste HTTP. Un segno di spunta verde significa che il requisito è soddisfatto, un triangolo giallo indica una necessità di miglioramento, e una croce rossa significa che la misura di ottimizzazione proposta manca.

Un estratto dalla lista di controllo delle prestazioni di Webpagetest.
Con l'Optimization Checklist puoi vedere esattamente quali immagini del tuo sito hanno ancora un potenziale di ottimizzazione, quali richieste dovrebbero essere compresse ulteriormente e se il tuo caching funziona correttamente.

Infine, troverete una descrizione degli avvertimenti e delle misure di ottimizzazione mancanti nella sezione dei dettagli. Webpagetest descrive le ottimizzazioni ancora possibili per ogni risorsa. Per le immagini, per esempio, mostra quanto volume di dati può essere salvato.

Dovrete passare un po' di tempo con queste valutazioni dettagliate, ma con il loro aiuto potrete ottenere un quadro dettagliato del vostro sito e del suo potenziale di ottimizzazione.

E poiché è fondamentalmente la stessa informazione che PageSpeed Insights sputa fuori, si può naturalmente eseguire un'analisi PageSpeed in parallelo. Perché questo test è molto più bello e meglio preparato.

Passo 4: Analisi del tempo di caricamento percepito

A differenza di tutti gli altri test che conosciamo, Webpagetest è l'unico che mostra gratuitamente il tempo di caricamento percepito della vostra pagina. Tramite il filmstripview si può guardare un video del caricamento della pagina. In questo modo puoi vedere esattamente cosa vedono i tuoi visitatori e puoi valutare ancora meglio se e come la tua pagina dovrebbe essere ottimizzata.

Webpagetest trova Filmstripview
Troverete il filmstripview nella panoramica dei vostri risultati di misurazione all'estrema destra. Attenzione: questa opzione non è sempre visualizzata. Il perché non mi è del tutto chiaro. Tuttavia, ripetere il test ha sempre reso l'opzione accessibile.

Il tempo di caricamento percepito è probabilmente la metrica più importante del tempo di caricamento della tua pagina. Influenza il fatto che i tuoi visitatori lascino la pagina prematuramente, la probabilità di conversione e l'esperienza complessiva della tua pagina. Soprattutto per i negozi, la velocità percepita della pagina è quindi un punto di riferimento importante. Naturalmente, il tempo di caricamento percepito dovrebbe sempre essere il più basso possibile.

Oltre al film stripview, ricordate questo:

Rappresentazione schematica del tempo di caricamento della pagina
Il tempo di caricamento totale percepito dovrebbe essere il più basso possibile. Allo stesso tempo, è importante che la distanza tra T0 e la resa iniziale sia la più breve possibile. Perché così l'utente ha l'impressione molto presto che la pagina sia completamente caricata, anche se è lontano dall'esserlo.

La Filstrip View ti mostra esattamente l'aspetto della tua pagina e quali processi sono in esecuzione in un dato momento. Se guardate il test con questi dati, vedrete che non succede niente nella pagina per più di tre secondi. Ma poi, in un colpo solo, la pagina appare quasi esattamente come nello stato finale. Così l'utente ha l'impressione che la pagina abbia finito di caricarsi entro 3,5 secondi. Oppure il visitatore ha già la sensazione dopo 3,5 secondi di poter interagire con la pagina.

Quindi, specialmente quando si dà la priorità al contenuto visibile della pagina, il Filmstrip View è uno strumento molto prezioso.

Conclusione: con queste basi e un po' di pratica otterrai un'ottima panoramica del tuo sito.

Ok, dopo aver letto questo articolo dovreste ora essere in grado di scegliere le impostazioni giuste per un test di una pagina web, sapere quali metriche interpretare e come evitare interpretazioni errate dovute agli outlier. Sai anche dove trovare informazioni dettagliate sulla tua pagina e come determinare e visualizzare il tempo di caricamento percepito della tua pagina.

Così conosci le basi importanti per avere una visione davvero completa del tuo sito, dei siti dei tuoi clienti e di qualsiasi altro progetto web. E sai dove trovare le informazioni che ti permettono di riempire di vita i risultati delle misurazioni e di trarre conclusioni significative per il tuo sito.

Ma perché era di nuovo importante? Molto semplicemente: senza una misura ragionevole dello stato reale della vostra pagina, non potete valutare correttamente come la vostra pagina si carica attualmente. E d'altra parte, vi mancano informazioni per l'ottimizzazione del tempo di caricamento.

Hai un altro consiglio per usare webpagetest? Perfetto, allora scrivi un commento su questo post!

RAIDBOXER dall'inizio e capo del supporto. Ai Bar e ai WordCamps ama parlare di PageSpeed e delle prestazioni dei siti web. Il modo migliore per corromperlo è un espresso - o un pretzel bavarese.

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.