WebPageTest: guida completa

Se hai letto qualcosa di SEO e web marketing saprai quanto sono importanti i dati. Per questo oggi parliamo di uno strumento di misurazione dell’efficienza delle pagine web noto per essere davvero completo e potente ma non proprio pensato per i principianti.

In questa guida su WebPageTest vedremo tutte le funzioni gratuite e cosa offrono in più i piani a pagamento, per poter sfruttare i tanti vantaggi del software sia che siamo alla prime armi, sia che passiamo le giornate tra codice e metriche di performance dei siti.

WebPageTest potrebbe avere una curva di apprendimento un po’ lenta, ma con questa guida e un filo di pazienza riusciremo a farci amicizia e navigare con sicurezza tra i diversi test e le tante opzioni e schermate.

Cos’è WebPageTest e a cosa serve

WebPageTest è uno strumento online che serve a valutare le prestazioni di una pagina web e ad esaminare nel dettaglio come avviene, per individuare criticità da risolvere e risalire alle cause dei problemi. È stato creato per uso interno da AOL nei primi anni 2000 e poi offerto anche all’esterno in modalità open-source; dal 2020 è stato acquisito da Catchpoint, che continua a svilupparlo e lo offre sia gratuitamente che in versione premium.

WebPageTest ti dà informazioni preziose per migliorare la SEO on-page e l’esperienza utente del tuo sito; insieme alla possibilità di osservare i progressi in seguito alle ottimizzazioni. Questo tool è insostituibile se vuoi velocizzare un sito su Prestashop, WordPress o un’altra qualsiasi piattaforma e hai bisogno di una diagnosi molto accurata, per esempio se ti sembra di aver già applicato tutte le buone pratiche e devi andare alla ricerca di problemi nascosti.

D’altra parte niente ti impedisce di usarlo per valutare pagine dei concorrenti, esattamente come si può fare con gli strumenti per analizzare il traffico dei siti web.

WebPageTest non è certo l’unico software online capace di analizzare le prestazioni dei siti web, ma ha tanti vantaggi, che scopriremo esplorandolo funzione per funzione.

Come funziona WebPageTest

Su WebPageTest trovi le funzionalità di analisi nella home page, subito sotto la sezione hero. C’è un menù a discesa da cui puoi selezionare uno dei 4 tipi di analisi:

• Site Performance
• Core Web Vitals
• Lighthouse
• Visual Comparison.

Non c’è bisogno di un account per avviare dei test gratuiti, ma solo dopo il login è possibile salvare i risultati. 

Test ‘Site Performance’

Vediamo come funziona la prima analisi che possiamo condurre con WebPageTest: Site Performance, cioè l’esame delle prestazioni del sito.

Nel primo campo inserisci l’indirizzo web della pagina che vuoi analizzare.

Puoi scegliere poi una località su cui eseguire il test, più vicina possibile alla posizione dei visitatori del tuo sito. Cliccando sulla freccetta apri una finestra con la mappa, in cui è possibile selezionare un luogo con clic su uno dei segnaposto.

Sotto la mappa trovi un menù con la lista di tutte le città disponibili, divise per continente. Per l’Italia c’è Milano, ad esempio.

Il menù successivo ti permette di scegliere il browser in base al tipo di dispositivo. 

Per desktop ci sono 8 opzioni:

Chrome – comprese le versioni Beta e Canary –, Firefox – compresi Nightly ed ESR –, Edge e Brave.

Per dispositivi mobili – Android e iOS – trovi una trentina di opzioni, tutte per Chrome ma legate a modelli di telefono come i vari Google Pixel o iPhone, Nexus e iPad.

Considera che le opzioni potrebbero cambiare a seconda della località su cui esegui l’analisi.

Più giù trovi una sezione di impostazioni con 5 schede.

La prima è Test Settings, che contiene le impostazioni per l’analisi fondamentali.

Per iniziare puoi selezionare il tipo di connessione più verosimile per i tuoi utenti, tra cui 3G lenta, normale e veloce, 4G, via cavo, Edge su dispositivi mobili.

Il menù successivo invece ti consente di scegliere le dimensioni dello schermo su cui vengono visualizzate le pagine web. Sono disponibili una decina di tipi standard; anche in questo caso, opta per quello che ti sembra più realistico o fai diverse simulazioni.

Quando hai finito puoi dare un nome alla configurazione sfruttando il campo Label.

