De snelheid van een website kan een kritieke factor zijn voor het succes ervan. Zoals besproken in onze content delivery network-gids, kunnen websites die sneller laden profiteren van hogere SEO-ranglijsten, hogere conversieratio’s, lagere bouncepercentages, langere verblijfsduur van bezoekers op de site, een betere algehele gebruikerservaring en meer betrokkenheid. Daarom is het belangrijk om te profiteren van de vele gratis website snelheid testtools beschikbaar die er zijn, zodat u kunt bereiken optimale prestaties. Google wil dat uw site in minder dan een seconde wordt geladen.
- Wat kan een website snelheidstest u helpen analyseren?
- Website speed concepts
- Time to first byte (TTFB)
- Render-blokkerende JavaScript en CSS
- JavaScript
- CSS
- Minification of resources
- HTTP requests
- Lijst van website snelheidstest tools
- 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
- Samenvatting
Wat kan een website snelheidstest u helpen analyseren?
Hier zijn slechts een paar van de veel voorkomende manieren waarop websites snelheid test tools worden gebruikt:
- 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. Niet alleen kunt u de snelheid van uw webhost testen, maar u kunt ook de prestaties van uw CDN meten.
Time to first byte (TTFB)
Time to first byte (TTFB) is de meting van de responsiviteit van een webserver. In principe is het de tijd die uw browser nodig heeft om informatie te ontvangen nadat hij die van de server heeft opgevraagd. Door gebruik te maken van een CDN kunt u de belasting van uw origin server drastisch verminderen, wat op zijn beurt uw TTFB zou moeten helpen verminderen.
Lees meer over de tijd tot de eerste byte en de tijd tot de laatste byte.
Render-blokkerende JavaScript en CSS
Render-blokkering verwijst naar JavaScript en CSS die ervoor zorgen dat uw pagina niet zo snel laadt als mogelijk is.
JavaScript
Google raadt aan JavaScript te verwijderen of uit te stellen dat het laden van de inhoud van uw webpagina’s boven de vouw in de weg staat. 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:
- Witte spaties
- Nieuwe regeltekens
- Blokbegrenzers
Dit versnelt je laadtijden omdat het de hoeveelheid code vermindert die van de server moet worden opgevraagd. U kunt een programma als Dan’s CSS en JavaScript Minify gebruiken om alle overbodige tekens te verwijderen. Of als u WordPress gebruikt, kunt u een plugin als Autoptimize gebruiken, die al uw HTML, JavaScript en CSS voor u minimaliseert.
HTTP requests
Wanneer uw browser gegevens van een server ophaalt, doet hij dat met HTTP (Hypertext Transfer Protocol). Het is een request/response tussen een client en een host. In het algemeen geldt: hoe meer HTTP-verzoeken uw webpagina doet, hoe langzamer hij laadt.
Er zijn veel manieren waarop u het aantal verzoeken kunt verminderen, zoals:
- Het combineren van je CSS en JavaScript bestanden
- Inline je JavaScript (alleen als het erg klein is)
- Het gebruik van CSS Sprites
- Het verminderen van assets zoals plugins van derden die een groot aantal externe verzoeken doen
Lijst van website snelheidstest tools
Nu je een basisbegrip hebt van de web performance concepten hierboven, bekijk dan deze 15 gratis tools hieronder om de snelheid van je website te testen. Elk van hen biedt hun eigen unieke functies, rapportage, en verschillende manieren om uw resultaten te ontleden.
Het is ook belangrijk om te beseffen bij het uitvoeren van tools als deze dat een eerste keer DNS lookup meestal langzamer zal zijn. Als u totale laadtijden vergelijkt is het soms beter om tests meerdere keren uit te voeren en een gemiddelde van de resultaten te nemen.
KeyCDN Website Speed Test
KeyCDN bouwde een snelle en lichtgewicht Website Speed Test tool die u kunt gebruiken om gedetailleerde inzichten te krijgen over hoe uw website presteert. Als biedt 14 locaties om uit te kiezen over de hele wereld, en je hebt de optie om je testresultaten privé of openbaar te maken. De test bevat een waterval uitsplitsing en een visuele website preview aan de onderkant. U kunt snel zien hoeveel HTTP-verzoeken werden gedaan, de volledige grootte van de gevraagde pagina, en de laadtijd.
Het is ook een van de weinige tools naast PageSpeed die is responsive en werkt geweldig op mobiele apparaten.
Google PageSpeed Insights
Google PageSpeed Insights is een tool voor het testen van de snelheid van websites die uw website een cijfer geeft op een schaal van 1 – 100. Hoe hoger het cijfer, des te beter uw website is geoptimaliseerd. Hoe hoger het cijfer, hoe beter uw site is geoptimaliseerd. Alles boven een 85 geeft aan dat uw website goed presteert. PageSpeed geeft u rapporten voor zowel de desktop- als de mobiele versies van uw site. U kunt aanbevelingen voor verbeteringen bekijken, zoals de noodzaak om CSS te minificeren of uw afbeeldingen te optimaliseren.
PageSpeed Insights meet hoe de pagina zijn prestaties kan verbeteren op:
- Tijd tot boven-de-vouw laden: Verstreken tijd vanaf het moment dat een gebruiker een nieuwe pagina opvraagt tot het moment dat de inhoud boven de vouw door de browser wordt weergegeven.
- Tijd tot volledige pagina is geladen: Verstreken tijd vanaf het moment dat een gebruiker een nieuwe pagina opvraagt tot het moment dat de pagina volledig door de browser wordt gerenderd.
Een mobiel rapport bevat een extra categorie genaamd “User Experience” die wordt meegenomen in de scoring van uw site. Dit omvat het controleren van uw viewport-configuratie, de grootte van uw tikdoelen (knoppen en links), en ook de lettergrootte die in aanmerking komt.
Het PageSpeed Insights-team heeft onlangs ook een nieuwe website-snelheidstesttool gelanceerd in samenwerking met Google, die u wellicht wilt bekijken. Een leuke functie is de mooie rapporten die het genereert.
Pingdom Speed Test
Pingdom is waarschijnlijk een van de bekendere website speed test tools. Hun rapporten zijn onderverdeeld in vier verschillende secties, waaronder een uitsplitsing naar waterval, prestatiecijfer, pagina-analyse en geschiedenis.
De pagina-analyse biedt een goed overzicht met aanvullende informatie zoals een analyse van de grootte, de grootte per domein (je kunt de grootte van je CDN-activa eenvoudig vergelijken met die van je domein), het aantal verzoeken per domein, en welk type inhoud de meeste verzoeken kreeg.
Met de snelheidstest van Pingdom kunt u ook de snelheid van uw website testen vanaf vier belangrijke locaties, waaronder:
- Dallas, Texas, USA,
- Melbourne, Australië
- San Jose, California, USA
- Stockholm, Zweden
De resultaten van een Pingdom snelheidstest geven u inzicht in de prestaties, vergelijkbaar met Google PagesSpeed Insights, waarin wordt aangegeven waar u verbeteringen kunt aanbrengen. De resultaten splitsen ook de paginagrootte uit naar inhoudstype, paginagrootte naar domein, verzoeken naar inhoudstype en verzoeken naar domein.
GTmetrix
GTmetrix gaat zeer gedetailleerd te werk bij het controleren van zowel PageSpeed- als YSlow-metriek en kent uw site een cijfer toe van F tot A. De rapporten zijn verdeeld in vijf verschillende secties, waaronder PageSpeed, YSlow, watervaluitsplitsing, video en geschiedenis.
Met een gratis registratie kunt u testen vanaf zeven verschillende locaties. Ze laten u ook de browser kiezen, Chrome vs Firefox. U kunt testen en vergelijken website prestaties tegen verschillende verbindingstypen (zoals kabel vs dial-up) om te zien wat het effect op uw pagina ladingen. Andere geavanceerde functies zijn het afspelen van video’s om te analyseren waar het knelpunt zich voordoet en de mogelijkheid om Adblock plus te gebruiken. Met uitgeschakelde advertenties kunt u zien hoe ze het laden van uw site beïnvloeden. Het is aan te raden een gratis account aan te maken, omdat u dan extra opties krijgt, zoals hierboven genoemd.
WebPageTest
WebPageTest lijkt erg op sommige van de eerder genoemde tools, maar heeft meer dan 40 locaties om uit te kiezen en meer dan 25 browsers (inclusief mobiel). Het geeft je een cijfer van F tot A op basis van verschillende prestatietests zoals FTTB, compressie, caching, effectief gebruik van een CDN, enz. Het rapport is verdeeld in zes secties, waaronder een samenvatting, details, prestatiebeoordeling, uitsplitsing van de inhoud, en screenshots.
Het biedt ook een unieke benadering van de test. Het loopt wat zij noemen een eerste weergave en een herhaalde weergave. Dit helpt bij het diagnosticeren van wat een DNS lookup vertraging kan zijn, zoals eerder genoemd. WebPageTest heeft ook meer geavanceerde functies, zoals video-opname, het uitschakelen van JavaScript, het negeren van SSL-certificaten, en het spoofen van user-agent strings.
Varvy PageSpeed Optimization
Varvy PageSpeed Optimization is een hulpprogramma dat is ontwikkeld en wordt onderhouden door Patrick Sexton, die ook aan de wieg stond van GetListed.org oprichtte, dat nu bekend staat als Moz Local.
De rapporten zijn onderverdeeld in 5 verschillende secties, waaronder een hulpbrondiagram, CSS-levering, JavaScript-gebruik, gevonden paginasnelheidsproblemen en gebruikte services. Deze tool maakt meer gebruik van een grafische weergave van wat er kan worden verholpen op uw site, zoals render blocking.
Patrick doet een geweldige job van het opnemen van ook documentatie over hoe u uw site verder te optimaliseren met tutorials over kritische render pad, gebruik te maken van browser caching, uitstellen laden JavaScript, en nog veel meer.
Uptrends
Uptrends is vrij eenvoudig, maar ze bieden wel meer dan 35 locaties om uit te kiezen bij het uitvoeren van je snelheidstest. Hun rapport is opgedeeld in twee secties, een waterval uitsplitsing en domein groepen. De domein groepen biedt een uniek perspectief omdat het de bronnen categoriseert in verschillende bronnen: 1e partij, statistieken, CDN, sociaal, advertenties, eerste partij algemeen, en derde partij algemeen.
dotcom-monitor
dotcom-monitor biedt 23 verschillende locaties en zeven verschillende browsers waarin u uw website-snelheidstest kunt uitvoeren. Hun unieke eigenschap is dat je alle geografische tests tegelijkertijd kunt uitvoeren. Dit kan u veel tijd besparen, aangezien u bij elke andere tool deze afzonderlijk per locatie moet uitvoeren. Je kunt dan in elk individueel rapport en of waterval uitsplitsing klikken.
Hun rapporten zijn verdeeld in vijf verschillende secties die een samenvatting, prestaties, waterval grafiek (uitsplitsing), host, en fouten omvatten.
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
Met de laatste developer tools update, hebben ze een geaggregeerd detail paneel toegevoegd aan de waterval tijdlijn. Hiermee kun je eenvoudiger zien wat je de meeste tijd kost, en je kunt het vervolgens uitsplitsen naar domeinen, subdomeinen, etc. Om dit uit te voeren klikt u in het “Tijdlijn” paneel en drukt u op Ctrl + R
Cmd + R
) om de pagina te verversen. U kunt dan in het paneel “Samenvatting” en het detailpaneel “Geaggregeerd” klikken.
We hebben ook een geweldige post over wat de DOM blokkeert en hoe u dit kunt oplossen. In de ontwikkelaarstools kunt u precies de tijd van DOMContentLoaded en de totale laadtijd zien. Om dit uit te voeren klik in het “Netwerk” paneel, klik op de “Toon Overzicht” optie en druk op Ctrl + R
Cmd + R
) om de pagina te verversen. Er zal een blauwe lijn verschijnen voor DOMContentLoaded en een rode lijn voor de totale laadtijd. Normaal gesproken zijn alles wat links van de blauwe lijn staat of deze raakt assets die het DOM blokkeren, of ook wel render blocking resources genoemd.
Sucuri Load Time Tester
De Sucuri Load Time Tester biedt een snelle en eenvoudige manier om de prestaties van uw sites over de hele wereld te testen. Het geeft u een globaal prestatiecijfer, van een A tot een F. De test meet hoe lang het duurt om verbinding te maken met uw site en om een pagina volledig te laden. Een zeer belangrijke waarde om op te letten is de “time to first byte”, die aangeeft hoe lang het duurt voordat de inhoud naar de browser wordt teruggestuurd om te beginnen met het verwerken van de pagina.
Pagelocity
Het Pagelocity-hulpprogramma biedt een andere unieke benadering als het gaat om een snelheidstest voor websites. Het geeft je een totaalscore van 100, bestaande uit factoren zoals social, SEO, resources en code. De tool biedt ook de mogelijkheid om uw concurrenten te volgen. U kunt zich aanmelden voor een gratis account om te profiteren van de extra functies. Vooral de code-weergave is uniek, omdat deze laat zien of uw site over HTTPS loopt, wat uw TTFB is en een grafische interface van uw DOM-elementen met een staafdiagram.
De resources-weergave is ook heel interessant, omdat u snel kunt zien welke middelen uw totale paginagewicht vormen. Zoals je in onze test kunt zien, zijn afbeeldingen meer dan 4x zo zwaar als onze externe scripts.
YSlow
YSlow is een open-sourceproject en -tool dat webpagina’s analyseert en je helpt erachter te komen waarom ze traag zijn, op basis van de regels van Yahoo! voor websites die goed presteren. Het wordt momenteel onderhouden door Marcel Duran, die ook betrokken is bij het WebPageTest-project. YSlow werkt in drie stappen om zijn performance testresultaten te verkrijgen:
- YSlow crawlt het DOM om alle componenten te vinden (image, scripts, etc.).
- YSlow krijgt informatie over de grootte van elke component (Gzip, expire headers, etc.)
- YSlow neemt de gegevens en genereert een cijfer voor elke regel, die op zijn beurt een algemeen cijfer geeft.
YSlow heeft 23 verschillende regels waarmee het uw website beoordeelt, zoals het gebruik van een CDN en het verminderen van DNS-lookups. GTmetrix biedt een online analyse-instrument om uw YSlow-score te controleren. Bekijk ook onze uitgebreide tutorial over het verbeteren van uw YSlow-score.
PerfTool
PerfTool is een open-source project voor client-side prestatietools, dat wordt gehost op GitHub. Het verzamelt verschillende gegevens over uw website en geeft deze op een eenvoudig te interpreteren manier weer op een rapportpagina. Het combineert drie gegevensbronnen in één, PageSpeed Insights, devperf, en W3CJS. In totaal geeft het je meer dan 200 verschillende prestatie-indicatoren.
Een groot voordeel met de PerfTool is dat je meerdere pagina’s tegelijk kunt testen voor Google PageSpeed Insights rapport. Vergelijk vervolgens de website performance resultaten van eerdere tests, stel een score drempel in en krijg een gedetailleerd rapport over uw tests. 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. Om naar de apparaatmodus te gaan, klikt u op het kleine telefoonpictogram in Chrome DevTools of u kunt op Ctrl + Shift + M
drukken (Cmd + Shift + M
). Je kunt dan kiezen welk apparaat je wilt emuleren, de oriëntatie, en zelfs de resolutie. U kunt ook de netwerk throttling veranderen om te zien hoe uw website zou renderen op bijvoorbeeld een gewone 2G of 4G verbinding.
U kunt dan de “Netwerk” tab en waterval uitsplitsing gebruiken om snelheidstesten uit te voeren.
Samenvatting
Zoals u kunt zien zijn er een aantal website snelheidstest tools waar u uit kunt kiezen. Elk van hen heeft zijn eigen unieke kenmerken zoals hierboven benadrukt. Het is een goed idee om regelmatig testen van uw site en een vaststelling van een benchmark, zodat na verloop van tijd kunt u verbeteringen aanbrengen.
Als je eenmaal weet waar de knelpunten zijn kun je beginnen om ze te repareren. Bijna alle van de bovenstaande tools lijst aanbevelingen. 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