ID.nl logo
Huis

Tips voor de expert: Website-snelheid testen

De laadtijd van internetpagina’s wordt steeds belangrijker en weegt ook mee in de ranking van je site bij Google. Er zijn diverse tools waarmee je de prestaties van je website kunt meten. Je website-snelheid testen doe je zo.

De snelheid waarmee internetpagina’s worden geladen wordt steeds belangrijker, onder meer voor de ranking van je site bij Google, maar ook voor de conversie: bezoekers haken sneller af als het laden te lang duurt. Met snelheid wordt soms de responstijd bedoeld, maar vaker de totale laadtijd. In deze workshop laten we zien hoe je beide kunt meten. De responstijd kun je zien als de tijd tot de browser de eerste gegevens ontvangt.

Dit hangt vooral af van de ‘opstarttijd’ van je softwareomgeving. De bottleneck is hierbij vaak niet de webserver zelf, maar bijvoorbeeld het gebruikte cms (zoals WordPress) of framework (bijvoorbeeld Laraval). De stap van php versie 5.x naar php versie 7.x helpt overigens al enorm voor de snelheid. Ook kun je overwegen een cache voor de hele site te zetten, bijvoorbeeld met Varnish. De laadtijd is de tijd die nodig is om de volledige internetpagina te laden. Het is een belangrijke factor en ook één waar gemakkelijker winst te boeken valt.

Javascript én jQuery

Wat veel invloed op de laadtijd heeft, zijn de vele losse componenten waaruit websites tegenwoordig bestaan. Een website moet bijvoorbeeld dynamisch zijn met vloeiende animaties en ook nog responsief, zodat deze op mobiel én desktop goed werkt. Ook gedragen websites zich steeds meer als applicatie, waarbij asynchroon kleine stukjes in websites worden vernieuwd.

Een populaire basis voor zo’n moderne website is Bootstrap: een framework dat veel stijlen bevat in een eigen css-bestand en daarnaast leunt op Javascript én de jQuery-bibliotheek. Daar komen vaak de nodige plug-ins voor jQuery bij, zoals sliders, die elk veelal ook weer eigen stijlen hebben. Een minimalist kan overigens prima een website zonder bijvoorbeeld Javascript bouwen, maar dat is wel veel werk als er hoge eisen worden gesteld.

Wil je eenvoudig een animatie toevoegen, dan kun je animate.css gebruiken, maar het is wél weer een extra stylesheet. En wie icoontjes wil tonen, kan handig Font Awesome integreren, maar ook dat is weer een stylesheet waarin ook nog een lettertypebestand wordt geladen. En dan zijn er nog de nodige extra scripts en banners (afbeeldingen of zelfs video’s) van advertentienetwerken, die lang niet altijd zijn geoptimaliseerd. Het aantal bestanden en de omvang van websites neemt zodoende flink toe.

Website zonder jQuery of Javascript?

Het was nog niet zo lang geleden een ongeschreven regel dat een website ook zonder Javascript moet werken. Tegenwoordig doen ontwikkelaars daar weinig moeite meer voor en dat hoeft ook niet echt: van alle paginaweergaven wereldwijd komt maar 0,2 procent van een apparaat waarop Javascript is uitgeschakeld. Zonder Javascript, met puur css, is al veel mogelijk, zoals de site youmightnotneedjs.com laat zien.

Nadeel is dat je meer tijd moet steken in je scripts, omdat je meer rekening moet houden met verschillen in browsers. Bibliotheken maken veel zaken abstracter en dus makkelijker. Voor jQuery geldt eigenlijk hetzelfde. Maar als je maar een paar functies van jQuery gebruikt, is het zonde de hele bibliotheek te laden. Dat laat bijvoorbeeld youmightnotneedjquery.com zien, dat de inspiratiebron voor bovengenoemde website was.

Van alle paginaweergaven wereldwijd komt maar 0,2 procent van een apparaat waarop Javascript is uitgeschakeld

-

Laadtijd testen

Om een goed beeld van de laadtijd van al die losse elementen te krijgen, kun je bijvoorbeeld de test op webpagetest.org of tools.pingdom.com gebruiken. De eerste is het meest interessant: de test wordt gesimuleerd vanaf een normale Windows-pc met gewone internetverbinding, waarbij je zelf de testlocatie en browser kunt kiezen. Na de test zie je een zogenoemde waterval die aangeeft wanneer de verschillende onderdelen van de website zijn geladen.

