La velocità di un sito web può essere un fattore critico per il suo successo. Come discusso nella nostra guida sulla rete di consegna dei contenuti, i siti web che si caricano più velocemente possono beneficiare di classifiche SEO più alte, tassi di conversione più elevati, tassi di rimbalzo più bassi, maggiore durata dei visitatori sul sito, migliore esperienza utente complessiva e coinvolgimento. Questo è il motivo per cui è importante approfittare dei molti strumenti gratuiti di test di velocità del sito web disponibili là fuori in modo da poter ottenere prestazioni ottimali. Google vuole che il tuo sito si carichi in meno di un secondo.
- Cosa può aiutarti ad analizzare un test di velocità per siti web?
- Website speed concepts
- Time to first byte (TTFB)
- Render-blocking JavaScript e CSS
- JavaScript
- CSS
- Minification of resources
- Richieste HTTP
- Lista di strumenti per testare la velocità del sito web
- KeyCDN Website Speed Test
- Google PageSpeed Insights
- Pingdom Speed Test
- GTmetrix
- WebPageTest
- Varvy PageSpeed Optimization
- Uptrends
- dotcom-monitor
- PageScoring
- Yellow Lab Tools
- Google Chrome DevTools
- Sucuri Load Time Tester
- Pagelocity
- YSlow
- PerfTool
- Website speed test with Chrome extensions
- Mobile website speed test
- Sommario
Cosa può aiutarti ad analizzare un test di velocità per siti web?
Questi sono solo alcuni dei modi comuni in cui vengono utilizzati gli strumenti di test di velocità dei siti web:
- Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
- Checking minification of your scripts
- Finding large images resulting in bottlenecks
- Determining if you have render-blocking JavaScript or CSS
- Testing Time to First Byte (TTFB)
- Analyzing total load times, page sizes, and # of requests
- Checking performance from different geographical locations
- Checking rendering speed in different browsers
- Analyzing HTTP Headers
- Measuring performance of your content delivery network
- Verifying that assets are loading correctly from your CDN
Website speed concepts
Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly. Non solo puoi testare la velocità del tuo web host, ma puoi anche misurare le prestazioni del tuo CDN.
Time to first byte (TTFB)
Time to first byte (TTFB) è la misura della reattività di un web server. Fondamentalmente è il tempo che impiega il vostro browser per iniziare a ricevere informazioni dopo averle richieste al server. Usando una CDN puoi ridurre drasticamente l’impatto del carico sul tuo server di origine, che a sua volta dovrebbe aiutare a diminuire il tuo TTFB.
Leggi di più su time to first byte e time to last byte.
Render-blocking JavaScript e CSS
Render-blocking si riferisce a JavaScript e CSS che impediscono alla tua pagina di caricarsi velocemente come potrebbe.
JavaScript
Google raccomanda di rimuovere o rinviare JavaScript che interferisce con il caricamento del contenuto above the fold delle tue pagine web. Here is a great tutorial on how to properly defer JavaScript loading.
Example of deferring JavaScript by placing it just before your </body>
tag.
function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element);}if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;
CSS
You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:
- Properly call your CSS files
- Lessen the amount of CSS files
- Use less CSS overall
Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.
CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!
Minification of resources
Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:
- Caratteri degli spazi bianchi
- Caratteri delle nuove linee
- Delimitatori di blocco
Questo accelera i tuoi tempi di caricamento perché riduce la quantità di codice che deve essere richiesto al server. Potete usare uno strumento come Dan’s CSS and JavaScript Minify per rimuovere tutti i caratteri non necessari. O se stai usando WordPress puoi usare un plugin come Autoptimize, che minificherà tutto il tuo HTML, JavaScript e CSS per te.
Richieste HTTP
Quando il tuo browser recupera dati da un server lo fa usando HTTP (Hypertext Transfer Protocol). È una richiesta/risposta tra un client e un host. In generale, più richieste HTTP fa la tua pagina web, più lento sarà il suo caricamento.
Ci sono molti modi per ridurre il numero di richieste come:
- Combinando i tuoi file CSS e JavaScript
- Inlinea il tuo JavaScript (solo se è molto piccolo)
- Utilizzando gli sprite CSS
- Riducendo le risorse come i plugin di terze parti che fanno un gran numero di richieste esterne
Lista di strumenti per testare la velocità del sito web
Ora che hai una comprensione di base dei concetti di prestazioni web di cui sopra, controlla questi 15 strumenti gratuiti qui sotto per testare la velocità del tuo sito. Ognuno di loro offre le proprie caratteristiche uniche, la segnalazione e diversi modi per analizzare i risultati.
È anche importante rendersi conto che quando si eseguono strumenti come questi, una prima volta la ricerca DNS sarà di solito più lenta. Se si stanno confrontando i tempi di carico totali, a volte è meglio eseguire i test più volte e fare una media dei risultati.
KeyCDN Website Speed Test
KeyCDN ha costruito uno strumento veloce e leggero di Website Speed Test che è possibile utilizzare per ottenere informazioni dettagliate su come il tuo sito web si comporta. Se offre 14 località tra cui scegliere in tutto il mondo, e si ha la possibilità di rendere i risultati del test privati o pubblici. Il test include una ripartizione a cascata e un’anteprima visiva del sito web nella parte inferiore. Si può vedere rapidamente quante richieste HTTP sono state fatte, la dimensione completa della pagina richiesta e il tempo di caricamento.
È anche uno degli unici strumenti oltre a PageSpeed che è reattivo e funziona alla grande sui dispositivi mobili.
Google PageSpeed Insights
Google PageSpeed Insights è uno strumento di test della velocità del sito web che valuta il tuo sito su una scala da 1 a 100. Più alto è il numero più il tuo sito è ottimizzato. Qualsiasi cifra superiore a 85 indica che il tuo sito web sta funzionando bene. PageSpeed ti dà rapporti sia per la versione desktop che per quella mobile del tuo sito. È possibile visualizzare le raccomandazioni per i miglioramenti come la necessità di minificare il CSS o ottimizzare le immagini.
PageSpeed Insights misura come la pagina può migliorare le sue prestazioni su:
- Tempo di caricamento above-the-fold: Tempo trascorso dal momento in cui un utente richiede una nuova pagina e al momento in cui il contenuto above-the-fold viene reso dal browser.
- Tempo di caricamento della pagina completa: Tempo trascorso dal momento in cui un utente richiede una nuova pagina al momento in cui la pagina è completamente resa dal browser.
Un rapporto mobile include una categoria extra chiamata “User Experience” che è inclusa nel punteggio del tuo sito. Questo include il controllo della configurazione della vostra viewport, la dimensione dei vostri tap target (pulsanti e link), e anche le dimensioni dei caratteri ammissibili.
Il team di PageSpeed Insights ha anche recentemente lanciato un nuovo strumento di test di velocità del sito web su think with Google che si potrebbe voler controllare. Una bella caratteristica sono i bei rapporti che genera. Può essere ottimo per l’invio ai clienti.
Pingdom Speed Test
Pingdom è probabilmente uno dei più noti strumenti di test di velocità per siti web. I loro rapporti sono divisi in quattro diverse sezioni che includono una ripartizione a cascata, il grado di performance, l’analisi della pagina e la storia.
L’analisi della pagina offre una grande panoramica con informazioni aggiuntive come l’analisi delle dimensioni, le dimensioni per dominio (è possibile confrontare facilmente le dimensioni del vostro asset CDN rispetto al vostro dominio), il numero di richieste per dominio e quale tipo di contenuto ha avuto più richieste.
Lo strumento di test di velocità di Pingdom ti permette anche di testare la velocità del tuo sito web da quattro località principali, tra cui:
- Dallas, Texas, USA,
- Melbourne, Australia
- San Jose, California, USA
- Stockholm, Svezia
I risultati di un test di velocità di Pingdom ti forniscono informazioni sulle prestazioni, simili a Google PagesSpeed Insights, che delineano dove puoi fare miglioramenti. I risultati scompaiono anche la dimensione della pagina per tipo di contenuto, la dimensione della pagina per dominio, le richieste per tipo di contenuto e le richieste per dominio.
GTmetrix
GTmetrix entra in grande dettaglio controllando sia PageSpeed che le metriche YSlow, assegnando al vostro sito un voto da F ad A. I suoi rapporti sono divisi in cinque diverse sezioni tra cui PageSpeed, YSlow, ripartizione a cascata, video e storia.
Con una registrazione gratuita, è possibile testare da sette luoghi diversi. Ti permettono anche di scegliere il browser, Chrome o Firefox. È possibile testare e confrontare le prestazioni del sito web con vari tipi di connessione (come cavo vs dial-up) per vedere come influisce sul caricamento delle pagine. Altre caratteristiche avanzate includono una riproduzione video per analizzare dove si verifica il collo di bottiglia e anche la possibilità di eseguire Adblock plus. Con gli annunci disabilitati puoi vedere come influenzano il caricamento del tuo sito. Si consiglia di fare un account gratuito in quanto si otterranno opzioni aggiuntive, come quelle di cui sopra.
WebPageTest
WebPageTest è molto simile ad alcuni dei precedenti strumenti menzionati ma ha oltre 40 posizioni tra cui scegliere e oltre 25 browser (incluso quello mobile). Vi assegna un voto da F a A in base a diversi test di performance come FTTB, compressione, caching, uso efficace di un CDN, ecc. Il suo rapporto è diviso in sei sezioni che includono un riassunto, i dettagli, la revisione delle prestazioni, la ripartizione dei contenuti e gli screenshot.
Offre anche un approccio unico al test. Esegue ciò che chiamano una prima vista e una vista ripetuta. Questo aiuta a diagnosticare quello che può essere un ritardo nella ricerca del DNS per la prima volta, come menzionato prima. WebPageTest ha anche caratteristiche più avanzate come la cattura di video, la disabilitazione di JavaScript, l’ignoranza dei certificati SSL e lo spoofing delle stringhe dell’agente utente.
Varvy PageSpeed Optimization
Varvy PageSpeed Optimization è uno strumento sviluppato e gestito da Patrick Sexton, che ha anche creato GetListed.org, che ora è conosciuto come Moz Local.
I rapporti sono suddivisi in 5 sezioni diverse, tra cui un diagramma delle risorse, la consegna dei CSS, l’utilizzo di JavaScript, i problemi di velocità della pagina trovati e i servizi utilizzati. Questo strumento utilizza più di una rappresentazione grafica di ciò che potrebbe essere corretto sul tuo sito, come il blocco del rendering.
Patrick fa un ottimo lavoro includendo anche la documentazione su come ottimizzare ulteriormente il tuo sito con tutorial sul percorso di rendering critico, sfruttando il caching del browser, il caricamento differito di JavaScript e molto altro.
Uptrends
Uptrends è piuttosto semplice ma offre oltre 35 posizioni tra cui scegliere quando si esegue il test di velocità. Il loro rapporto è suddiviso in due sezioni, una ripartizione a cascata e gruppi di domini. I gruppi di domini offrono una prospettiva unica in quanto categorizza le risorse in diverse fonti: 1a parte, statistiche, CDN, social, annunci, prima parte in generale, e terza parte in generale.
dotcom-monitor
dotcom-monitor offre 23 luoghi diversi e sette browser diversi in cui è possibile eseguire il test di velocità del sito web. La loro caratteristica unica è che è possibile eseguire tutti i test geografici contemporaneamente. Questo può farvi risparmiare un sacco di tempo, come ogni altro strumento è necessario eseguirli singolarmente per località. Puoi poi cliccare su ogni singolo rapporto e sulla ripartizione a cascata.
I loro rapporti sono divisi in cinque sezioni diverse che includono un riassunto, le prestazioni, il grafico a cascata (ripartizione), l’host e gli errori.
PageScoring
PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:
- Domain lookups
- Connection Time
- Redirection Time
- Page Size
- Download Time
You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.
Yellow Lab Tools
Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.
- Page weight
- Requests
- DOM
- Bad JavaScript
- Bad CSS
- Server Config
The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.
Google Chrome DevTools
And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.
- Windows:
F12
or alsoCtrl + Shift + I
- Mac:
Cmd + Opt + I
Con l’ultimo aggiornamento degli strumenti di sviluppo, hanno aggiunto un pannello di dettagli aggregati nella timeline della cascata. Questo vi permette di vedere più facilmente cosa vi sta costando più tempo, e potete poi suddividerlo per domini, sottodomini, ecc. Per eseguire questo clic nel pannello “Timeline” e premere Ctrl + R
Cmd + R
) per aggiornare la pagina. Potete quindi cliccare nel pannello “Riepilogo” e nel pannello dei dettagli “Aggregati”.
Abbiamo anche un ottimo post su cosa sta bloccando il DOM e come risolverlo. Negli strumenti per sviluppatori, potete vedere esattamente il tempo di DOMContentLoaded e il tempo di caricamento totale. Per eseguire questo clic nel pannello “Network”, clicca sull’opzione “Show Overview” e premi Ctrl + R
Cmd + R
) per aggiornare la pagina. Una linea blu apparirà per DOMContentLoaded e una linea rossa per il tempo totale di caricamento. Normalmente tutto ciò che è a sinistra o che tocca la linea blu sono risorse che stanno bloccando il DOM, o anche dette risorse che bloccano il rendering.
Sucuri Load Time Tester
Il Sucuri Load Time Tester fornisce un modo semplice e veloce per testare le prestazioni dei vostri siti da tutto il mondo. Vi darà un voto di performance globale, da una A a una F. Il test misura quanto tempo ci vuole per connettersi al vostro sito e per caricare completamente una pagina. Un valore molto importante a cui prestare attenzione è il “tempo al primo byte”, che ti dà quanto tempo ci è voluto perché il contenuto fosse rimandato al browser per iniziare ad elaborare la pagina.
Pagelocity
Lo strumento Pagelocity offre un altro approccio unico quando si tratta di un test di velocità del sito. Ti dà un punteggio totale su 100, composto da fattori come social, SEO, risorse e codice. Lo strumento offre anche la possibilità di monitorare i vostri concorrenti. È possibile registrarsi per un account gratuito per beneficiare delle caratteristiche aggiuntive. La vista del codice è particolarmente unica in quanto vi mostrerà se il vostro sito è in esecuzione su HTTPS, qual è il vostro TTFB, e un’interfaccia grafica dei vostri elementi DOM con un grafico a barre.
La vista delle risorse è anche abbastanza interessante in quanto è possibile vedere rapidamente quali risorse stanno facendo il peso totale della pagina. Come potete vedere nel nostro test le immagini sono più di 4x rispetto ai nostri script esterni.
YSlow
YSlow è un progetto e uno strumento open source che analizza le pagine web e ti aiuta a capire perché sono lente in base alle regole di Yahoo! Attualmente è mantenuto da Marcel Duran, che è anche coinvolto nel progetto WebPageTest. YSlow opera in tre fasi per ottenere i suoi risultati di test delle prestazioni:
- YSlow striscia il DOM per trovare tutti i componenti (immagini, script, ecc.).
- YSlow ottiene informazioni sulle dimensioni di ogni componente (Gzip, scade le intestazioni, ecc.)
- YSlow prende i dati e genera un voto per ogni regola, che a sua volta ti dà un voto complessivo.
YSlow ha 23 regole diverse con cui esegue il tuo sito web per valutarlo, come l’utilizzo di un CDN e la riduzione delle ricerche DNS. GTmetrix offre uno strumento di analisi online per controllare il tuo punteggio YSlow. Assicurati di controllare il nostro tutorial approfondito su come migliorare il tuo punteggio YSlow.
PerfTool
PerfTool è un progetto open source di strumento di performance lato client, ospitato su GitHub. Raccoglie varie informazioni sul vostro sito web e le visualizza in modo facile da digerire su una pagina di report. Combina tre fonti di dati in una, PageSpeed Insights, devperf e W3CJS. In totale ti dà oltre 200 diversi indicatori di performance.
Un grande vantaggio di PerfTool è che puoi eseguire più test di pagine allo stesso tempo per il report di Google PageSpeed Insights. Poi, confrontare i risultati delle prestazioni del sito web dai test precedenti, impostare la soglia di punteggio e ottenere un rapporto dettagliato sui vostri test. This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.
Website speed test with Chrome extensions
There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.
- Page Load Time
- app.telemetry Page Speed Monitor
- Performance-Analyser
- LoadFocus Load Testing
Mobile website speed test
If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:
- WebPageTest
- GTmetrix
- dotcom-monitor
Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. Per entrare in modalità dispositivo clicca sulla piccola icona del telefono in Chrome DevTools o puoi premere Ctrl + Shift + M
Cmd + Shift + M
). Potete quindi scegliere quale dispositivo volete emulare, l’orientamento e persino la risoluzione. Si può anche cambiare lo strozzamento della rete per vedere come il vostro sito web renderebbe su una normale connessione 2G o 4G.
Si può quindi utilizzare la scheda “Rete” e la ripartizione a cascata per eseguire i test di velocità.
Sommario
Come si può vedere ci sono un certo numero di strumenti di test di velocità del sito web tra cui scegliere. Ognuno di loro ha le proprie caratteristiche uniche come evidenziato sopra. È una buona idea testare regolarmente il tuo sito e stabilire un punto di riferimento in modo da poter apportare miglioramenti nel tempo.
Una volta che sai dove sono i colli di bottiglia puoi iniziare a risolverli. Quasi tutti gli strumenti di cui sopra elencano raccomandazioni. Some of the most common fixes include:
- Compressing your images and files
- Picking a fast web host
- Optimizing your code and scripts
- Using a content delivery network
- Caching
- Reducing the number of HTTP requests