Webpagetest

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

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 tuoi WP-WordPress -progetti, lo sforzo vale la pena.

Webpagetest è lo strumento migliore 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 a un uso interno. Nel 2008, tuttavia, il programma è diventato un software open source e ora viene mantenuto e sviluppato principalmente da Google. L'intera documentazione di Webpagetest si trova su GitHub e può anche essere scaricata e utilizzata 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, dietro a Webpagetest non c'è nessuna azienda che vuole vendere un servizio a pagamento (ok, tranne Google, ma almeno il servizio non viene venduto direttamente). Piuttosto, si potrebbe dire che Webpagetest fa parte del piano di Google per rendere il web più veloce in generale. Comunque si vogliano 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: Imposta i parametri del test

Passo 2: Una panoramica

Terzo passo: Analisi dettagliata

Quarto passo: Analisi del tempo di caricamento percepito

Passo 1: Impostazione dei parametri di test

Webpagetest offre impostazioni molto precise 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)
Home page 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. Determinare il tempo di caricamento di un utente del tuo gruppo target
  2. Confronto del tempo di carico dopo una misura di ottimizzazione

Se vuoi sapere come i tuoi visitatori percepiscono il tempo di caricamento della pagina, allora la posizione del server deve corrispondere il più possibile alla posizione di un utente tipo. Per un blog con lettori prevalentemente tedeschi, questo significa che dovresti scegliere un server in Germania, ad 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 test su Webpagetest.org
Oltre alla selezione dell'elenco, hai 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.

Puoi trovare informazioni al riguardo in Google Analytics o Piwik, ad esempio. Raidboxes , ad esempio, viene visitato principalmente tramite Chrome.

Estratto dei browser utilizzati dai visitatori di raidboxes.de. Questi servono come modello per le impostazioni di 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 dati di misurazione!

Oltre ai due parametri che determinano la modalità di esecuzione del test, ossia la posizione del server e il browser utilizzato, Webpagetest offre anche la possibilità di impostare il risultato finale del test. Nelle impostazioni avanzate puoi, ad esempio, stabilire che vengano emessi solo determinati valori o che la misurazione si interrompa automaticamente dopo un certo tempo. In questo caso ci sono due impostazioni particolarmente importanti per ottenere dati ragionevolmente completi e affidabili: Il "Numero di test da eseguire" e la "Vista di ripetizione".

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.

Ricorda inoltre di misurare sempre la versione in cache della tua pagina. Puoi ottenere questo risultato utilizzando l'opzione Vista ripetuta.

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 hai 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 del test e i risultati delle analisi del potenziale (1)
  • la ripartizione delle caratteristiche principali (2 )
  • la panoramica della struttura della pagina (3)
I risultati generali 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 sei soddisfatti della visualizzazione spartana di Webpagetest, potete fare a meno di PageSpeed Insights .

Webpagetest utilizza un codice di colore e di voto scolastico. A è il punteggio migliore, F il peggiore. Il verde indica un buon grado di ottimizzazione, l'arancione un potenziale di ottimizzazione utilizzabile e il rosso un'urgente necessità di intervento.

(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
Purtroppo questa panoramica è disponibile solo per i risultati delle singole misurazioni, cioè per i singoli test. Per i valori davvero preziosi, devi andare un livello più in profondità. Tra poco ti spiegherò come fare.

Cinque valori sono particolarmente importanti in questo momento:

  • Tempo di caricamento: il tempo necessario alla tua pagina prima che l'utente abbia l'impressione che la pagina sia completamente caricata. Il tempo di caricamento corrisponde quindi al tempo di caricamento totale percepito della tua pagina.
  • Primo byte: tempo che intercorre tra la trasmissione del primo byte di dati tra il client e il server web. Questo valore dovrebbe essere, se possibile, inferiore a 200 millisecondi ed è un'indicazione importante delle prestazioni del tuo 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.
  • Completamento del documento: questo valore è identico al Tempo di caricamento.
  • 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 per raggiungere il primo byte deve essere inferiore a 200 millisecondi
  • Il rendering iniziale non deve essere superiore a 2,5 secondi.
  • Il documento completo non dovrebbe essere superiore a cinque secondi

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

Perciò posso solo consigliare: Testate i siti dei tuoi concorrenti diretti e dei tuoi 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:

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 grafici. E questi sono esattamente i risultati che vuoi ottenere. In linea di principio, questa nuova panoramica è uguale per tutti i valori. Quindi, una volta capito come leggerli, sono tutt'altro che confusi.

Test della pagina web Vista della trama
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: cliccando su Box Repeat puoi visualizzare anche i valori del tempo di caricamento con e senza cache. E se vuoi trovare i risultati per gli altri valori: cerca semplicemente "First Byte" e "Start Render" utilizzando la ricerca del tuo 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'hai 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 tuoi 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.

Fase 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 per l'ottimizzazione
  • la ripartizione dettagliata del test di performance
  • 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 ogni termine tecnico nel 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 della 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 tuo 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.

Fase 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 tuoi 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 dovresti 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 a valori anomali. Sai anche dove trovare informazioni dettagliate sulla tua pagina e come determinare e visualizzare il tempo di caricamento percepito della tua pagina.

Quindi conosci le basi importanti per avere una panoramica 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 dare vita ai 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!

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

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