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.

Energieopslag stond lang gelijk aan een technische puzzel van losse kastjes en kabels. De Hoymiles HiOne rekent daar definitief mee af. Dit systeem integreert krachtige prestaties in één strakke, modulaire zuil die gezien mag worden. Ben jij klaar voor de volgende stap in energieonafhankelijkheid? Wij doken in de specificaties van deze stille krachtpatser.

Partnerbijdrage - in samenwerking met Hoymiles

Geen kabelbrij, maar strak design

Wie zijn garage of technische ruimte netjes wil houden, zit niet te wachten op een wirwar van kastjes en leidingen. De HiOne lost dit op met een slim modulair ontwerp. De installateur stapelt de batterij- en omvormermodules simpelweg op elkaar.

Het unieke hieraan is dat alle verbindingen intern lopen. Aan de buitenkant zie je dus geen kabels, wat zorgt voor een rustig en 'afgewerkt' beeld. De behuizing voelt niet aan als goedkoop plastic, maar als een solide apparaat dat tegen een stootje kan. Dankzij de IP66-certificering (water- en stofdicht) is het systeem zelfs robuust genoeg om buiten onder een overkapping geplaatst te worden, mocht je binnen ruimte willen besparen.

Klaar voor de moderne grootverbruiker

Dit systeem is specifiek ontworpen om de energiehonger van het moderne, duurzame gezin te stillen. Heb je een warmtepomp, een elektrische auto of een druk huishouden? Dan is de HiOne in zijn element.

De huidige line-up van de HiOne is geoptimaliseerd voor woningen met een 3-fase aansluiting (ondersteuning tot 33,3 A per fase), maar ook 1-fase varianten staan op de planning. Dit maakt het systeem enorm veelzijdig. Waar lichtere systemen vaak moeite hebben om meerdere zware apparaten tegelijk van stroom te voorzien, levert de HiOne onverstoorbaar door. De echte meerwaarde zit in de onafhankelijkheid. Dankzij de 'whole-home backup'-functie kan het systeem bij stroomuitval het hele huis draaiende houden. Dus niet alleen de wifi en de koelkast, maar ook het koken en verwarmen gaan gewoon door.

©Hoymiles / Jeroen Keep

Het brein: AI en dynamische tarieven

Een batterij is tegenwoordig meer dan een opslagvat; het is een slimme handelscomputer. De HiOne wordt aangestuurd door de S-Miles Cloud, een platform dat verder kijkt dan alleen 'vol' of 'leeg'. Met de ingebouwde 'Time-of-Use' modus kan het systeem slim inspelen op energietarieven.

Heb je een dynamisch energiecontract? Dan kan de software automatisch laden als de stroom goedkoop (of zelfs gratis) is en terugleveren of ontladen als de prijzen pieken. Zo verdien je de investering niet alleen terug door eigen gebruik, maar ook door slim te handelen op de energiemarkt. Bovendien leert het systeem jouw verbruikspatronen kennen, zodat er altijd voldoende buffer is voor jouw specifieke situatie.

Geen DIY, maar professionele zekerheid

Het is belangrijk om te benadrukken dat de HiOne geen doe-het-zelfproject is, zoals een eenvoudige balkon-set. Dit is hoogwaardige infrastructuur die naadloos geïntegreerd wordt in je meterkast en woning. Je koopt dit systeem dan ook via een gecertificeerde installateur.

Voor de consument is dat een groot voordeel: je hoeft je niet druk te maken over de techniek. De vakman zorgt dat de zuil op de juiste plek komt te staan, regelt de koppeling met je zonnepanelen en zorgt dat alles veilig draait. Jij bedient het systeem vervolgens simpelweg via de app.

Om deze krachtpatser veilig te houden, is een 5-laags veiligheidssysteem ingebouwd. Dit varieert van speciale drukkleppen en aerogel-isolatie tussen de cellen tot een actieve brandonderdrukkingsmodule die in noodsituaties binnen enkele seconden reageert. Daarnaast wordt de temperatuur op negen punten per cel continu gemonitord.

