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.

Take-Two Interactive en ontwikkelaar Rockstar beginnen aankomende zomer met de marketing rondom de Grand Theft Auto 6-release. De releasedatum staat nog steeds gepland op 19 november van dit jaar.

Dat liet Take-Two weten bij het bekendmaken van diens fiscale kwartaalcijfers. Aldus de uitgever in een persbericht: "Dit fiscale jaar is uitzonderlijk voor ons en we zijn enorm zeker van onze zaak voor het aankomende fiscale jaar. Die gaat revolutionair voor Take-Two en de gehele entertainmentindustrie worden, geleid door de release van Grand Theft Auto 6. Rockstars marketing rondom de release gaat deze zomer van start."

Take-Two bevestigde wederom dat het langverwachte GTA 6 op 19 november moet uitkomen. Het bedrijf heeft al vaker releasedata voor de game beloofd om het later alsnog uit te stellen. Dat het nu meldt dat de marketing rondom de release van het spel aankomende zomer begint, geeft wel een gevoel van meer zekerheid over de mogelijkheid dat de huidige releasedatum wordt gehaald.

Fysieke release niet uitgesteld

Onlangs gingen er geruchten dat alleen de fysieke release van Grand Theft Auto 6 misschien zou worden uitgesteld. Het idee zou zijn dat de digitale release gewoon op 19 november zou verschijnen, maar de fysieke release in de winkels pas later verschijnt om zo leaks te voorkomen. Aan Variety liet Take-Two-ceo Strauss Zelnick weten dat dit echter "niet het plan is". Daarmee lijkt dit gerucht dus ontkracht.

Switch 2-versie van Borderlands 4

Take-Two geeft ook het populaire spel Borderlands 4 uit. Die game verscheen vorig jaar al op meerdere consoles, maar een Switch 2-versie werd uitgesteld. Tijdens de bekendmaking van de kwartaalcijfers vandaag bleek dat de game geheel uit het releaseschema van de uitgever is gehaald.

"We hebben de moeilijke beslissing gemaakt om de ontwikkeling (van de Switch 2-versie) te pauzeren", zo werd wederom aan Variety gemeld. "We blijven ons richten op het leveren van kwaliteitscontent voor de game en blijven het optimaliseren. We blijven ook nauw samenwerken met onze vrienden bij Nintendo. Zo komen PGA Tour 2K25 en WWE 2K26 voor de Switch 2 uit, en we willen graag meer van onze spellen naar het systeem brengen." Het is niet bekend wanneer en of Borderlands 4 nog uitkomt voor de Switch 2.

Over Grand Theft Auto 6

Grand Theft Auto 6 komt op 19 november uit voor PlayStation 5 en Xbox Series X en S. Het spel draait om twee hoofdpersonages: Lucia Caminos en Jason Duval. Het duo heeft een relatie, en duidelijk is in ieder geval dat Lucia vrijkomt uit de gevangenis en het tweetal vervolgens nog verder het criminele pad op gaat.

De game speelt zich af in Vice City, een fictieve versie van Miami, en omstreken. Dat betekent dat spelers glooiende stranden en met neon verlichte straten kunnen verwachten. Het was ook al de setting van de PlayStation 2-game Grand Theft Auto: Vice City, dat na GTA 3 uitkomt. Naar verwachting zal Grand Theft Auto 6 een ongekende hoeveelheid details vertonen. Lees hier alles over de game.

Je laptopaccu lijkt altijd leeg te zijn op het moment dat er nergens een stopcontact te bekennen is. Met de juiste software-instellingen pers je echter makkelijk een uur extra uit je apparaat, zonder dat je daarvoor technisch onderlegd hoeft te zijn. Wij leggen uit aan welke knoppen je precies moet draaien voor maximaal resultaat.

Er is weinig irritanter dan een laptop die in de spaarstand schiet of uitvalt terwijl je in de trein net de laatste hand legt aan een belangrijk document. Veel gebruikers denken bij een snel leeglopende batterij direct dat de hardware versleten is en kijken alweer naar een nieuwe laptop. Vaak is de accu zelf echter nog prima in orde, maar gaat het besturingssysteem slordig om met de beschikbare energie. Fabrieksinstellingen zijn namelijk vaak gericht op maximale prestaties en helderheid, niet op uithoudingsvermogen. In dit artikel leer je hoe je de regie terugpakt en de energievreters in toom houdt, zodat je met een gerust hart de dag doorkomt.

Waar die energie eigenlijk naartoe lekt

Om te begrijpen hoe je accucapaciteit bespaart, moet je eerst weten waar de energie aan opgaat. De twee grootste verbruikers in een laptop zijn vrijwel altijd het beeldscherm en de processor. Het scherm vreet stroom om pixels te verlichten; hoe feller het scherm, hoe sneller de teller tikt. Daarnaast speelt de verversingssnelheid een rol. Veel moderne schermen verversen het beeld 120 keer per seconde (120 Hz). Dat kijkt heel rustig, maar kost aanzienlijk meer rekenkracht dan de standaard 60 Hz.