Daarboven zie je een samenvatting met onder meer First Byte, in feite de responstijd, en onder Document Complete de tijd die nodig is om het document inclusief alle ‘statische content’ te laden, zoals stylesheets, scripts en afbeeldingen. Tijdwinst valt onder meer te behalen door stylesheets en scripts te combineren en minimaliseren. Dat kun je met Grunt gemakkelijk automatiseren, waarover in een later artikel meer. Ook http/2 voor het versnellen van https-websites is een aanrader. Een groot voordeel is dat de browser daarmee meerdere bestanden gelijktijdig kan ophalen bij je webserver.

Inzicht in knelpunten

Om te zien welke onderdelen de weergave van de pagina tegenhouden, is een test op varvy.com/pagespeed erg praktisch. Je ziet er ook de totale omvang van stylesheets en scripts. En je krijgt tips, bijvoorbeeld over afbeeldingen die je kunt verkleinen of de optimalisatie van je server. Dit laatste komt ook in de workshop 4 aan bod. Op de Varvy-website vind je tevens een goede, meer op seo gerichte test. Verder is Google PageSpeed heel praktisch om inzicht te krijgen in knelpunten in je ontwerp. Er is aandacht voor zowel mobiel als desktop en je krijgt veel optimalisatietips.

De test van GTmetrix test je website op talloze richtlijnen die gehanteerd worden door Google (PageSpeed) en Yahoo (Yslow). Niet alle tips zijn overigens even zinvol: een paar kilobytes winst is bijvoorbeeld niet heel interessant op een website van een megabyte.

©PXimport

Internationaal bezoek

Het aantal bestanden en de omvang daarvan heeft vooral veel invloed op bezoekers die je website van wat verder weg bezoeken. Op tools.keycdn.com kun je zien wat het effect is. Ga naar Performance Test en vraag een individueel bestand op. Kies je een bestand bij een Nederlandse provider, dan zie je dat de eerste byte (ttfb oftewel time to first byte genoemd) razendsnel is ontvangen vanuit Amsterdam, veelal binnen 30 ms. Buiten Europa is dat al snel 400 ms tot wel 1 seconde.

Vraag je zo’n bestand bij een content delivery network (cdn, ook wel content distribution network genoemd) op, zoals KeyCDN zelf, dan is die waarde voor bijna alle locaties zo’n 15 tot 40 ms, als het tenminste al eerder bij de bewuste node van die cdn is opgevraagd. Dat is een belangrijk voordeel van een cdn, die statische content zoals scripts, stylesheets en afbeeldingen kan distribueren over vaak wel zo’n 20 tot 30 servers wereldwijd, de zogenaamde nodes.

De pagina zelf wordt weliswaar bij je eigen host gegenereerd, maar de statische content wordt via de snelste route opgehaald bij een node dichtbij de gebruiker. In de workshop 3 lees je hoe je zelf een cdn in gebruik kunt nemen.

▼ Volgende artikel
Waar voor je geld: 5 compacte vrijstaande vaatwassers tot 250 euro
Huis

Waar voor je geld: 5 compacte vrijstaande vaatwassers tot 250 euro

Bij ID.nl zijn we dol op kwaliteitsproducten waar je niet de hoofdprijs voor betaalt. Een paar keer per week speuren we binnen een bepaald thema naar zulke deals. Heb je geen grote keuken maar zou je toch graag een vaatwasser willen? Wij vonden vijf betaalbare vrijstaande vaatvassers met een compact formaat voor je.

In niet iedere keuken is plek voor een vaatwasser en zeker als je geen inbouwruimte meer hebt, kan het lastig zijn om er eentje kwijt te kunnen. Maar er zijn ook vaatwassers met afwijkende formaten die een stuk kleiner zijn en daardoor ook makkelijk passen in een keuken die niet zo heel groot is. Wij vonden vijf betaalbare modellen voor je.

Tomado TDW5501B mini-vaatwasser

De Tomado TDW5501B is een compacte, vrijstaande vaatwasser die geschikt is voor zes couverts. Volgens de specificaties is de breedte 55 cm en bedraagt het geluidsniveau 47 dB. Het apparaat heeft verschillende programma’s, waaronder een kort programma, een eco‑stand en een intensief programma. De energieklasse is D, maar in ruil daarvoor krijg je een machine die weinig ruimte inneemt en eenvoudig op het aanrecht kan worden aangesloten. De startuitstel‑optie maakt het mogelijk de wasbeurt later te laten beginnen. De TDW5501B is ontworpen voor huishoudens met weinig ruimte die toch een volwaardige vaatwasbeurt willen.

Tomado TDW5501W

De TDW5501W is het witte broertje van de TDW5501B. Dit model heeft eveneens een breedte van 55 cm en biedt plaats aan zes couverts. Het geluidsniveau is 47 dB en de energieklasse D, net als bij de zwarte variant. Er zijn meerdere programma's, waaronder een eco- en een kort programma. De vaatwasser is vrijstaand, maar vanwege het lage formaat zet je 'm het best op een aanrecht en sluit je hem aan via een slang op de kraan. Dankzij de startuitstel‑functie kun je zelf bepalen wanneer hij begint met spoelen.