Impostazioni avanzate

Le schede successive non sono necessarie per un test base, ma ti possono essere utili se vuoi fare un’analisi più avanzata delle prestazioni del tuo sito.

Scheda Advanced

Nella scheda Advanced di WebPageTest, ad esempio, è possibile configurare parametri avanzati per i test di caricamento delle pagine web. 

Tra le opzioni abbiamo:

• interrompere il test al completamento del documento;
• ignorare eventuali errori nei certificati SSL;
• registrare il traffico di rete tramite tcpdump;
• salvare i contenuti delle risposte HTTP come HTML, CSS o JSON;
• mantenere intatta la stringa originale dello user agent.

Di norma infatti, WebPageTest aggiunge in automatico una sua firma alla stringa dello user agent per identificare i test che esegue, il che potrebbe influenzare il comportamento del sito. Disattivando questo comportamento dovresti ottenere dei risultati più realistici.

In alternativa puoi sfruttare i campi e definire una tua User Agent String personalizzata; come anche aggiungere un’estensione allo user agent standard nel campo Append to UA String. 

Ci sono poi delle impostazioni relative a immagini e video. Solo su browser basati su Firefox e Chromium, è possibile disattivare il supporto per i formati AVIF e WEBP per testare il comportamento del sito con immagini non ottimizzate.

Un’altra funzionalità molto interessante permette di attivare la cattura video ad alta risoluzione per ottenere una sequenza di fotogrammi dettagliata del caricamento, e di impostarne la durata in modo da raccogliere dati anche dopo il caricamento della pagina.

E ancora, hai la possibilità definire header HTTP personalizzati, da applicare a tutte le richieste del browser, ad esempio per autenticazione o testing API; o di inserire uno script JavaScript da eseguire dopo l’inizio del caricamento del documento, utile per test avanzati o simulazioni sul DOM.

Scheda Chromium 

La scheda Chromium consente di attivare strumenti avanzati di analisi specifici per i browser basati su Chromium – browser web open source sviluppato da Google – come Google Chrome, Microsoft Edge e Brave. 

Per impostazione predefinita la funzione Capture Dev Tools Timeline, raccoglie dati sulle performance delle attività del browser durante il caricamento della pagina, ma puoi spegnerla.

Inoltre qui è possibile attivare:

• il profiler di campionamento e le statistiche di runtime di JavaScript V8, che servono ad analizzare come il browser esegue il codice JavaScript per migliorarne la velocità;
• la Chrome Trace – tracciato dettagliato delle operazioni del browser;
• la registrazione di log di rete, con tutte le connessioni e i file caricati dalla pagina;
• la modellazione del traffico tramite strumenti di sviluppo di Chrome, che simula anche connessioni lente o instabili (opzione sconsigliata perché WebPageTest ha una funzionalità nativa analoga);
• la modalità Data Reduction – solo per test su dispositivi Android con Chrome 34+, serve a simulare una modalità in cui Chrome cerca di risparmiare dati.

Puoi anche specificare diverse categorie di tracciamento che vuoi monitorare, come gpu, netlog o blink, o mantenere quelle preimpostate.

Inoltre la scheda contiene altri 2 campi per utenti avanzati: uno per definire nuove regole di risoluzione degli host – utile per fare test locali o su ambienti di prova – e uno per configurare comandi da riga di comando personalizzati.

Se questi aspetti ti sembrano troppo complessi da gestire, lascia le impostazioni come sono; se invece sei felice di poterci mettere le mani, approfittane.

Scheda Block

La scheda Block di WebPageTest contiene due funzioni principali, che servono a escludere dal test elementi come analytics, pubblicità, o script di terze parti.

Block Requests Containing (URL substrings) permette di bloccare richieste web che contengono nell’URL determinate parole o frammenti di parole. 

Block Domains (full host names) serve a bloccare interi domini durante il test. Per usarla ti basta inserire gli URL separati da spazi.

In entrambi i casi puoi digitare gli indirizzi da escludere nel campo apposito oppure caricare un file di testo.

Scheda SPOF

La scheda SPOF serve a simulare il fallimento di domini specifici reindirizzando le loro richieste verso blackhole.webpagetest.org, che si occupa di respingerle ‘silenziosamente’. 

Anche qui è possibile sfruttare il campo per l’inserimento o caricare un file.

Test ‘Core Web Vitals’

