Webpagetest: Addomestica il mostro di prova e analizza le tue pagine web

Jan Hornung Aggiornato il 23.01.2020
14 Min.
Webpagetest
Ultimo aggiornamento il 23.01.2020

WebPagetest è probabilmente lo strumento gratuito migliore e più completo per misurare il tempo di caricamento delle pagine. Purtroppo fornisce molti dati molto complessi. Oggi vi mostrerò cosa dovete regolare, come portare ordine nel caos dei dati e quali parametri vi servono per un'analisi professionale. Perché solo se si sa come si caricano i progetti dei clienti e le proprie pagine, è possibile ottimizzarli.

Sicuramente il lato proprio dovrebbe esserlo. E in fretta. Naturalmente, perché molto dipende dal tempo di caricamento: il tasso di conversione, la percezione della sicurezza dei vostri visitatori e il ranking Google della vostra offerta. Ma molti WordPress utenti non arrivano nemmeno a determinare correttamente il tempo di caricamento della propria pagina.

Alcuni gestori di siti, ad esempio, non sanno nemmeno con quali strumenti possono analizzare correttamente il loro sito. Oppure non sanno quali impostazioni devono fare per ottenere risultati davvero buoni. Per evitare di commettere gli stessi errori, oggi vi mostrerò come ottenere una rapida e significativa panoramica del vostro sito con il (a nostro avviso) miglior strumento di misura gratuito disponibile. Così sapete esattamente quanto velocemente si carica il vostro sito e se e dove dovete ottimizzare.

Per capire esattamente come funzionano le singole fasi di analisi, vi consiglio di guardare i set di dati collegati ai punti importanti o di analizzare il vostro sito in parallelo. Perché: portare ordine nel caos dei 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 un cliente o guadagnate con i vostri progetti WPWordPress , ne vale la pena.

Webpagetest è il miglior strumento che conosciamo

Concesso: Noi lodiamo webpagetest.org in questo articolo zampillante. Forse troppo, ma non troppo. Perché Webpagetest è l'unico strumento a noi noto che consente di determinare in modo affidabile il tempo di caricamento assoluto e percepito della vostra pagina. E tutto questo gratis. Nessuna barriera di pagamento, nessun modello di abbonamento, semplicemente dati preziosi e un APIche permette di automatizzare il tutto: è così che dovrebbe essere.

Per completezza, lasciatemi dire che anche voi Pingdom e GTmetrix ottenere dei bei risultati di test. Ma non così bello come con un test su una pagina web. Ciò non significa, naturalmente, che non si possa e non si debba sostenere i risultati con diversi test in diversi strumenti. E non significa che non si debba misurare con Pingdom o GTmetrix. Ma posso consigliarvi di dare un'occhiata a Webpagetest almeno una volta.

Con noi è quasi diventato un mantra: Per misurare il tempo di caricamento della vostra pagina, strumenti come Google PageSpeed Insights non fuori. Perché queste determinano solo il potenziale prestazionale del vostro sito. Naturalmente questi dati sono ancora preziosi - dal punto di vista delle prestazioni e del SEO - ma semplicemente non consentono di trarre conclusioni su ciò che accade effettivamente quando un visitatore chiama il vostro sito.

Questo è quello che vuoi sapere. Ed è esattamente ciò che occorre sapere per determinare se una misura di ottimizzazione è efficace.

Purtroppo, Webpagetest fornisce non solo dati non molto ben preparati, ma anche risultati di test molto estesi. Pertanto, oggi vi mostrerò come utilizzare Webpagetest e come interpretare i risultati in modo basilare.

Nella prossima sezione tratterò brevemente alcune informazioni di base sullo strumento. Se non siete interessati, salta Fai la parte e basta.

Webpagetest: Il fratello maggiore di Google PageSpeed Insights

Webpagetest era originariamente un progetto AOL e destinato solo ad uso interno. Ma nel 2008 il programma è diventato un software open source ed è ora Mantenuto e sviluppato principalmente da Google. La documentazione completa di Webpagetest può essere trovata su GitHub e può anche scaricato e utilizzato localmente.

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