Beko DTC36610W

De Beko DTC36610W is een compacte vrijstaande vaatwasser voor huishoudens met beperkte ruimte. De machine is 55 cm breed en heeft een geluidsniveau van 49 dB. Met energieklasse A+ is hij zuiniger dan veel andere mini‑vaatwassers. Het apparaat is geschikt voor zes couverts en biedt verschillende programma’s om lichte en intensieve vaat schoon te krijgen. Omdat hij niet ingebouwd hoeft te worden, kun je hem gemakkelijk op het aanrecht of in een kleine keuken plaatsen.

Inventum VVW4530AW

De Inventum VVW4530AW is een smalle vrijstaande vaatwasser met een breedte van slechts 44,8 cm. Het toestel is geschikt voor tien couverts en beschikt over een verstelbare bovenkorf en startuitstel, zodat je de indeling en het wasprogramma kunt aanpassen. De energieklasse is E en het geluidsniveau bedraagt 47 dB. Het voordeel van deze vaatwasser is dat hij de normale hoogte heeft van een gewoon model, je schuift hem daardoor eenvoudig onder een werkblad of plaatst hem vrij.

Inventum VVW5520

De Inventum VVW5520 is een mini-vaatwasser voor zes couverts. Het apparaat is onderbouw (dus vrijstaand) en heeft een breedte van 55 cm, een diepte van 50 cm en een hoogte van 44 cm. Het geluidsniveau is 47 dB en de energieklasse D. In de specificaties worden een resttijdindicator, condensdroging en uitgestelde start genoemd. De machine is bedoeld voor kleine huishoudens die niet de ruimte of behoefte hebben aan een grote vaatwasser, bijvoorbeeld als je op kamers woont, een klein gezin hebt of een kleine keuken.

▼ Volgende artikel
Wat is wifi 6(E) eigenlijk en merk je echt verschil?
© A Stockphoto
Huis

Wat is wifi 6(E) eigenlijk en merk je echt verschil?

Heb je last van haperende streams of traag internet wanneer iedereen thuis tegelijk online is? Wifi 6 belooft dé oplossing te zijn voor overvolle netwerken en betere prestaties. Maar wat is deze nieuwe standaard precies en merk je in de praktijk echt verschil? We duiken in de voordelen van wifi 6 en de supersnelle wifi 6E-variant. Lees snel verder en ontdek of een upgrade voor jouw situatie de investering waard is.

Ben jij ook klaar met haperende videocalls of films die precies op het spannendste moment beginnen te bufferen omdat iedereen in huis tegelijk online is? Dan wordt het hoog tijd om kennis te maken met wifi 6, dat korte metten maakt met overbelaste netwerken. Maar is deze technologie echt een revolutie voor je dagelijkse internetgebruik of merk je in de praktijk eigenlijk weinig van die veelbelovende specificaties? In dit artikel duiken we dieper in de wereld van wifi 6 en zijn nog krachtiger broertje wifi 6E. We leggen helder uit wat de technische verschillen zijn en helpen je bepalen of een overstap voor jouw huishouden de investering waard is, zodat jij precies weet of je klaar bent voor de toekomst van razendsnel en stabiel draadloos internet.

Tijd voor een nieuwe wifi 6-router? Kijk snel op Kieskeurig.nl!

Efficiëntie is het hoofddoel

Wifi 6 is de huidige standaard voor draadloos internet, technisch ook wel bekend als 802.11ax. Waar voorgaande upgrades zich voornamelijk richtten op het verhogen van de maximale topsnelheid per apparaat, gooit wifi 6 het over een andere boeg. Het hoofddoel van deze technologie is niet alleen snelheid, maar vooral efficiëntie en capaciteit. Je kunt het vergelijken met een verbreding van de snelweg: je mag misschien niet veel harder rijden, maar doordat er meer rijbanen zijn en het verkeer slimmer wordt geregeld, sta je nooit meer in de file, zelfs niet tijdens de spits.

