Waarom handgecodeerde sites sneller laden dan paginabouwers

Elke website is een reeks instructies die een browser moet uitvoeren voordat een bezoeker iets ziet. De vraag die bepaalt hoe snel je site aanvoelt is simpel: hoeveel van die instructies gaan over jouw inhoud, en hoeveel over het gereedschap dat de site heeft gemaakt?

Bij een handgecodeerde site gaat bijna alles over jouw inhoud. Bij een paginabouwer gaat een groot deel over de bouwer zelf.

Wat stuurt een paginabouwer eigenlijk naar de browser?

Een paginabouwer is een programma waarmee je blokken versleept en dat die blokken vervolgens in de browser van de bezoeker opnieuw opbouwt. Daarvoor moet het die opbouwmachinerie met elke pagina meesturen. In de praktijk betekent dat: een algemene stylesheet die elke lay-out moet kunnen dekken die het gereedschap kan maken, een JavaScript-runtime die de blokken weer in elkaar zet, en een stapel pluginscripts voor de formulieren, de sliders en de cookiemelding.

Niets daarvan is jouw tekst of jouw foto's. Het wordt allemaal gedownload, gelezen en uitgevoerd voordat je kop in beeld komt. Je ziet het op je eigen site in 2 minuten: open PageSpeed Insights, draai je homepage en lees de regels "Reduce unused JavaScript" en "Reduce unused CSS". Die twee getallen zijn de belasting die je betaalt.

Wat betekent handgecodeerd precies?

Handgecodeerd betekent dat iemand de HTML, de CSS en het kleine beetje JavaScript heeft geschreven dat de pagina nodig heeft, en dat er verder niets in het bestand staat. Er is geen runtime van een bouwer, want er is geen bouwer. De markup die je in de browser inspecteert is de markup die iemand heeft getypt.

Het betekent niet primitief, en het betekent niet dat je er zelf niets aan kunt veranderen. Onze builds zijn handgeschreven en komen toch met een CMS, dus de tekst, de beelden en de pagina's pas je zelf aan via een login in je browser. Wat een CMS je geeft staat in een apart artikel. Het handwerk gaat over wat de bezoeker downloadt. Het CMS gaat over wat jij beheert. Dat zijn twee losse vragen, en de meeste mensen krijgen te horen dat ze moeten kiezen.

Hoeveel scheelt het echt?

Google publiceert drie drempels, samen Core Web Vitals genoemd, en dat is het eerlijkste scorebord dat er is, omdat het voor iedereen hetzelfde is:

Interaction to Next Paint verving in maart 2024 First Input Delay als Core Web Vital, en dat is de meting waar paginabouwers het meeste moeite mee hebben, omdat hij meet hoe druk de main thread is. Een browser die een layout-engine uitvoert, is een browser die niet op een tik kan reageren.

Verspringende lay-out is de andere eerlijke verklikker. Een bouwer die elementen in JavaScript opmeet nadat de CSS geladen is, verschuift dingen op het moment dat je begint te lezen. Handgeschreven CSS legt de afmeting vast vóór de eerste tekening, dus er valt niets te verschuiven.

Is snelheid de enige reden?

Nee. Snelheid is de meetbare reden, dus die krijgt de aandacht, maar twee andere kosten je over 3 jaar meer.

Onderhoudsoppervlak. Een gemiddelde site op een paginabouwer draait een thema plus 15 tot 25 plugins, elk met een eigen releaseschema en elk in staat om de rest te breken. Elke update is een kleine gok die je toch moet nemen, want updates overslaan is hoe sites gehackt worden. Een handgecodeerde site heeft geen pluginlijst, dus er valt op dinsdagochtend niets te repareren.

Verplaatsbaarheid. Inhoud die vastzit in het eigen blokformaat van een bouwer, is inhoud die alleen die bouwer kan tonen. Wil je weg, dan bouw je opnieuw. Een handgecodeerde site is HTML, CSS en JavaScript in een repository, en die kan elke developer ter wereld openen en voortzetten. Dat bedoelen we als we zeggen dat de code van jou is: niet dat je een login krijgt, maar dat je iets krijgt waar een ander mee verder kan.

Stel elk bureau één vraag: als we morgen stoppen met betalen, wat hebben we dan nog? Het antwoord scheidt een website van een huurcontract.

Wanneer is een paginabouwer wél het goede antwoord?

Als er nooit iemand code voor je gaat schrijven. Een paginabouwer is echt beter dan geen website, en beter dan een handgecodeerde site die verstoft omdat niemand hem durft aan te raken. Is je plan om het in een weekend zelf te bouwen en er daarna constant aan te sleutelen, gebruik dan een bouwer en voel je er niet schuldig over.

Het houdt op het goede antwoord te zijn zodra de site echt geld gaat dragen. Zodra zoekverkeer, boekingen of verkopen van de pagina afhangen, worden de 1 tot 2 seconden die je weggeeft aan de runtime van de bouwer, plus de pluginstapel die je erbij krijgt, een doorlopende kostenpost in plaats van gemak.

Wat vraag je voordat je tekent?

1. Wat bezit ik precies aan het eind, en waar staat het?
2. Kan ik de tekst en de beelden zelf aanpassen zonder jullie te bellen? Laat de login zien.
3. Wat zijn de Core Web Vitals van de laatste 3 sites die jullie hebben opgeleverd? Vraag de URL's en meet zelf na.
4. Van hoeveel plugins of extensies gaat deze site afhankelijk zijn?
5. Als ik volgend jaar een andere developer inhuur, wat geef ik die persoon dan?

Een bureau dat die 5 vragen niet in één mail kan beantwoorden, beantwoordt een andere vraag dan die je stelde.