A differenza di Pingdom e GTmetrix, non c'è nessuna azienda dietro Webpagetest che voglia vendere un servizio a pagamento (ok, tranne Google, ma almeno il servizio non viene venduto direttamente). Si potrebbe piuttosto dire che Webpagetest fa parte del piano di Google per rendere il web più veloce nel complesso. Qualunque cosa si voglia valutare gli sforzi di Google in questo contesto.

In 4 passi per un caricamento dei dati davvero significativo

Sì, Webpagetest è più complesso di altri strumenti. Ma non lasciatevi scoraggiare! In questo caso la complessità è buona. Perché significa che si ottengono ottimi dati sul vostro sito web. E anche come primo utente si ottengono le informazioni rilevanti abbastanza rapidamente.

Questo viene fatto con le seguenti quattro fasi:

Primo passo: Impostare i parametri di prova

Secondo passo: fornire una panoramica

Terzo passo: Analisi dettagliata

Quarto passo: Analisi del tempo di carico percepito

Passo 1: Impostare i parametri di prova

Webpagetest offre impostazioni molto precise per testare il vostro sito web. Quattro di queste impostazioni sono particolarmente importanti per ottenere buoni risultati di test:

  • il server da testare con (1)
  • il browser da testare con (2)
  • le impostazioni avanzate del test, che approfondirò tra poco (3)
Homepage di Webpagetest
Ecco come si presenta la pagina iniziale di Webpagetest. È un po' più complesso di quello di Pingdom o di GTmetrix.

Il server scelto per il test simula un utente che accede alla pagina da lì. Se si sceglie il server predefinito negli USA, verrà visualizzato il risultato del test per una chiamata da una pagina del Texas. Ma nella maggior parte dei casi 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 dell'applicazione.

Le due applicazioni più comuni sono:

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

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

Se si vuole sapere quale misura di ottimizzazione è necessaria, in linea di principio non importa quale sia la posizione del server utilizzato. L'unica cosa importante è: dovete utilizzare la stessa posizione del server per il test prima e dopo l'ottimizzazione. Altrimenti non è possibile confrontare correttamente i dati misurati. Naturalmente raccomando anche per questo test un server di prova tedesco. Fornisce 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. Potete anche vedere tutti i server di prova a colpo d'occhio.

Il browser utilizzato

Webpagetest offre molte opzioni di impostazione per simulare determinate tecniche di trasmissione e browser. Ad esempio, è possibile definire che la pagina debba essere caricata tramite una connessione 3G e Firefox. Per cominciare, è sufficiente scegliere il browser che il vostro gruppo target utilizza 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. Anche i risultati per Firefox e Safari, d'altra parte, sono naturalmente interessanti.

Molto importante: le impostazioni avanzate determinano quanto saranno buoni i vostri dati di misura alla fine!

Oltre ai due parametri che determinano come viene eseguito il test - cioè la posizione del server e il browser utilizzato - Webpagetest offre anche la possibilità di impostare ciò che il test deve produrre alla fine. Nelle impostazioni avanzate si può per esempio definire che solo determinati valori devono essere emessi, o che il test deve fermarsi automaticamente dopo un certo tempo. Ed ecco 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 carica. Altrimenti si corre il rischio di misurare valori erratici e si rischia di cercare un problema che non esiste. E credetemi: l'abbiamo già sperimentato più volte. Raccomando almeno tre test consecutivi.

Dovresti anche ricordarti di misurare sempre la versione in cache del tuo sito. È possibile farlo con l'opzione Repeat View.

Impostazioni avanzate di Webpagetest
Nelle impostazioni avanzate di Webpagetest si trova la vera magia dello strumento. Solo se si selezionano qui almeno 3 test e si include anche la Repeat View, i dati che si ottengono saranno davvero interessanti.