©Hoymiles / Jeroen Keep

Toekomstmuziek: je auto als batterij

Misschien wel het meest interessante aspect voor EV-rijders is de voorbereiding op V2X (Vehicle-to-Everything). Hoymiles heeft aangekondigd dat er een specifieke V2X-module aankomt voor de HiOne. Hiermee wordt het in de toekomst mogelijk om de enorme accu van je elektrische auto te koppelen aan je thuisbatterij. Je auto fungeert dan als een soort super-accu voor je huis, terwijl de HiOne de regie voert. Daarmee is dit systeem niet alleen een oplossing voor nu, maar ook een voorbereiding op de volgende stap in de energietransitie.

Conclusie

De Hoymiles HiOne is een premium keuze voor huiseigenaren die verder kijken. Het systeem combineert een strak design met de brute kracht die nodig is voor een huis vol warmtepompen en EV's. Door te kiezen voor een professioneel geïnstalleerd systeem met 5-voudige beveiliging en slimme AI-software, haal je niet alleen een batterij in huis, maar een complete energiemanager die klaar is voor de toekomst.

De acteur die de belangrijke rol van Atreus gaat vertolken in de aankomende televisieserie gebaseerd op God of War is bekend. Het gaat om Callum Vinson.

Vinson heeft eerder rollen in The Night Agent en Chucky gehad. Met de bevestiging dat hij de rol van Atreus gaat spelen, zijn de acteurs voor de meeste belangrijke rollen in de aankomende Amazon Prime Video-serie bekend.

Afgelopen januari werd al onthuld wie de rol van hoofdpersonage Kratos gaat spelen. Dat is Ryan Hurst, bekend voor zijn rol in Sons of Anarchy. In de game God of War Ragnarök speelde hij daarnaast de rol van Thor. In de tv-serie zal hij dus van rol wisselen.

God of War volgt vader Kratos en zijn tienjarige zoon Atreus op hun reis om het as van hun vrouw en moeder Faye te verspreiden. Gedurende hun avonturen probeert Kratos zijn zoon te leren om een betere god te zijn, terwijl Atreus probeert van zijn vader een beter mens te maken.

Over de God of War-televisieserie

De tv-serie gaat in ieder geval de laatste twee hoofddelen in de God of War-reeks verfilmen, God of War (2018) en God of War Ragnarök. Die games, uitgekomen op PlayStation 4, PlayStation 5 en later ook pc, wisselden de Griekse setting uit de vroegere delen in voor een Noordse mythologische setting, inclusief de aanwezigheid van Noordse goden.

Sony en Amazon kondigden in 2022 aan dat er een tv-serie rondom God of War zou komen. Afgelopen jaar werd ook bekendgemaakt dat er minstens twee seizoenen gemaakt zullen worden. Voordat het zover is, moet natuurlijk het eerste seizoen uitkomen op Amazon Prime Video, maar dat kan nog wel even duren: de opnames gaan als het goed is in de loop van deze maand van start. Frederick E.O. Toye, bekend van onder andere The Boys en Fallout, zal de eerste twee afleveringen regisseren.

Andere acteurs in de serie

Eerder werd al bevestigd dat Max Parker - bekend van Boots en Vampire Academy - de rol van Heimdall gaat spelen en Teresa Palmer (Hacksaw Ridge) in de huid van Sif - Thors vrouw - kruipt. De rol van Odin wordt gespeeld door Mandy Patinkin - onder andere bekend van Homeland en the Princess Bride.

Ólafur Darri Ólafsson - die vooral bekend is voor zijn rol als Mr. Drummond in de Apple TV-serie Severance, gaat de rol van Thor vertolken. Alastair Duncan zal de rol van Mimir spelen. Hij speelde ook al de rol van Mimir in de God of War-games. Danny Woodburn en Jeff Gulka zullen de rollen van de broers Brok en Sindri vertolken.