Queste due funzioni di WebPagetest non le conoscevi ancora - ma dovresti usarle regolarmente

Jan Hornung Ultimo aggiornamento 21.10.2020
6 Min.
Confronta i siti web con Webpagetest

Webpagetest.org è probabilmente il miglior strumento gratuito per misurare il tempo di caricamento della pagina. Perché WebPagetest è incomparabilmente più potente della concorrenza diretta. E questo è principalmente grazie a due funzioni: La capacità di confrontare i siti web e il confronto a lungo termine.

Questo articolo fa parte di una serie sulla misurazione e la valutazione del tempo di caricamento delle vostre pagine web. Negli articoli precedenti abbiamo mostrato:

Oggi vi mostrerò due caratteristiche di Webpagetest che probabilmente non conoscevate ancora. Perché lo strumento è particolarmente adatto per il confronto delle prestazioni e una valutazione continua del tempo di caricamento della tua pagina.

Così oggi vi mostrerò

Altri parametri importanti - Indice di velocità, elementi DOM e costi

Oltre ai valori standard - come Start Render, Document Complete, ecc. - Webpagetest fornisce anche altri utili dati chiave che permettono di valutare l'efficienza del vostro sito. Questi valori sono importanti per poter interpretare correttamente i risultati dello strumento.

Esempio di risultato di un test di una pagina web che mostra i valori importanti delle caratteristiche estese
Esempio di risultato di un test di una pagina web. L'indice di velocità, il numero di elementi DOM e il numero di richieste sono tre indicatori importanti per la performance globale del tuo sito.

Elementi DOM: Un elemento DOM è, grosso modo, un blocco di costruzione HTML. Meno elementi devono essere caricati dal browser, più la pagina è snella e veloce. Tuttavia, il numero di elementi DOM è solo un'indicazione del tempo di caricamento della pagina. Facendo modifiche a Plugins, ma soprattutto a Theme, il numero di elementi DOM può essere notevolmente ridotto.

Estratto dal codice sorgente di un post del blog RAIDBOXES
Ogni elemento del corpo HTML che è racchiuso tra parentesi angolari è un elemento DOM.

Richieste: Questo valore descrive il numero di richieste HTTP individuali che il browser deve fare al server web. Elementi individuali come file CSS, file JavaScript o immagini sono richiesti tramite una richiesta HTTP. Anche qui, in teoria, vale quanto segue: meno richieste ci sono, meglio è. A proposito, il diagramma a cascata della tua pagina ti dà sempre la migliore panoramica delle richieste HTTP che vengono caricate.

In pratica, tuttavia, il numero specifico di richieste HTTP non gioca un ruolo così importante. Almeno non se il tuo sito è criptato SSL e gira su un server con HTTP/2. Perché allora diverse richieste possono essere eseguite e caricate allo stesso tempo.

Indice di velocità: Questo indice è calcolato da Webpagetest ed è un indicatore del tempo di caricamento della pagina percepito. Il valore descrive un valore in millisecondi - valori bassi sono meglio di quelli alti - che indica quanto velocemente ed efficientemente il contenuto visibile della vostra pagina viene caricato. Fondamentalmente, Webpagetest determina l'esperienza dell'utente tramite screenshot della vostra pagina e la misura con un valore temporale. Nel caso foste interessati: Webpagetest ha anche formulato un equazione per questo.

Base di calcolo dell'indice di velocità
L'indice di velocità di Webpagetest viene visualizzato e calcolato come un'area. Più velocemente viene caricato il contenuto della tua pagina, più piccola è l'area e quindi lo Speed Index. Se siete interessati ai dettagli: Webpagetest elenca qui tutte le informazioni sul calcolo dello Speed Index.

Lo Speed Index è il più adatto per i confronti. Se una misura di ottimizzazione porta una riduzione significativa dell'indice, generalmente ha avuto successo e la pagina è percepita come più veloce. Se il tuo sito ha un indice di velocità significativamente inferiore a quello della concorrenza, allora puoi supporre che il tuo sito offre ai visitatori un'esperienza di navigazione migliore.

Costo: Questo valore è più che altro un "nice-to-have". Indica quanto è costosa la tua pagina quando viene caricata attraverso le reti mobili. I dati provengono da whatdoesmysitecost.com ed è un valore medio per tutti i tassi dei paesi qui elencati. Usando questa funzione, puoi dare un'occhiata al costo del caricamento del tuo sito da mobile una volta. Penso che questo valore non sia davvero rilevante per l'ottimizzazione nella maggior parte dei casi. Per favore, correggetemi se mi sbaglio.

