Non conoscevate ancora queste due funzioni di WebPagetest - ma dovreste utilizzarle regolarmente

Jan Hornung Aggiornato il 21.10.2020
6 Min.
Confronta i siti web con Webpagetest

Webpagetest.org è probabilmente il miglior strumento gratuito per misurare il tempo di caricamento delle pagine. Perché WebPagetest è molto più potente dei suoi diretti concorrenti. E questo grazie soprattutto a due funzioni: La possibilità di confrontare i siti web e il confronto a lungo termine.

Questo articolo fa parte di una serie per misurare e valutare il 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 la valutazione continua del tempo di caricamento delle pagine.

Ecco perché oggi vi mostrerò

Altre metriche chiave - Indice di velocità, elementi DOM e costi

Oltre ai valori standard - come Start Render, Document Complete, ecc. - Webpagetest vi fornisce anche altri dati chiave utili che vi 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 su una pagina web, che mostra le importanti caratteristiche estese
Esempio di risultato di un test su una pagina web. L'indice di velocità, il numero di elementi DOM e il numero di richieste sono tre indicatori importanti per la performance complessiva del vostro sito.

Elementi DOM: Un elemento DOM è, più o meno, un modulo HTML. Meno il vostro browser ha bisogno di caricare questi blocchi, più snella e veloce sarà la vostra pagina. Pertanto il numero di elementi DOM è solo un'indicazione del tempo di caricamento della pagina. Il numero di elementi del DOM può essere notevolmente ridotto cambiando il Plugins, ma soprattutto il Theme, .

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

Richieste: Questo valore descrive il numero di singole richieste HTTP che il vostro browser deve effettuare al server web. Una richiesta HTTP viene utilizzata per richiedere singoli elementi come file CSS, file JavaScript o immagini. Teoricamente, meno richieste ci sono, meglio è. A proposito, il grafico a cascata del vostro sito ha sempre la migliore panoramica delle richieste HTTP che vengono caricate.

In pratica, tuttavia, il numero effettivo di richieste HTTP non è così importante. Almeno non se il tuo sito è criptato SSL e ospitato su un server con HTTP/2 sta correndo. Questo perché in questo modo è possibile eseguire e caricare più richieste contemporaneamente.

Indice di velocità: Questo indice è calcolato da Webpagetest ed è un indicatore del tempo di caricamento delle pagine percepito. Il valore descrive un valore di un millisecondo - i valori bassi sono quindi migliori di quelli alti - che indica la velocità e l'efficienza con cui viene caricato il contenuto visibile della vostra pagina. In linea di principio, Webpagetest determina l'esperienza dell'utente tramite screenshot del vostro sito e la misura con un valore temporale. Se siete interessati: Webpagetest ha anche un Equazione formulata.

Base di calcolo dell'indice di velocità
L'indice di velocità di Webpagetest viene visualizzato e calcolato come area. Più veloce è il caricamento del contenuto della pagina, più piccola è l'area e quindi l'indice di velocità. Se siete interessati ai dettagli: qui Webpagetest elenca tutte le informazioni sul calcolo dell'indice di velocità.

L'indice di velocità è il più adatto per i confronti. Se una misura di ottimizzazione comporta una riduzione significativa dell'indice, tende ad avere successo e la pagina viene percepita come più veloce. Se il vostro sito ha un indice di velocità significativamente più basso rispetto alla concorrenza, potete presumere che il vostro sito offra ai visitatori un'esperienza di navigazione migliore.

Costo: Questo valore è piuttosto un piacere da avere. Indica quanto è costoso il vostro sito quando viene caricato tramite reti mobili. I dati provengono da whatdoesmysitecost.com e formano un valore medio per tutte le tariffe dei paesi qui elencate. Con questa funzione potete vedere i costi per il caricamento mobile del vostro sito. Ma penso che questo valore non sia realmente rilevante per l'ottimizzazione nella maggior parte dei casi. Per favore, correggetemi se sbaglio.

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

Se si misura il tempo di caricamento della pagina, di solito ci sono due motivi: O avete fatto un cambiamento e volete sapere che effetto ha sul tempo di caricamento o volete confrontare la vostra pagina con altre.

Naturalmente è necessario un valore comparativo per tale dichiarazione. E questo è esattamente ciò che la funzione "confronto visivo"creato". Perché con esso è possibile confrontare direttamente il tempo di caricamento e il comportamento di caricamento di diversi URL.

La funzione di confronto visivo consente di confrontare direttamente i siti web tra loro.
La funzione di confronto si trova direttamente a destra dell'analisi standard di Webpagetest.

Con questa funzione è possibile, ad esempio, eseguire questa funzione:

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

Per il confronto diretto è sufficiente dare un nome alle pagine, inserire gli URL ed eseguire il test con i parametri impostati in precedenza.

A scopo di prova confrontiamo due delle nostre pagine di prodotti tra loroIl risultato consente di confrontare le pagine utilizzando diverse metriche. Il più descrittivo è proprio all'inizio del documento di risultato: The Filmstrip View. Qui potete vedere quando il visitatore percepisce la vostra pagina come completamente caricata (la relativa metrica è chiamata Visivamente Completa).

Il valore di riferimento può anche essere modificato in modo da poter visualizzare anche altre caratteristiche, come Completamente Caricato e Completo del documento.

Risultato, se si confrontano due siti web in Webpagetest
La metrica più descrittiva è presentata all'inizio: La vista della pellicola. È ancora possibile configurarlo tramite le impostazioni in basso a destra. I diagrammi delle cascate possono essere alternati utilizzando il cursore a sinistra sopra i diagrammi.

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

Con queste metriche, è possibile vedere a colpo d'occhio quali delle pagine testate si caricano più velocemente, sono più snelle e offrono un'esperienza migliore per il visitatore.

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

Quando si accede a Webpagetest con il proprio account Google, ogni test viene registrato. Questo vi dà la possibilità di visualizzare e confrontare tutti i test dell'anno scorso.

Confronti a lungo termine in Webpagetest per confrontare diverse versioni di un sito web
La nostra pagina web di prova della storia degli ultimi sette giorni. Ogni volta che si accede con il proprio account Google, i test vengono salvati e possono essere visualizzati in un secondo momento.

Questa panoramica è estremamente pratica grazie a due funzioni: si può accedere ai dati storici del test cliccando sull'URL. Ciò significa che potete vedere i risultati completi di tutti i test dell'anno scorso.

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

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

Il confronto diretto di più pagine è certamente la funzione più potente di Webpagetest. Vi permette di vedere il vostro sito in relazione ai vostri concorrenti, ai modelli di ruolo o ai benchmark del settore. I risultati che si ottengono sono - per le condizioni di webpagetest - anche ben preparati e facili da capire.

L'analisi delle serie temporali consente inoltre di ottenere un quadro completo dello sviluppo del tempo di caricamento delle pagine. In questo modo è possibile vedere esattamente quali misure di ottimizzazione o modifiche hanno influito sulla vostra pagina, il suo tempo di caricamento e l'esperienza dell'utente.

Con queste due funzioni siete in grado di registrare tutte le modifiche rilevanti delle vostre pagine e, cosa ancora più importante, di analizzarle.

Conoscete un'altra utile caratteristica di Webpagetest che abbiamo dimenticato? Allora non vediamo l'ora di sentire il vostro commento!

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.