Per avviare l’analisi dei Core Web Vitals su WebPageTest, ti basta selezionare questa voce nel menù dei test, inserire l’URL e scegliere una delle 2 configurazioni: ‘Mobile – 4G’ (testato dalla Virginia) e ‘Desktop – Cable’.

Test ‘Lighthouse’

Il test ‘Lighthouse’ permette di analizzare il comportamento del tuo sito con Lighthouse – strumento open source sviluppato da Google per analizzare le pagine web e valutarne le prestazioni. 

Il test verifica come funzionerebbe il tuo sito su un cellulare con una connessione 3G lenta e restituisce dei punteggi di riepilogo per ogni categoria che Lighthouse controlla, più dei report dettagliati per ogni punto.

Nella schermata trovi un campo per inserire un indirizzo web e uno per scegliere la località da cui effettuare il test all’interno di una lista di una decina di paesi.

Test ‘Visual Comparison’

Il Test ‘Visual Comparison’ serve a confrontare in modo visivo diversi URL.

La schermata comprende i campi per inserire gli indirizzi web ed eventuali etichette, insieme a un menù per scegliere la configurazione del test. Le diverse opzioni combinano una località a un tipo di dispositivo fisso o mobile e di connessione, ad esempio Mobile 4G Virginia, US.

Come usare i test e interpretare i dati di WebPageTest

I risultati del test WebPageTest possono differire dall’uso reale perché si basano su un tipo di connessione fisso, ad esempio 3G, mentre gli utenti reali usano reti molto diverse tra loro e possono anche cambiare rete nel tempo, ad esempio passando dalla fibra alla connessione dati del telefono.

I creatori del software ci incoraggiano quindi ad analizzare il sito simulando il maggior numero di condizioni del browser – che dipendono dal dispositivo, dalla connessione e dalla località – sia da mobile che da desktop. Anche perché non tutte le metriche sono disponibili con tutte le configurazioni del browser. Per avere risultati più realistici e avvicinarti all’esperienza dell’utente medio-lento, prova a effettuare più test simulando situazioni con velocità differenti. 

In WebPageTest le metriche sono distribuite su diverse schermate, accessibili dal menù View posizionato sotto l’header. Dopo aver avviato un test ti troverai per impostazione predefinita sulla vista Performance Summary.

Vista Performance Summary

La schermata Performance Summary fa una panoramica delle prestazioni della pagina web; qui trovi una valutazione della velocità, usabilità e resilienza – una breve spiegazione e un’anticipazione del numero di opportunità, suggerimenti per migliorare ed esperimenti da provare che vedrai in dettaglio nelle viste successive.

Metriche (Page Performance Metrics)

In Page Performance Metrics troviamo una serie di parametri che servono a valutare le prestazioni del sito, e per tutti vale lo stesso discorso: il sito è tanto più efficiente quanto più queste metriche sono basse.

Time to First Byte è il tempo impiegato dal sito per rispondere alla richiesta iniziale del browser, e dà un’idea della reattività del server.

Start Render è il tempo impiegato dalla pagina per iniziare a mostrare elementi visivi e dare un riscontro all’utente.

First Contentful Paint (FCP) registra il tempo in cui il browser visualizza il primo contenuto significativo, cioè un componente che l’utente può effettivamente leggere o con cui può interagire, come un titolo, un paragrafo di testo, un’immagine principale o un elemento di interfaccia utente.

Speed Index valuta quanto velocemente il contenuto di una pagina diventa completo per l’utente a livello visivo.

Largest Contentful Paint (LCP) misura il tempo necessario per renderizzare l’elemento più grande e visibile all’interno della finestra. 

Cumulative Layout Shift (CLS) quantifica la quantità di spostamenti imprevisti del layout della pagina durante il caricamento. Dev’essere più vicino possibile allo zero.

Total Blocking Time (TBT) misura il tempo totale in cui il thread principale è bloccato e non risponde all’input dell’utente, a causa di script o altre attività. Indica quanto tempo una pagina rimane inutilizzabile dopo il caricamento visivo.

Page Weight indica la dimensione complessiva di tutte le risorse scaricate per costruire la pagina – HTML, CSS, JavaScript, immagini, font, ecc.

Come puoi notare in WebPageTest le metriche sono misurate in due momenti diversi. First View simula il primo accesso dell’utente al sito, quando ancora il browser deve caricare tutti gli elementi della pagina. Repeat View simula un accesso successivo con la cache del browser attiva. 