Avete il vostro URL - per esempio https://raidboxes.de - e impostare i parametri del test (ad es. il server tedesco, il browser, le 3 ripetizioni minime e la Repeat View), è possibile avviare il test. A seconda di quanti altri utenti stanno attualmente testando le loro pagine, l'analisi può richiedere alcuni minuti.

Importante: Webpagetest testa solo la pagina raggiungibile sotto l'URL, non l'intera presenza sul web. Ciò significa che dovreste testare la vostra homepage, tutte le landing page ed eventualmente anche la vostra panoramica dei prodotti individualmente.

In questa guida lavoro con i dati dell'analisi della nostra homepage, raidboxes.com. Ciò significa che è possibile ricreare tutto ciò che è spiegato qui, uno per uno, su webpagetest.org. Basta cliccare qui e riceverete i risultati dell'analisi a partire dalla fine di dicembre 2016.

Fase 2: Ottenere una visione d'insieme

La prima cosa che si vede è la panoramica dei tempi di caricamento delle pagine. Questo è diviso in tre sezioni:

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

(1) Più verde è, meglio è

Nella prima sezione sono elencati di nuovo i parametri di prova a scopo di controllo. Se trovate un errore qui, ripetete il test. Vedrete anche il risultato dell'analisi del potenziale. Così Webpagetest vi dà anche i risultati di GooglePageSpeed Insights . Se si riesce ad affrontare la presentazione spartana di Webpagetest, dualso può farne PageSpeed Insights a meno.

Webpagetest utilizza un codice a colori e una classe scolastica. A è il migliore, F il punteggio peggiore. Il verde indica un buon grado di ottimizzazione, l'arancione indica un potenziale di ottimizzazione utilizzabile e il rosso indica un'urgente necessità di intervento.

(2) Prima è, meglio è

Nella seconda sezione dei risultati vi saranno presentati tutti i dati chiave rilevanti del tempo di caricamento della vostra pagina per le varianti memorizzate e non memorizzate della vostra pagina. La cosa importante qui è: Nella panoramica, Webpagetest visualizza solo i valori per uno dei tre test. La panoramica mostra quale sia il test, proprio accanto alle etichette First View e Repeat View. La prova 2, ad esempio, è il risultato della seconda prova.

Spiegazione dei singoli risultati di Webpagetest
Purtroppo, questa panoramica è disponibile solo per i singoli risultati di misura, cioè per le singole prove. Per i valori davvero preziosi, bisogna andare un livello più profondo. Vi spiegherò come fare in un attimo.

Cinque valori sono particolarmente importanti in questo caso:

  • Tempo di caricamento: il tempo necessario all'utente per sentire che la pagina è completamente caricata. Il tempo di carico corrisponde al tempo di carico totale percepito della vostra pagina.
  • Primo Byte: tempo fino alla trasmissione del primo byte di dati tra client e server web. Se possibile, questo valore dovrebbe essere inferiore a 200 millisecondi ed è un indicatore importante per le prestazioni del vostro hosting.
  • Start Render: questo valore descrive il tempo di caricamento di una pagina fino a quando il contenuto non viene visualizzato per la prima volta al visitatore. Fino a questo momento la pagina rimane completamente bianca per l'utente. Anche questo valore dovrebbe essere il più basso possibile. Insieme al Load Time (o Document Complete), questo valore costituisce lo standard di valutazione della velocità percepita del sito web. Start Render segna l'inizio del caricamento visibile della pagina, Documento Completa la fine.
  • Document Complete: Questo valore è identico al Load Time.
  • Fully Loaded: Questo valore indica quando la pagina è completamente caricata, con tutti gli script e gli elementi. Descrive il tempo totale di caricamento tecnico della pagina. Questo è di solito irrilevante per il visitatore. Ciò che conta davvero è il tempo di carico percepito.

Per tutti questi valori vale quanto segue: più piccolo è, meglio è. Come linea guida, ricordate:

  • il tempo per il primo byte dovrebbe essere inferiore a 200 millisecondi
  • Avviare il Render non dovrebbe durare più di 2,5 secondi
  • Documento Completato non dovrebbe durare più di cinque secondi

