Cos’è WebPageTest e come usarlo per migliorare le performance del sito web

| Web Performance

Cos’è WebPageTest e come usarlo per migliorare le performance del sito web

WebPageTest (portale ufficiale www.webpagetest.org) è un tool per analizzare i tempi di caricamento di un sito web e gli elementi da migliorare. Ma perché è così famoso e ben visto dai professionisti del web?

Forse perché è uno strumento sviluppato da AOL e usato, in principio, per l’uso interno. Poi è stato reso pubblico nel 2008 ed è ancora in fase di sviluppo su GitHub: è uno strumento gratuito ma potente.

Con questo tool puoi avere dei report molto dettagliati che consentono di valutare anche aspetti ignorati da altri tool per monitorare le performance dei siti web. Come, ad esempio, le Pagine Web Light di Google e il monitoraggio attraverso test eseguiti con dispositivi differenti. Quali sono i dettagli da conoscere?

Cos’è WebPageTest e come funziona

È un tool pensato per aiutare webmaster, SEO e professionisti delle web performance a migliorare il tempo di caricamento delle pagine web individuando elementi problematici, colli di bottiglia e altri passaggi.

Devi trovare ciò che aumenta i tempi di caricamento. Per usare questo tool basta andare nella sezione principale e inserire l’indirizzo della risorsa che vuoi analizzare. Decidi la località per il test (dovrebbe essere prossima alla posizione i cui si trovano i tuoi utenti) e il device. A questo punto hai tutti i risultati da analizzare.

webpagetest connessione mobile e location test

Uno degli aspetti fondamentali del tool: puoi scegliere tra un’analisi approfondita con una serie di elementi avanzati in fase di personalizzazione, ma anche per un tracciamento meno dettagliato delle opzioni.

Ma che ti consente comunque di scegliere quale rete ipotizzare per ottenere i risultati. Mostrando, quindi, anche i dati finali delle pagine web con una connessione 4G o 3G (regolare o particolarmente lenta).

Differenza con altri tool di verifica

Rispetto a Pagespeed di Google o Pingdom, con WebPageTest puoi puntare su un’esperienza più dettagliata e non ricevere solo dati sintetici: qui puoi monitorare diversi aspetti del test e ottenere dei numeri specifici.

Da leggere: ottimizzare caricamento del font

Cosa e come misura il WebPageTest

Dopo aver avviato il processo di analisi puoi accedere alla schermata riassuntiva offerta da questo tool avanzato. Ti sembrerà meno intuitiva dei vari Pagespeed Insight e Gtmetrix, ma ti assicuro che qui puoi trovare tante informazioni utili per migliorare i tempi di caricamento delle tue pagine web.

webpagetest.org - risultati speed index e load time

Nella parte superiore della pagina hai i voti per le ottimizzazioni più importanti che si applicano su ogni progetto. In particolar modo hai la presenza o meno del Keep Alive, First Byte Time (back-end processing), compressione delle immagini, cache del browser e Gzip compression. Senza dimenticare l’uso del CDN.

Questi dati sintetici, pensati per dare un primo assaggio dell’analisi, vengono completati con la tabella che dà maggiori informazioni rispetto a passaggi particolarmente tecnici come il first contentful paint e altro ancora:

  • Load Time.
  • First Byte.
  • Start Render.
  • Speed Index.
  • Last Painted Hero.
  • First CPU Idle.

Poi trovi tre test con relativi risultati che comprendono waterfall, screenshot della pagina dopo il caricamento e addirittura il video che mostra come avviene l’upload, indicando il tempo trascorso.

Dopo la verifica del WebPageTest

Concluso il lavoro di studio della pagina web con definizione dei dati da studiare, puoi approfondire con due tool dedicati. Il primo (webspeedtest.cloudinary.com) è quello dedicato all’analisi delle immagini per verificare se stai facendo il massimo – in termini di dimensioni dell’immagine, formato, qualità – per rendere il visual adeguato alle esigenze di un caricamento snello.

Per approfondire: come ottimizzare le immagini

mappa dei nodi richieste sito terze parti

Il secondo, invece, verifica i nodi delle richieste della pagina web per identificare rapidamente gli elementi di terze parti sul tuo sito, da dove provengono i byte e i tempi di caricamento (requestmap.herokuapp.com).

Punti di forza e debolezze del tool

Come avviene per tutti gli strumenti pensati in ottica di ottimizzazione delle pagine web, ci sono elementi che possono determinare vantaggi e svantaggi per chi lavora. Quali sono pro e contro di WebPageTest?

Iniziamo dai vantaggi

Il primo punto a favore per chi decide di sfruttare questo strumento nel lavoro di ottimizzazione delle pagine web: con WebPageTest puoi personalizzare l’analisi e scegliere diversi parametri, una condizione difficile da ottenere da altri strumenti senza un profilo premium (quindi a pagamento). Con WebPageTest puoi decidere:

  • Zona da cui effettuare il test di velocità.
  • Browser per la simulazione della connessione.
  • Tipo di connessione (ad esempio 4G o 3G).
  • Device dal quale navigare durante il test.

Importante per simulare una navigazione ottimizzata, e relativi tempi di caricamento, è la possibilità di impostare una rete mobile reale con relativo operatore telefonico. Inoltre, come già indicato, puoi ottenere filmstrip e video per vedere il browser che renderizza i contenuti della pagina. Perché è importante questa funzione? Lo spiego in questo articolo con i consigli per misurare e migliorare le prestazioni di un sito web.

Con i video puoi confrontare anche il risultato ottenuto da una diversa posizione geografica, ad esempio scegliendo prima di simulare una visita fatta nel luogo più vicino al tuo hosting e poi una dall’altra parte del mondo”.

Punti deboli di WebPageTest

Chiaro, ci sono anche degli aspetti negativi per chi decide di affidarsi solo a questo strumento per monitorare i tempi di caricamento delle pagine web. In realtà parliamo soprattutto di aspetti poco curati e manchevoli e non di note negative. Ad esempio WebPageTest segnala la mancanza di CDN come errore.

Ma se non hai un sito multilingue puoi ignorare questo punto. Inoltre evidenzia anche l’assenza di cache statiche per risorse esterne (Google Analytics, Tag Manager, Iubenda, etc.) che non puoi influenzare direttamente. A parte questo, solo una grafica poco curata e intuitiva può essere vista come un dato negativo.

Link e documenti per approfondire

Tag: Strumenti per il web

Mirko Ciesco

Mirko Ciesco

Web Performer

Sviluppatore web esperto in web performance. Realizza siti web, ottimizza la SEO tecnica e migliora l’usabilità dei siti internet attraverso la web analytics. Collabora con Studio Samo e tiene corsi di web design in Novel Academy a Torino.