Een website bestaat uit drie lagen. HTML zegt wat iets is, CSS zegt hoe het eruitziet, en JavaScript zegt wat er gebeurt. Die derde laag is de meest krachtige en tegelijk de meest kostbare. Elke regel wordt uitgevoerd op het apparaat van je bezoeker, en niet op jouw server.
Daar zit het spanningsveld. Wat je toevoegt aan gemak, betaal je in laadtijd.
Ik zie dat het vaakst bij sites die jarenlang gegroeid zijn. Er is een slider bijgekomen, een pop-up, een chatvenster en een animatie bij het scrollen.
Los is elk onderdeel te verdedigen. Samen kost het je bezoeker seconden op een telefoon. Bij een opruimronde begin ik daarom altijd met de vraag welke scripts er nog echt iets doen.
JavaScript bepaalt wat er gebeurt, niet hoe het eruitziet.
Wat is JavaScript?
JavaScript is de programmeertaal die je website interactief maakt. Hij draait in de browser van je bezoeker.
Denk aan een menu dat openklapt of een formulier dat je e-mailadres controleert. Of een filter dat producten toont zonder de pagina te herladen. Al die interactie komt hieruit.
Hoe het samenwerkt
Het past de structuur van je pagina aan terwijl je hem gebruikt. Die structuur heet de DOM.
Daarom kan wat je op je scherm ziet afwijken van wat er in de broncode staat. De broncode is het beginpunt, niet de actuele situatie.
Wat het kost
Meer dan de andere twee lagen. Een script moet worden opgehaald, gelezen en uitgevoerd voordat het iets doet.
Het grootste probleem is het blokkeren van de opbouw. Staat een script op de verkeerde plek, dan stopt de browser met tekenen tot het binnen is. Je bezoeker kijkt dan naar een lege pagina.
Wat ik daaraan doe
Scripts pas laden nadat de pagina is opgebouwd.
Onderdelen pas laden als ze in beeld komen.
Bij het opschonen van scripts alles weghalen wat niets meer doet.
Externe scripts beperken tot wat echt nodig is.
Die derde levert vaak het meeste op. Bij een oudere site draaien vaak nog scripts van plugins die er al lang af zijn. Meer daarover lees je bij pagespeed.
Leest Google het?
Tegenwoordig meestal wel, maar niet meteen en niet altijd. Google haalt eerst je verzonden pagina op. Daarna zet hij hem in een wachtrij om de scripts uit te voeren.
Andere zoekmachines en veel AI-assistenten doen die tweede ronde helemaal niet. Die zien alleen wat er direct wordt verstuurd.
Mijn regel is daarom vast. De kern van je inhoud staat in de verzonden pagina. dynamische inhoud mag aanvullen, maar niet dragen.
Werkt je site zonder?
Dat is een goede test die je zelf kunt doen. Zet scripts uit in je browser en herlaad je pagina.
Blijft je tekst leesbaar, je menu bruikbaar en je telefoonnummer klikbaar? Dan staat je basis goed. Valt de halve site weg, dan leunt hij te zwaar op die derde laag.
Dat is niet alleen een risico bij een storing. Het raakt ook bezoekers met een trage verbinding en mensen die hulpsoftware gebruiken. Meer daarover lees je bij frontend.
Heb je het nodig?
Voor een eenvoudige bedrijfssite bijna niet. Een menu en een formulier werken prima met HTML en CSS.
Gebruik het waar het echt iets toevoegt, en niet omdat het kan.
Wat tegenwoordig zonder kan
Een uitklapmenu, een accordeon en eenvoudige formuliercontrole werken inmiddels met gewone opmaak. Vijf jaar geleden was daar nog een script voor nodig.
Nodig blijft het voor filters en zoeken zonder herladen. Ook voor een boekingssysteem of een winkelwagen die live bijwerkt.
Vraag wat er wordt ingeladen
Vraag bij een nieuwe site welke scripts er precies meekomen en waarvoor. Kan je bouwer dat niet uitleggen, dan zit er waarschijnlijk meer in dan nodig is.
Dat is geen wantrouwen. Het is dezelfde vraag die je bij een offerte voor een verbouwing ook zou stellen. Dat is de kortste samenvatting van dit hele onderwerp.
Meer vragen over JavaScript
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is JavaScript?
Wat is het verschil tussen JavaScript en HTML?
Vertraagt JavaScript je website?
Kan Google JavaScript lezen?
Werkt mijn website zonder JavaScript?
Heb je JavaScript nodig voor een eenvoudige website?
Wat is JavaScript?
Meer dan de andere twee lagen. Een script moet worden opgehaald, gelezen en uitgevoerd voordat het iets doet.
Het grootste probleem is blokkeren. Staat een script op de verkeerde plek in je pagina, dan stopt de browser met tekenen tot het binnen is. Je bezoeker kijkt dan naar een lege pagina.
Ik los dat op met vier maatregelen. Scripts pas laden nadat de pagina is opgebouwd. Onderdelen pas laden als ze in beeld komen.
Alles weghalen wat niets meer doet. En externe scripts beperken tot wat echt nodig is.
Die derde levert vaak het meeste op. Bij een site van vijf jaar oud draaien er regelmatig scripts van plugins die er al lang af zijn. Meer daarover lees je bij pagespeed.
Kijk in de ontwikkelaarstools van je browser naar wat er wordt ingeladen. Sorteer op grootte en je ziet binnen tien seconden welke scripts je pagina zwaar maken. Vraag je bouwer om die lijst een keer met je door te nemen.
Vertraagt JavaScript je website?
JavaScript is de programmeertaal die je website interactief maakt. Hij draait in de browser van je bezoeker en niet op jouw server.
Een website bestaat uit drie lagen. HTML zegt wat iets is, CSS zegt hoe het eruitziet, en JavaScript zegt wat er gebeurt.
Denk aan een menu dat openklapt, een formulier dat controleert of je e-mailadres klopt, of een filter dat producten toont zonder de pagina te herladen.
Het past de structuur van je pagina aan terwijl je hem gebruikt. Daarom kan wat je op je scherm ziet afwijken van wat er in de broncode staat.
Die derde laag is de meest krachtige en tegelijk de meest kostbare. Elke regel wordt uitgevoerd op het apparaat van je bezoeker. Meer over die structuur lees je bij DOM.
Je hoeft dit niet te kunnen schrijven om er iets aan te hebben. Het helpt al als je weet dat deze laag apart bestaat en dat hij op het apparaat van je bezoeker draait.
Kan Google JavaScript lezen?
Tegenwoordig meestal wel, maar niet meteen en niet altijd. Daar zit het risico.
Google haalt eerst je verzonden pagina op. Daarna zet hij die in een wachtrij om ook de scripts uit te voeren. Die tweede ronde kan even duren en gaat niet altijd goed.
Andere zoekmachines doen die tweede ronde vaak helemaal niet. Datzelfde geldt voor veel AI-assistenten, en die worden steeds belangrijker als bron van bezoek.
Mijn regel is daarom vast. De kern van je inhoud staat in de verzonden pagina. Scripts mogen aanvullen, verrijken en verfraaien, maar niet dragen.
Bij een productlijst betekent dat: de producten staan er al, de filters worden erna toegevoegd. Zo bedien je iedereen.
Test dit door je belangrijkste tekst te zoeken in de verzonden broncode. Vind je hem daar niet, dan is dat een aandachtspunt voor je vindbaarheid. Doe dat met je belangrijkste dienstenpagina en niet met je homepage. Zoek daarvoor op een zin die alleen op die pagina voorkomt.
Werkt mijn website zonder JavaScript?
Dat is een goede test die je zelf kunt doen, en hij kost je twee minuten.
Zet scripts uit in je browserinstellingen en herlaad je pagina. Blijft je tekst leesbaar, je menu bruikbaar en je telefoonnummer klikbaar?
Dan staat je basis goed. Valt de halve site weg, dan leunt hij te zwaar op die derde laag.
Dat is niet alleen een risico bij een storing. Het raakt ook bezoekers met een trage verbinding, waarbij scripts soms niet volledig binnenkomen.
En het raakt mensen die hulpsoftware gebruiken. Een menu dat alleen met een script werkt, is voor hen vaak onbruikbaar. Meer daarover lees je bij frontend.
Doe die test een keer per jaar en na elke grote wijziging. Een nieuwe plugin kan zomaar inhoud verplaatsen naar de tweede ronde zonder dat je het merkt. Zet die controle bij je andere jaarlijkse onderhoudsmomenten in de agenda. Noteer de uitkomst, dan zie je volgend jaar of er iets is verschoven.
Heb je JavaScript nodig voor een eenvoudige website?
Voor een gewone bedrijfssite bijna niet. Dat verrast mensen, want er wordt standaard van alles ingeladen.
Een menu dat openklapt kan tegenwoordig met CSS en gewone HTML. Datzelfde geldt voor een accordeon en voor eenvoudige formuliercontrole.
Waar je het wel voor nodig hebt: filters, zoeken zonder herladen, een boekingssysteem of een winkelwagen die live bijwerkt.
De vuistregel is simpel. Gebruik het waar het echt iets toevoegt, en niet omdat het kan.
Vraag bij een nieuwe site dus wat er precies wordt ingeladen en waarvoor. Kan je bouwer dat niet uitleggen, dan zit er waarschijnlijk meer in dan nodig is.
Vraag bij een offerte wat er precies wordt ingeladen en waarvoor. Dat is dezelfde vraag die je bij een verbouwing ook zou stellen, en hij is even redelijk. Een goede bouwer legt dat zonder aarzelen uit, want hij heeft de keuze bewust gemaakt. Vraag het ook als je site al bestaat, want opruimen kan altijd nog.
Laadt jouw website traag terwijl er weinig op staat? Stuur me de link via het formulier hieronder. Ik kijk welke scripts er worden ingeladen en of ze allemaal nog iets doen. Bij oudere sites valt daar vaak de helft weg te halen. Vermeld je plaats, dan weet ik meteen waar je zit.