Naturalmente questi valori sono solo regole di base. E' sempre anche dalla tua parte: Una pagina del negozio con 50 prodotti - vale a dire 50 o più immagini e testi descrittivi - è naturalmente più lenta di una pagina di stampa composta solo da testo.

Quindi posso solo tirare a indovinare: Testate anche i siti dei vostri diretti concorrenti e i vostri modelli. In questo modo si ottengono valori comparabili all'interno del settore.

Calcolo dei valori medi - Ora è il momento di mettersi al lavoro

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é avete effettuato almeno tre misurazioni consecutive per testare il vostro sito. E i valori medi di queste tre misurazioni sono le migliori approssimazioni che si possono ottenere per il tempo di caricamento delle pagine.

E non preoccupatevi: la creazione dei valori medi richiede solo la pressione di un pulsante:

Risultati di tracciatura del webpagetest
Cliccando sull'opzione del grafico, Webpagetest calcolerà i valori medi dei risultati delle vostre misurazioni.

Ora si ottiene una quantità di dati inizialmente confusa dalle cosiddette trame. E questi sono esattamente i risultati che volete ottenere. In linea di principio questa nuova panoramica è la stessa per tutti i valori. Quindi, una volta capito come leggerle, sono tutt'altro che confuse.

Vista della trama di Webpagetest
Queste trame illustrano perfettamente il motivo per cui si dovrebbero sempre effettuare più misurazioni: Il punto di misura 3 è quasi un secondo peggiore del punto di misura 1, quindi la media è essenziale per un'analisi delle prestazioni professionali.

Come si può vedere, tutti e tre i valori misurati (1-3) sono qui rappresentati in un diagramma (la differenza tra il punto di misura 1 e il punto di misura 3 è particolarmente notevole!) Sopra il grafico si trova 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 Media descrive ora il valore medio del tempo di carico su tutte e tre le misurazioni (5). Questo valore medio è l'informazione più preziosa che si può ottenere sul vostro sito.

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

Conclusione intermedia: molto lavoro per dati particolarmente preziosi

Ok, sono stati un sacco di input. E sono stati molti passi. Soprattutto rispetto ai semplici metodi di prova. Ma ne è valsa la pena, perché si poteva vedere nei numeri dei diagrammi: Due test con le stesse impostazioni possono essere a volte distanti tra loro di un intero secondo. Quindi può darsi che sia il caso di decidere se investire tempo e denaro per ottimizzare ulteriormente le vostre pagine o meno. E soprattutto se si guadagnano soldi con WordPress il proprio negozio, attività di web design o agenzia, si dovrebbe avere la migliore base di dati per una tale decisione.

Ma in realtà non siamo ancora alla fine. Perché ora conoscete i parametri prestazionali più importanti del vostro sito, quindi sapete quanto velocemente si carica il vostro sito e se c'è ancora un potenziale di ottimizzazione, ma non sapete dove esattamente il vostro sito può essere migliorato. Ed è proprio a questo che serve l'analisi dettagliata.

Fase 3: Analisi dettagliata

La panoramica vi dice già molto sul vostro sito. Potete vedere se c'è ancora spazio per migliorare in alcune aree, quanto velocemente la vostra pagina si carica effettivamente e se potrebbe caricarsi un po' più velocemente. Tuttavia, non si conoscono ancora le cause dei problemi. Ma li potete trovare nei rapporti dettagliati:

I diagrammi a cascata elencano ogni singola richiesta HTTP che un browser fa al server web. A prima vista, questi diagrammi appaiono molto complessi e confusi. Ma se sapete come, potete ottenere molti dettagli sul vostro sito da un diagramma a cascata con un solo sguardo. Qui vi mostriamo come leggere correttamente i diagrammi delle cascate e come potete utilizzarli per ottimizzare ulteriormente il vostro sito.

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

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

  • la Lista di controllo per l'ottimizzazione
  • la ripartizione dettagliata del test di prestazione
  • il glossario