Het antwoord op de vraag of je het verschil echt merkt, hangt sterk af van je thuissituatie. Als je alleen woont en slechts één laptop en een telefoon gebruikt, zal de sprong van wifi 5 naar wifi 6 wellicht aanvoelen als een kleine, nauwelijks merkbare verbetering. Het echte verschil wordt pas duidelijk in een huishouden vol slimme apparaten. Wifi 6 excelleert namelijk in omgevingen waar meerdere mensen tegelijkertijd streamen, gamen en videobellen, terwijl op de achtergrond slimme thermostaten en deurbellen ook verbinding zoeken. De router kan met wifi 6 gelijktijdig data naar meerdere apparaten sturen in plaats van snel tussen alle apparaten te moeten wisselen, wat zorgt voor een stabielere verbinding zonder haperingen. Daarnaast communiceren wifi 6-routers efficiënter met je apparaten over wanneer ze moeten 'slapen' en 'wakker worden', wat een positief effect heeft op de batterijduur van je smartphone en laptop.

©YurolaitsAlbert

Snel over de VIP-strook

Om het plaatje compleet te maken is er ook nog wifi 6E. Dat is een uitbreiding van de wifi 6-standaard die gebruikmaakt van een volledig nieuwe frequentieband: 6 GHz. De traditionele 2,4GHz- en 5GHz-banden die we al jaren gebruiken, zitten inmiddels overvol met signalen van de buren, magnetrons en babyfoons. Wifi 6E opent als het ware een exclusieve VIP-strook waar alleen de allernieuwste apparaten gebruik van mogen maken. Hierdoor heb je geen last van interferentie en haal je extreem hoge snelheden met een zeer lage vertraging. Dat is echter alleen relevant als zowel je router als je ontvangende apparatuur (zoals je nieuwste smartphone) wifi 6E ondersteunen.

Al met al is de overstap naar wifi 6 of 6E zeker de moeite waard als je toe bent aan een nieuwe router en in een druk huishouden woont of in een appartementencomplex waar veel signalen door elkaar lopen. Je zult het verschil vooral merken in de stabiliteit van de verbinding wanneer iedereen thuis tegelijk online is. Voor wie weinig apparaten heeft en tevreden is met de huidige snelheid, is een directe upgrade minder noodzakelijk, al is het wel de standaard voor de toekomst.

🎯 Populairste merken routers in NL

TP-Link |  Netgear | Ubiquity AVM Fritz! | ASUS

Wi-Fi 6-routers worden op Kieskeurig.nl steeds populairder, vooral vanwege hun veel hogere snelheid, betere stabiliteit en het vermogen om veel apparaten tegelijk te verbinden zonder snelheidverlies. Merken als AVM (met de FRITZ!Box-serie), TP-Link (o.a. Deco en Archer), en Linksys (Velop) scoren daarbij hoog.

Aanraders per merk

AVM FRITZ!Box 5590 Fiber AON
Krachtige glasvezelrouter met 4×4 Wi-Fi 6, 2,5G-poort en uitgebreide mesh- en telefoniefuncties. Geschikt voor hoge snelheden via AON of XGS-PON. Reviewscore op Kieskeurig.nl: 9,5.

AVM FRITZ!Box 6690 Cable

High-end kabelrouter met ingebouwde DOCSIS-3.1-modem, 4×4 Wi-Fi 6 en een 2,5G-poort voor extra hoge snelheden. Ondersteunt DECT-smart-home, mesh en uitgebreide netwerkfuncties. Reviewscore op Kieskeurig.nl: 9,0.

TP-Link Deco X60 3-Pack

Mesh-systeem voor stabiele dekking door het hele huis met Wi-Fi 6-snelheden tot 2402 Mbit/s op 5 GHz. Inclusief WPA3-beveiliging en ouderlijk toezicht. Reviewscore op Kieskeurig.nl: 9,3.

Linksys Velop Pro 6E 2-Pack

Tri-band mesh-systeem met een snelle 6 GHz-band voor 4K/8K-streaming en lage latency, geschikt voor grotere woningen. Ondersteunt WPA3 en slimme netwerkoptimalisatie. Reviewscore op Kieskeurig.nl: 8,6.

TP-Link Archer AX73

Zeer snelle dual-band Wi-Fi 6-router met 5400 Mbit/s totale bandbreedte en sterke beveiliging (WPA3). Met vier gigabit-poorten en USB-aansluiting ideaal voor veeleisende huishoudens. Reviewscore op Kieskeurig.nl: 10,0.

🔟 Over de reviewscores op Kieskeurig.nlOp Kieskeurig.nl schrijven consumenten reviews over producten. Elke review moet voldoen aan kwaliteitscriteria: de reviewer moet aangeven of het product gekocht, gekregen of getest is, er mag geen misleidende taal in staan en de inhoud moet betrouwbaar zijn. Zo worden nep- of spamreacties tegengegaan. Bij de beoordeling zie je niet alleen het gemiddelde cijfer, maar ook hoeveel reviews er zijn. Zo krijg je meteen een indruk of de score op basis van één enkele review is of op basis van veel gebruikerservaringen.