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.

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.

Je zit op de bank en streamt probleemloos een 4K-video op je telefoon, maar zodra je je laptop openklapt om een webpagina te laden, lijkt het alsof de verbinding vastloopt. Ligt het aan de router of aan je computer? In dit artikel leggen we uit waarom wifi-snelheden zo sterk kunnen verschillen per apparaat en wat je eraan kunt doen.

Je betaalt voor een snelle internetverbinding, dus is de verwachting dat elk apparaat in huis die snelheid ook daadwerkelijk haalt. Toch voelt het surfen op je computer soms stroperig aan, terwijl je smartphone ernaast nergens last van heeft. Vaak wordt er direct naar de internetprovider gewezen, maar het probleem zit meestal in de apparatuur zelf. Het verschil in hardware, leeftijd en software tussen mobiele apparaten en computers is namelijk groter dan je denkt. Na het lezen van dit stuk weet je precies waar die vertraging vandaan komt.

Generatiekloof: waarom je laptop vaak achterloopt

Het snelheidsverschil tussen je telefoon en je computer komt vaak neer op een simpele generatiekloof. We vervangen onze telefoons gemiddeld elke twee tot drie jaar, waardoor ze vaak uitgerust zijn met de nieuwste wifi-chips (zoals wifi 6 of 6E). Een laptop gaat vaak veel langer mee, soms wel vijf tot zeven jaar. Hierdoor probeert een verouderde netwerkkaart in je laptop te communiceren met een moderne router, wat resulteert in een lagere maximumsnelheid.

Daarnaast speelt de manier waarop data wordt verwerkt een grote rol. Een telefoon is geoptimaliseerd voor directe consumptie: apps op de achtergrond worden gepauzeerd om de app die je nú gebruikt voorrang te geven. Een computer werkt anders. Terwijl jij probeert te surfen, kan Windows of macOS op de achtergrond bezig zijn met zware updates, het synchroniseren van clouddiensten of het maken van back-ups. Je laptop snoept dus al bandbreedte weg zonder dat jij het doorhebt, waardoor er voor je browser minder overblijft.

Wanneer je laptop de strijd wél wint

De laptop wint het van de telefoon wanneer de omstandigheden optimaal zijn voor stabiliteit in plaats van pure mobiliteit. Als je beschikt over een moderne laptop met een recente netwerkkaart en je bevindt je in dezelfde ruimte als de router, kan de laptop vaak stabieler grote bestanden binnenhalen.

Dat geldt vooral als je laptop verbonden is met de 5GHz-frequentieband. Deze frequentie is veel sneller dan de oude 2.4GHz-band, maar heeft een korter bereik. Als je dicht bij het toegangspunt zit, profiteert je laptop van zijn krachtigere processor om complexe webpagina's sneller op te bouwen dan een telefoon dat kan, mits de verbinding zelf niet de bottleneck is.

Waarom je telefoon soepeler aanvoelt

Het verschil wordt pijnlijk duidelijk zodra je verder van de wifi-bron af gaat zitten, bijvoorbeeld op zolder of in de tuin. Smartphones zijn vaak agressiever geprogrammeerd om het sterkste signaal te pakken of snel tussen frequenties te schakelen. Veel laptops blijven daarentegen te lang plakken op een zwak 5GHz-signaal of vallen onnodig terug op de trage en vaak overvolle 2.4GHz-band (het zogeheten 'sticky client'-probleem).

Daarnaast hebben smartphones een trucje dat laptops helaas moeten missen: wifi-assist (of een vergelijkbare term). Als de wifi even hapert, gebruikt de telefoon ongemerkt een beetje 4G- of 5G-data om de stroom stabiel te houden. Je laptop heeft die optie meestal niet en laat direct een laadicoontje zien. Hierdoor voelt de telefoon sneller aan, terwijl hij eigenlijk een beetje vals speelt door mobiele data bij te schakelen.

Harde grenzen: wanneer traagheid onvermijdelijk is