La funzione più importante di Webpagetest: Confronta direttamente più siti web

Se misurate il tempo di caricamento della vostra pagina, allora questo di solito ha due ragioni: O hai fatto un cambiamento e vuoi sapere che influenza ha sul tempo di caricamento o vuoi confrontare il tuo sito con altri.

Naturalmente, avete bisogno di un valore di confronto per una tale affermazione. Ed è proprio per questo che è stata creata la funzione"Visual Comparison". Perché con esso è possibile confrontare direttamente il tempo di caricamento e il comportamento di caricamento di diversi URL.

La funzione Visual Comparison permette di confrontare i siti web direttamente tra loro.
Troverete la funzione di confronto direttamente a destra dell'analisi standard di Webpagetest.

Con questa funzione è possibile per esempio:

  • confrontare le proprie pagine con quelle della concorrenza
  • controllare cosa ha portato il cambio di hoster
  • testare due o più sottopagine l'una contro l'altra
  • controllare la velocità di caricamento delle sottopagine rispetto alla pagina iniziale

Per il confronto diretto devi solo nominare le pagine, inserire gli URL ed eseguire il test con i parametri precedentemente impostati.

A scopo di test, confrontiamo due delle nostre pagine di prodotto tra loro. Il risultato permette di confrontare le pagine utilizzando diverse metriche. La più descrittiva si trova proprio all'inizio del documento dei risultati: la vista filmstrip. Qui puoi vedere quando il visitatore percepisce che la tua pagina ha finito di caricarsi (la metrica pertinente si chiama Visually Complete).

Il valore di riferimento può anche essere cambiato in modo che altri valori caratteristici, come Fully Loaded e Document Complete, possano essere visualizzati.

Risultato, se si confrontano due siti web in Webpagetest
La metrica più descrittiva è presentata proprio all'inizio: Il punto di vista di Filmstrip. Puoi ancora configurarlo tramite le impostazioni in basso a destra. I diagrammi a cascata possono essere commutati avanti e indietro tramite il cursore a sinistra sopra i diagrammi.

Qui sotto troverete quattro grafici a barre che vi mostrano come le pagine testate si comportano in termini di tempo di carico percepito, i punti di tempo di carico più importanti, il numero di richieste HTTP e la dimensione della pagina.

Con queste metriche, si può vedere a colpo d'occhio quale delle pagine testate si carica più velocemente, è più snella, e fornisce una migliore esperienza per il visitatore.

Per gli utenti di Google Webpagetest offre anche la possibilità di confronti a lungo termine

Se accedi a Webpagetest con il tuo account Google, allora i singoli test sono registrati. Questo ti dà la possibilità di visualizzare tutti i test dell'anno passato e di confrontarli tra loro.

Confronti a lungo termine in Webpagetest per confrontare diverse versioni di un sito web
La storia dei test della nostra pagina web negli ultimi sette giorni. Ogni volta che accedi con il tuo account Google, i tuoi test vengono salvati e possono essere visualizzati in seguito.

Questa panoramica è estremamente pratica per due funzioni: è possibile richiamare i dati storici dei test cliccando sull'URL. Questo significa che puoi vedere i risultati completi di tutti i test dell'anno passato.

E puoi contrassegnare i singoli test e confrontarli tra loro per avere una rapida panoramica dello sviluppo delle tue pagine.

Conclusione: Webpagetest è molto più potente di altri strumenti gratuiti

Il confronto diretto di diverse pagine è certamente la funzione più potente di Webpagetest. Ti permette di visualizzare il tuo sito in relazione alla concorrenza, ai modelli di ruolo o ai benchmark del settore. I risultati che si ottengono sono - per gli standard di webpagetest - anche ben preparati e facili da capire.

L'analisi delle serie temporali permette anche di avere un quadro completo dell'evoluzione del tempo di caricamento della pagina. Così puoi vedere esattamente quali misure di ottimizzazione o modifiche hanno influenzato la tua pagina, il suo tempo di caricamento e l'esperienza dell'utente.

Con queste due caratteristiche, siete in grado di catturare e, cosa più importante, analizzare tutte le modifiche rilevanti alle vostre pagine.

Sai un'altra utile funzione di Webpagetest che abbiamo dimenticato? Allora aspettiamo il tuo commento!

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.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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