Inoltre accanto alle metriche trovi il Visual Page Loading Process, una funzionalità che ti mostra come avviene il caricamento della pagina web con immagini che catturano i passaggi chiave. 

WebPageTest registra un video durante il test, simulando il caricamento della pagina in un browser reale e genera la filmstrip: una sequenza di immagini a intervalli regolari (di solito ogni 0.1 secondi).

Grazie a questa funzionalità puoi osservare con i tuoi stessi occhi quali elementi appaiono prima – ed eventualmente se alcuni sono pesanti e rallentano la pagina –, e renderti conto di quando l’utente percepisce che la pagina è ‘pronta’.

Puoi approfondire cliccando su Explore e andando alla vista Filmstrip View.

Real-World Usage Metrics

In quest’area della vista Performance Summary, hai i dati relativi all’esperienza utente dei visitatori reali estratti dal report CrUX di Google degli ultimi 28 giorni. 

Ci sono i punteggi per i Core Web Vitals (FCP, LCP, CLS, TTFB, INP) – metriche che servono a definire la velocità di un sito web per poterla migliorare. Per ciascuna un grafico a barra rappresenta in verde la percentuale di persone che hanno avuto una buona esperienza riguardo a quel parametro, in arancione le esperienze accettabili e in rosso quelle negative.

Inoltre WPT ti dice se il dato è migliore o peggiore rispetto ai suoi test e ti rimanda alla sezione successiva per scoprire il perché.

Potresti non vedere la schermata Real-World Usage Metrics: succede quando il traffico del sito non permette di raccogliere abbastanza dati.

Individual Runs

L’ultima sezione della vista Performance Summary contiene una tabella di riepilogo delle singole esecuzioni del test sulla pagina web.

Nella prima riga trovi grafici, immagini e video e link di approfondimento relativi alla prima visita, nella seconda riga quelli relativi alla visita successiva; mentre nella terza riga c’è il Content Breakdown con i grafici a torta di richieste e trasferimento di byte generati da HTML, JavaScript, CSS, image e font.

Vista ‘Opportunities & Experiments’

Nella vista Opportunities & Experiments di WebPageTest trovi il dettaglio delle metriche che ti dicono quanto il tuo sito è veloce, usabile e resiliente.

Is it Quick?

In questa prima sezione trovi una serie di informazioni che ti danno un quadro della velocità del tuo sito e riguardano:

• Time To First Byte;
• Largest Contentful Paint;
• presenza di una CDN;
• lazy load: dov’è già applicato e dove sarebbe meglio attivarlo;
• elementi che bloccano il rendering della pagina, come file JavaScript o CSS esterni;
• eventuali font di terze parti; 
• eventuali caricamenti anticipati (preload) di file inutili;
• eventuali richieste che causano redirect HTTP;
• impostazioni dei font che nascondono il testo durante il caricamento;
• funzionamento della cache;
• dimensione finale dell’HTML (DOM).

Is it Usable?

In questa sezione trovi informazioni relative all’usabilità del sito web, ad esempio sui layout shift, all’accessibilità e alle dimensioni del DOM.

Qui ti viene segnalato se il main thread – processo principale del browser che gestisce il rendering della pagina, gli eventi e l’aggiornamento della visualizzazione – è rallentato da operazioni pesanti, ad esempio l’esecuzione di file JavaScript di grandi dimensioni.

Puoi anche verificare che sia corretta la configurazione del Meta Viewport tag – un tag HTML che controlla come il layout di una pagina web viene visualizzato sui dispositivi mobili.

Is it Resilient? 

WebPageTest ricava le informazioni sulla pagina web contenute nella sezione sulla resilienza con 4 test diagnostici:

• vulnerabilità; 
• risorse caricate su connessioni non sicure;
• dimensioni del DOM;
• richieste di terze parti che bloccano il rendering, ad esempio script pubblicitari, widget social, font di Google Fonts, script di Google Analytics, Hotjar, o servizi di live chat.

L’ultima sezione Create Experiments è premium ma la puoi provare se fai il login. Consiste nella possibilità di testare le ottimizzazioni suggerite in Opportunities e valutare i miglioramenti in efficienza che si possono ottenere, senza bisogno di usare il codice.

Vista Filmstrip

La schermata Filmstrip mostra i dettagli del caricamento e ne evidenzia i momenti chiave:

• Visual change – primo cambiamento visibile nella pagina, che da bianca inizia a mostrare qualche elemento;
• Visual change + Layout Shift – mentre appare qualcosa c’è uno spostamento degli elementi (che dev’essere ridotto al minimo per una migliore esperienza utente);
• Largest Contentful Paint – elemento più grande della pagina caricato;
• Largest Contentful Paint + Layout Shift – cambiamento nella struttura della pagina, ma in corrispondenza del caricamento del contenuto principale.

In questa vista trovi anche una serie di grafici che illustrano il caricamento delle risorse della pagina web nel tempo; altri grafici rappresentano il progresso visivo del caricamento, i layout shift rispetto al tempo, la quantità di richieste e di byte inviata per ciascun tipo di risorsa.

Molto utile il grafico a cascata che mostra come si collocano nel tempo – misurato in millisecondi – una serie di eventi fondamentali da conoscere per valutare l’efficienza della pagina.

Vista Requests Details

Requests Details mostra i dettagli delle richieste, cioè tutti i valori delle metriche in relazione al tempo e i grafici cascata delle richieste per ogni specifica analisi fatta sul sito.

Per questo incontriamo diverse sezioni con nomi già visti in WebPageTest – solo che in questo caso sono riferite al singolo test – e altre che ritroveremo più avanti:

• Page Performance Metrics;
• Real-World Usage Metrics;
• Waterfall View – grafici a cascata; 
• Connection View – tabella che rappresenta le diverse fasi della connessione;
• Request Details – tabella che mostra le richieste HTTP che il browser ha inviato al server durante il caricamento della pagina;
• Request Headers – informazioni aggiuntive che il browser invia al server insieme alla richiesta per specificare dettagli come il tipo di browser, i formati accettati, i cookie e altre configurazioni.

Vista Core Web Vitals

Questa schermata è dedicata alle famose metriche con cui Google misura velocità ed esperienza utente, ma i valori che trovi qui sono quelli rilevati da WebPageTest.

Ci sono sezioni per il Largest Contentful Paint, il Cumulative Layout Shift e il Total Blocking Time; arricchite da grafici e tabelle.

Dai un’occhiata al nostro articolo se vuoi saperne di più sulla correlazione tra Core Web Vitals e ranking.

Vista Performance Optimization Overview

Il report Performance Optimization Overview di WebPageTest è una sorta di pagella della velocità della pagina e al contempo una checklist di suggerimenti per ottimizzarla – che possono essere scaricati in un file. 

Nella sezione Optimization Summary trovi un voto da A ad F associato a un colore: in verde le valutazioni positive e in rosso quelle negative. Gli aspetti considerati sono:

• Security Score – valuta la sicurezza della configurazione HTTPS;
• First Byte Time (TTFB) – già visto, misura la reattività del tuo server;
• Keep-Alive Enabled – indica se il browser può riutilizzare la connessione per più file invece di aprirne una nuova ogni volta;
• Compress Transfer – verifica la compressione dei dati per un trasferimento più rapido;
• Compress Images – controlla la compressione delle immagini, indispensabile per la velocità del sito;
• Progressive JPEGs – valuta se le immagini appaiono in modo progressivo (un voto basso significa che il caricamento avviene a scatti);
• Cache Static Content – indica se i file statici come immagini e CSS sono configurati per essere memorizzati dal browser;
• Effective Use of CDN – verifica l’efficacia della Content Delivery Network sul sito.

Alla fine della pagina trovi i dettagli per ogni aspetto esaminato qui.

Sotto il riepilogo dell’ottimizzazione c’è la Full Optimization Checklist: una tabella che elenca le risorse caricate sul sito e mostra, per ognuna, quali ottimizzazioni sono applicate o mancano, con semafori verdi, rossi e gialli.

Nella tabella, per ogni richiesta viene verificata l’attivazione del Keep-Alive, del caricamento progressivo dei JPEG (anche se sarebbe meglio passare a formati come AVIF o WebP), della cache statica e della CDN; la compressione Gzip per i file testuali e la compressione con appositi strumenti per ottimizzare le immagini.

Vista Content Breakdown

In Content Breakdown WebPageTest ti mostra come sono distribuite le risorse del sito web che sta analizzando, suddivise per tipologia di contenuto. Così ti permette di capire cosa ‘pesa’ di più nella tua pagina.