Si dovrebbe guardare prima il glossario quando si analizza il sito per la prima volta con webpagetest.org. Spiega tutti i termini importanti della Performance Review.

Estratto dal glossario di Webpagetest.
Purtroppo in inglese, ma Webpagetest spiega in realtà 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 indica che il requisito è soddisfatto, un triangolo giallo indica che c'è spazio per un miglioramento e una croce rossa indica che la misura di ottimizzazione proposta manca.

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

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

Anche se dovrete affrontare queste valutazioni dettagliate per un certo periodo di tempo, potrete utilizzarle per ottenere un quadro dettagliato del vostro sito e del suo potenziale di ottimizzazione.

E poiché si tratta fondamentalmente delle stesse informazioni che sputano PageSpeed Insights fuori, è possibile naturalmente eseguire un'analisi PageSpeed in parallelo. Perché questo test è molto più bello e meglio preparato.

Fase 4: Analisi del tempo di carico percepito

A differenza di tutti gli altri test a noi noti, Webpagetest è l'unico che mostra gratuitamente il tempo di caricamento percepito della vostra pagina. È possibile guardare un video della struttura della pagina tramite lo stripview del filmato. In questo modo potrete vedere esattamente ciò che i vostri visitatori vedono e potrete valutare ancora meglio se e come il vostro sito debba essere ottimizzato.

Webpagetest Trova Filmstripview
Troverete il film stripview nella panoramica dei risultati delle vostre misurazioni all'estrema destra. Attenzione: Questa opzione non viene sempre visualizzata. Perché non mi è del tutto chiaro il motivo. Tuttavia, la ripetizione del test ha sempre reso disponibile questa opzione.

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

Oltre alla visione del filmato si dovrebbe ricordare quanto segue:

Rappresentazione schematica del tempo di caricamento delle pagine
Il tempo di ricarica totale percepito dovrebbe essere il più breve possibile. Allo stesso tempo, è importante che la distanza tra T0 e Start Render sia la più breve possibile. Perché allora l'utente ha l'impressione molto presto che la pagina sia pronta per essere caricata, anche se è ben lungi dall'esserlo.

La Filstrip View vi mostra al decimo di secondo più vicino come appare la vostra pagina e quali processi sono in esecuzione in un dato momento. Se si guarda il test con questi dativedrai che niente si muove da quel lato per più di tre secondi. Ma poi, all'improvviso, la pagina appare quasi uguale allo stato finale. L'utente ha l'impressione che la pagina venga caricata entro 3,5 secondi. Oppure, in alternativa, il visitatore ha già la sensazione, dopo 3,5 secondi, di poter interagire con la pagina.

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

Conclusione: con queste nozioni di base e un po' di pratica otterrete un'ottima panoramica del vostro sito

Ok, dopo aver letto l'articolo dovreste ora essere in grado di scegliere le giuste impostazioni per un test su una pagina web, sapere quali metriche dovete interpretare e come evitare interpretazioni errate dovute ad anomalie. Sapete anche dove trovare informazioni dettagliate sulla vostra pagina e come determinare il tempo di caricamento percepito della vostra pagina e come visualizzarlo.

Quindi conoscete le basi importanti per avere una panoramica davvero completa del vostro sito, dei siti dei vostri clienti e di qualsiasi altro progetto web. E voi sapete dove ottenere le informazioni che vi permettono di riempire di vita i risultati delle misurazioni e di trarre conclusioni significative per il vostro sito.

Ma perché era di nuovo importante? Molto semplicemente: senza un misura ragionevole dello stato attuale della vostra pagina, non è possibile valutare correttamente come si sta caricando la vostra pagina. E d'altra parte vi mancano le informazioni per il Ottimizzazione dei tempi di carico.

Avete un altro suggerimento per l'utilizzo di Webpagetest? Perfetto, allora scrivi un commento su questo post!

RAIDBOXER della prima ora e responsabile del supporto. Al Bar- and WordCamps gli piace parlare di PageSpeed e delle prestazioni del sito web. Il modo migliore per corromperlo è con un espresso - o un pretzel bavarese.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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