Er zijn situaties waarin je laptop de strijd sowieso verliest, ongeacht hoe dicht je bij de router zit. Dit zijn de harde grenzen:

Zo check je of jouw hardware het probleem is

Om te bepalen of je laptop de boosdoener is, moet je eerst kijken naar de verbinding. Klik op het wifi-icoon op je laptop en controleer of je verbonden bent met een 5GHz-netwerk (vaak te zien bij Eigenschappen of netwerkinformatie). Is dat niet het geval en sta je wel dicht bij de router? Dan is je netwerkkaart waarschijnlijk verouderd of staan de instellingen niet goed.

Kijk ook eens kritisch naar je gebruik. Heb je toevallig nog applicaties openstaan zoals Steam, OneDrive of Dropbox? Deze programma's kunnen de verbinding volledig dichttrekken. Op een telefoon gebeurt dit zelden automatisch op de achtergrond. Als je laptop ouder is dan vijf jaar, kan een simpele upgrade met een moderne wifi-usb-dongle het probleem vaak al verhelpen, zonder dat je een hele nieuwe computer hoeft aan te schaffen.

Kortom: leeftijd en software maken het verschil

Dat je telefoon sneller is op wifi dan je laptop, komt meestal doordat telefoons nieuwere netwerkchips hebben en slimmer omgaan met datastromen. Laptops hebben vaak last van zware achtergrondprocessen of blijven hangen op een tragere frequentieband. Daarnaast schakelen telefoons bij zwak wifi soms ongemerkt over op 4G/5G, wat de ervaring vloeiender maakt. Controleer of je laptop op de 5GHz-band zit en sluit zware achtergrondprogramma's af om snelheid te winnen.

Tomodachi Life: Waar Dromen Uitkomen komt op 16 april uit voor Nintendo Switch.

Dat heeft Nintendo vanmiddag aangekondigd in een speciale Direct-uitzending die om de game draait. Ondanks dat de game voor de eerste Switch verschijnt, zal hij via backwards compatibility ook speelbaar zijn op Nintendo Switch 2.

In de Tomodachi Life-games van Nintendo kunnen spelers zelf Mii-personages creëren en bijvoorbeeld baseren op het uiterlijk van henzelf, vrienden en familie of beroemdheden. Deze Mii's leiden vervolgens hun eigen leven op een eiland, wat allerlei gekke en hilarische situaties oplevert. Spelers kunnen zelf ook invloed uitoefenen op deze verschillende situaties.

Over Tomodachi Life: Waar Dromen Uitkomen

In de Direct-uitzending werd meer informatie gegeven over het aankomende Tomodachi Life: Waar Dromen Uitkomen. Zo is duidelijk dat spelers hun Mii-personages unieke persoonlijkheden, gewoontes en woningen kunnen geven. Spelers kunnen tijdens de game zien waar de personages aan denken, en ze helpen bij problemen. De tijd in de game verstrijkt daarbij net zo snel als in de echte wereld, wat het de moeite waard maakt om het spel op verschillende momenten op te starten.

Het is daarbij mogelijk om de verschillende Mii-personages kennis met elkaar te laten maken, om te zien wat er vervolgens gebeurd. Personages kunnen bijvoorbeeld praten over hun favoriete eten en filmgenres. Het is daarnaast mogelijk om acht Mii-personages bij elkaar in een huis te laten wonen, wat weer unieke reacties van de personages veroorzaakt.

Op het eiland waar de game zich afspeelt kunnen spelers de personages winkels te laten bezoeken. Bijvoorbeeld een supermarkt waar allerlei etenswaren worden verkocht, of de mogelijkheid om kleding en kostuums te kopen. In een speciale marktkraam worden redelijk geprijsde artikelen meerdere malen per dag ververst.

Ook is er een ontwerpatelier, waar spelers verschillende voorwerpen kunnen maken, waaronder kledingstukken, versiering voor huizen en zelfs huisdieren. Het eiland kan sowieso naar eigen smaak worden ingedeeld, met bankjes, bomen, planten en meer.