Nella sezione Breakdown by MIME type abbiamo grafici e tabelle sulla base del MIME, un codice che identifica il formato del file: JavaScript, Font, Image, CSS, altri formati.

Sulla sinistra il grafico a torta Requests mostra quante richieste vengono fatte per i diversi tipi di contenuto, mentre sulla destra abbiamo il grafico analogo Bytes.

Per ciascuno c’è anche una tabella, che mostra i numeri assoluti per tipo di contenuto anziché le percentuali.

Come puoi intuire, questa vista è utile a individuare i punti critici ottimizzabili; un esempio sono eventuali codice JavaScript o font pesanti.

Più giù trovi la sezione Connection View, che spiega quando e come viene scaricato ogni tipo di risorsa, usata la CPU, la banda e il main thread del browser durante il caricamento della pagina nella prima visita dell’utente (First view).

La prima parte di questo grafico-tabella ospita sull’asse verticale la lista delle risorse caricate in ordine cronologico (con i domini e file richiesti) e sull’asse orizzontale il tempo.

Diversi colori rappresentano fasi specifiche del caricamento:

• verde scuro: DNS Lookup (risoluzione del nome dominio);
• arancione: Initial Connection (connessione al server);
• viola: SSL Negotiation (avvio della connessione sicura);
• verde chiaro: Start Render (inizio della visualizzazione dei contenuti);
• viola chiaro: DOM Content Loaded (DOM caricato);
• viola-glicine: On Load (in caricamento);
• blu: Document Complete (documento completo).

Grazie a questi grafici puoi vedere in che ordine vengono scaricate le risorse e quali in contemporanea; se si verificano rallentamenti e quanto dipendono da servizi di terze parti.

Più in basso trovi i grafici temporali relativi a:

• CPU Utilization – utilizzo del processore;
• Bandwidth – uso della banda disponibile;
• Browser Main Thread – attività del thread principale.

Sotto trovi gli stessi grafici riferiti alla visita al sito successiva alla prima (Repeat view).

Domains 

Qui abbiamo sia grafici a torta che tabelle che rappresentano la distribuzione delle risorse della pagina web per dominio, cioè mostrano quante richieste e quanti byte provengono da ciascun dominio coinvolto nel caricamento della pagina. In questo modo puoi visualizzare e misurare la dipendenza da servizi esterni.

Anche in questa vista, i grafici e le tabelle si ripetono per first view e repeat view.

Console Log

La vista Console Log mostra tutti gli errori e gli avvisi che il browser ha registrato durante il caricamento della pagina, aiutandoci a individuare problemi tecnici.

Consiste in una tabella in cui per ognuno di questi elementi abbiamo:

• Source – la fonte da cui proviene il messaggio, come console-api, javascript, network, ecc.;
• Level – il livello di gravità (warning, debug o error);
• Message – il contenuto dell’avviso;
• URL – la pagina o la risorsa che ha generato il messaggio;
• Line: la riga di codice specifica, se disponibile.

Detected Technologies

Qui trovi le tecnologie usate sul sito, grazie all’integrazione di Wappalyzer, un servizio indipendente da WebPageTest. 

Main-thread Processing

La vista Main-thread Processing di WebPageTest esamina l’attività del browser – o meglio del suo canale principale di esecuzione – considerando solo il tempo di attività effettiva e non le attese dovute al server o alla rete (idle time).

La sezione Processing Breakdown ospita l’analisi delle categorie e degli eventi coinvolti nell’elaborazione della pagina web da parte del browser.

Il primo grafico a torta Processing Categories mette in evidenza la ripartizione del tempo impiegato tra le diverse fasi del lavoro:

• Scripting – esecuzione di JavaScript;
• Layout – calcoli di posizionamento e dimensioni;
• Loading – caricamento risorse;
• Painting – rendering grafico;
• Other – altre attività.

Il grafico è seguito da una tabella con i tempi assoluti che sono stati necessari per ciascuna fase durante il test, in millisecondi.

La tabella Processing Events e il relativo grafico mostrano invece il tempo richiesto durante l’elaborazione della pagina dai vari eventi, per esempio EvaluateScript cioè l’esecuzione del codice JS, FunctionCall, cioè chiamate a funzioni JS, Layout cioè il calcolo di posizione e dimensione degli elementi, ecc.

La sezione Timing Breakdown analizza dove viene speso il tempo durante il caricamento della pagina considerando anche il tempo di attesa delle risorse.