Onder de motorkap is de processor continu bezig met het verwerken van taken. Een veelvoorkomende misvatting is dat je handmatig alle programma's moet afsluiten om stroom te besparen. Dat is maar ten dele waar, want moderne systemen zijn heel goed in het bevriezen van apps die je niet gebruikt. Wat wél energie kost, zijn achtergrondprocessen die actief blijven synchroniseren, zoals cloudopslagdiensten of mailprogramma's die elke minuut checken op nieuwe berichten. Ook randapparatuur die stroom trekt via de usb-poort, zelfs als je deze niet actief gebruikt, snoept procenten van je lading af.

Besparen tijdens eenvoudige taken

De energiebesparende modus is je beste vriend wanneer je taken uitvoert die weinig rekenkracht vereisen. Denk hierbij aan tekstverwerken, e-mailen, webbrowsen of het invullen van spreadsheets. In deze scenario's heb je de volledige kracht van je processor en videokaart simpelweg niet nodig. Door in Windows of macOS te kiezen voor de energiebesparende modus, klokt de processor zichzelf terug. Hij werkt dan letterlijk iets langzamer, maar voor administratieve taken merk je daar in de praktijk niets van. De letters verschijnen nog steeds direct op je scherm zodra je ze typt.

Daarnaast is dit het moment om eens kritisch naar je schermhelderheid te kijken. Binnenshuis is een helderheid van 50 tot 60 procent vaak meer dan voldoende om comfortabel te kunnen werken. Werk je vooral 's avonds? Dan kan het zelfs nog lager. Ook het uitschakelen van toetsenbordverlichting levert in deze context pure winst op. Het zijn kleine percentages per uur, maar op een hele werkdag maakt dit het verschil tussen wel of niet de oplader moeten pakken.

©PXimport

Prestaties boven accuduur

Er zijn momenten waarop je de batterijbesparingsinstellingen beter uit kunt laten, of zelfs agressief moet vermijden. Zodra je aan de slag gaat met zware grafische taken, zoals videobewerking, 3D-rendering of serieuze gaming, werkt een besparingsmodus averechts. De software knijpt de toevoer van stroom naar de componenten af, wat resulteert in een haperend beeld, trage exporttijden en een frustrerende gebruikservaring.

In deze gevallen heeft de hardware ademruimte nodig om te kunnen presteren. Als je probeert te gamen op een besparingsstand, zal het systeem de prestaties van de grafische chip zo ver terugschroeven dat het spel onspeelbaar wordt. Bovendien duurt het renderen van een video in spaarstand veel langer, waardoor het scherm en de schijf langer actief moeten blijven, wat onderaan de streep soms zelfs méér energie kost dan een korte piekbelasting op vol vermogen. Hier geldt: efficiëntie door snelheid is soms zuiniger dan traagheid.

Situaties waarin instellingen het niet meer redden

Hoewel je met software veel kunt optimaliseren, zijn er harde grenzen waarbij geen enkele instelling je meer gaat redden. Je moet realistisch zijn over de fysieke staat van je apparaat.

Ten eerste is er de chemische degradatie. Als de maximale capaciteit van je accu (ook wel battery health geheten) onder de 70 procent is gezakt, kun je instellen wat je wilt, maar de rek is er fysiek uit. De batterijcellen kunnen de lading simpelweg niet meer vasthouden. Ten tweede is oververhitting een doodsteek voor je accuduur. Als de ventilatoren van je laptop continu staan te loeien omdat de koelkanalen vol stof zitten, kost dat enorm veel energie. Warmte is in feite verspilde energie. Tot slot helpt software niet als je zware externe apparaten zonder eigen voeding aansluit. Een externe harde schijf die zijn stroom via de laptop krijgt, trekt de accu leeg alsof het een rietje in een pakje sap is, ongeacht je schermhelderheid.

Creëer je eigen energieprofiel

Om echt grip te krijgen op je verbruik, moet je de instellingen afstemmen op jouw specifieke gedrag. Begin met de slaapstand-instellingen. Veel mensen laten hun laptop openstaan als ze even koffie gaan halen, waarbij het scherm zomaar tien minuten op volle sterkte blijft branden. Stel in dat het scherm al na twee of drie minuten inactiviteit uitgaat. Dat is de makkelijkste winst die je kunt boeken.

Kijk ook naar je randapparatuur. Gebruik je een externe monitor? Zorg dan dat je laptop zo is ingesteld dat het interne scherm volledig uitschakelt, en niet 'zwart maar aan' blijft staan. Gebruik je veel bluetooth-apparaten? Schakel bluetooth uit als je ze niet gebruikt; het constant scannen naar verbindingen kost stroom. Voor gebruikers met een oledscherm is er nog een extra truc: gebruik een donkere modus. Bij oledschermen verbruiken zwarte pixels namelijk helemaal geen energie, in tegenstelling tot traditionele lcd-schermen waar de achtergrondverlichting altijd aan staat.

Balans tussen snelheid en stopcontact

Het verlengen van je accuduur is uiteindelijk een balansspel tussen comfort en noodzaak. De grootste winst behaal je door de schermhelderheid te temperen en de slaapstand agressiever in te stellen, zodat je geen energie verspilt in de pauzes. Wees niet bang om de energiebesparingsmodus standaard aan te zetten voor alledaags werk; de moderne processors zijn krachtig genoeg om dat zonder haperingen op te vangen. Pas als je merkt dat je laptop traag reageert bij zwaardere taken, is het tijd om de teugels weer iets te laten vieren. Zo bepaal jij hoelang de werkdag duurt, en niet je batterij.