Qui trovi due grafici a torta e due tabelle su categorie ed eventi relativi all’attività del main thread del browser, analoghi a quelli visti poco sopra.

Image Analysis

Rimanda a un sito esterno di un tool collegato a WebPageTest ma specifico per le immagini – Cloudinary – che oltre ad analizzarle le ottimizza. In questa vista non trovi solo valutazioni ma anche consigli pratici e miglioramenti attesi.

Scorrendo la pagina si entra nel dettaglio delle singole immagini e delle ottimizzazioni consigliate per ottenere punteggi superiori nel Largest Contentful Paint e metriche correlate.

Request map

La voce Request Map nel menù delle viste di WebPageTest rimanda a un sito esterno che offre la mappa delle connessioni tra i domini coinvolti nel caricamento, cioè rappresenta visivamente dove il browser va a cercare i diversi elementi che compongono la pagina.

Ogni cerchio rappresenta un dominio da cui il tuo sito carica del contenuto. La sua dimensione è proporzionale alla quantità di dati scambiati tra quel dominio e la pagina esaminata.

I colori invece indicano il tipo di risorsa:

• il rosso gli strumenti per sviluppatori;
• il giallo gli elementi di tipo ‘content & publishing’;
• il blu per il dominio principale;
• il fucsia gli elementi di altro tipo o classificabili.

La mappa delle richieste è capace di mettere in luce eventuali dipendenze pesanti da un servizio di terze parti in particolare o da tanti domini esterni, che potrebbero rallentare il caricamento.

Alternative a WebPageTest?

Strumenti simili come Google PageSpeed Insights, GTmetrix o Pingdom Tools possono essere considerati una reale alternativa a WebPageTest?

Se hai letto fin qui avrai intuito che WebPageTest si distingue per il numero e la profondità delle analisi, che generano un gran quantità di dati molto specifici.

Le informazioni sono presentate in forma sia numerica che visiva – attraverso grafici di diversi tipi, video e sequenze di fotogrammi – rendendo più immediata la comprensione di ciò che avviene dietro le quinte del caricamento della pagina, anche per chi ha poche competenze tecniche.

Inoltre WebPageTest spicca per la possibilità di personalizzazione elevata delle condizioni di test che permette di riprodurre condizioni prossime a quelle reali: dalla location geografica al tipo di dispositivo, dalla velocità di connessione al browser specifico utilizzato.

D’altra parte si dice che WPT sia meno intuitivo e meno adatto ai principianti di PageSpeed Insights, GTmetrix e Pingdom. Vediamo perché…

WebPageTest vs Google PageSpeed Insights

Rispetto a WebPageTest, Google PageSpeed Insights ha un approccio più sintetico e diretto alla risoluzione dei problemi. Per iniziare, mostra solo le metriche considerate più importanti dal motore di ricerca per il posizionamento organico, e tutte in un’unica schermata.

Per ogni parametro fornisce un punteggio numerico da 0 a 100 usando anche i colori per mostrare a colpo d’occhio se si tratta di valutazioni positive o negative, e dedica molto spazio alle raccomandazioni ‘su misura’ per l’ottimizzazione della pagina, ordinate per priorità di intervento. 

Come WebPageTest, PageSpeed Insights permette di confrontare le valutazioni basate su dati raccolti da utenti reali – attraverso il report CrUX di Google –, e valutazioni ricavate da test di laboratorio. 

PageSpeed Insights non consente di personalizzare le condizioni delle analisi; d’altra parte però i suoi report sono semplici, rapidi da consultare e adatti anche ai principianti.

Può essere un’alternativa a WebPageTest?

Non esattamente. I due strumenti si completano a vicenda: PageSpeed Insights è utile per una valutazione iniziale ma per diagnosi più specifiche o per l’analisi delle dipendenze esterne e la valutazione dettagliata delle performance in condizioni specifiche bisogna passare a WPT

WebPageTest vs Pingdom Tools

Pingdom offre un’interfaccia utente intuitiva dove puoi ottenere punteggi e numeri relativi alla performance della pagina analizzata, tabelle che illustrano la tipologia di elementi caricati e delle richieste, i domini d’origine dei contenuti; un grafico che mostra l’andamento delle fasi dell’elaborazione da parte del browser. 

Il punto di forza di Pingdom sta nel monitoraggio con reportistica periodica e sistema di alert, che offre accanto ai test puntuali. 

Qui è possibile simulare visite utente da diverse location geografiche – 7 contro le 30 di WPT; non ci sono altre opzioni di personalizzazione.

Può essere un’alternativa a WebPageTest?

No, ma i due strumenti si integrano molto bene: con Pingdom ti assicuri di venire a conoscenza subito di eventuali problemi; e se hai bisogno di un’analisi approfondita per trovare la causa c’è WebPageTest.

WebPageTest vs GTmetrix

GTmetrix combina diversi motori di analisi in un’unica piattaforma, compreso Lighthouse di Google, e metriche proprie, e dà suggerimenti pratici per ottimizzare la pagina.

L’interfaccia è lineare, sintetica e molto visiva; usa sia numeri che colori che grafici e video per comunicare i risultati, organizzati in 7 viste ordinate. 

Offre anche un sistema di monitoraggio e di alert, che però nella versione gratuita è limitato a un solo URL e alla località predefinita.

Tra gli strumenti di valutazione delle performance della pagina web popolari è quello che offre un livello di personalizzazione delle condizioni di test più elevato dopo WebPageTest – relativamente a location, browser e connessione – ma quasi esclusivamente agli utenti premium.

GTmetrix può essere un’alternativa a WebPageTest?

Tra gli strumenti che abbiamo visto, è quello che più si avvicina all’accuratezza e varietà di dati di WPT; nella versione premium offre un buon livello di personalizzazione delle condizioni di test e un utile sistema di monitoraggio. Inoltre permette di generare facilmente report comprensibili a clienti non tecnici. Niente ti impedisce di usarli entrambi a seconda delle esigenze.

Prezzi e piani di WebPageTest

Il piano gratuito Starter Plan che abbiamo esplorato in questa guida a WebPageTest offre 150 ‘test run’ mensili gratuiti e dati disponibili per 60 giorni. I ‘test run’ non corrispondono al numero di test ma al numero di caricamenti della pagina durante il test; di solito ce ne sono fra i 3 e i 5 nel corso di un’unica analisi del sito.

Accanto alla versione gratuita esistono due piani a pagamento: WebPageTest Pro e Expert.

Rispetto al piano gratuito il piano WebPageTest Pro offre 11 location di test premium, e promette di offrirne di più in futuro, un maggior numero di test mensili e uno storico di 13 mesi, e varie funzionalità aggiuntive come:

• priorità nelle code di test
• accesso all’API
• integrazioni, ad esempio con GitHub, Slack
• test privati
• test in blocco (bulk)
• esperimenti No-Code 
• scripted test completo
• supporto dedicato
• nuova funzionalità per il controllo dell’impronta di carbonio. 

Il piano WebPageTest Pro è disponibile in 4 varianti che si differenziano per numero di test mensili a partire da 18.75$ al mese e 180 all’anno per 1000 test mensili, sino a 312.50$ al mese e 3000 all’anno per 20000 test mensili.

Il piano Expert prevede tutti i vantaggi della versione Pro e ulteriori funzionalità:

• New User Experience
• Real User Monitoring (RUM)
• Single Sign On (SSO) 
• Storico di 7 anni
• possibilità di monitorare DNS e CDN e avere BGP Monitoring e Internet Sonar.

Sono ‘in arrivo’ le funzioni: Integrations, Bulk Testing e Custom Metrics.

Il piano Expert parte da 999$ al mese e 11988$ all’anno per 30mila test run mensili.

Conclusioni

In questa guida su WebPageTest abbiamo visto quanti dati sia possibile ricavare con questo strumento per capire su quali aspetti del sito concentrarci se vogliamo velocizzare un sito costruito su WordPress o qualunque altro CMS.

Anche nella versione gratuita WebPageTest ti permette di eseguire 4 tipi di test in modo veloce oppure davvero approfondito e modellato sulla realtà dei tuoi visitatori, e di visualizzarli in 13 diverse viste sotto forma di numeri, immagini, video, grafiche e tabelle.

Tra i software online per analizzare le prestazioni delle pagine web, WebPageTest non ha una vera alternativa, ma se lo integri con Google PageSpeed Insights, Pingdom o GTmetrix puoi costruirti una soluzione davvero completa, anche gratis.

E tu usi già WebPageTest o qualche strumento simile? Come ti trovi? Se vuoi, parliamone nei commenti.