JavaScript-tags plaatsen in je HTML: een complete gids
by 
Waar en hoe je je <script>-tags plaatst heeft meer invloed op de prestaties van je website dan je misschien denkt. Deze gids legt uit wat de beste aanpak is en welke valkuilen je moet vermijden.
Het toneel klaarzetten met <script> #
De eerste vuistregel: plaats <script>-tags in de <head> van je HTML. Zie het als het klaarzetten van het toneel voor een grote voorstelling. Je HTML is het theater, je <script>-tags zijn de technici. Door scripts in de head te declareren, zorg je dat alle benodigde tools beschikbaar zijn voordat de pagina zijn werk doet.
De kracht van 'async' #
Gebruik het async-attribuut als standaardbenadering voor <script>-tags. Het script laadt op de achtergrond, onafhankelijk van de rest van de webpagina — vergelijkbaar met een technicus die rekwisieten klaarzet terwijl de voorstelling al gaande is.
Uitvoering van async-scripts #
Scripts met het async-attribuut laden gelijktijdig met het parsen van het HTML-document. Zodra een async-script klaar is met laden, pauzeert het de HTML-parser zodat het script uitgevoerd kan worden.
Die uitvoeringsvolgorde is onvoorspelbaar: scripts worden uitgevoerd zodra ze klaar zijn, ongeacht hun volgorde in het HTML-document. Dat kan de laadtijden versnellen, maar problemen geven als scripts van elkaar afhankelijk zijn. Script B laadt sneller en wordt als eerste uitgevoerd, terwijl script A nog bezig is? Dan gaat er iets mis.
De timing van 'defer' #
Wat doe je met scripts die een volledig opgebouwd Document Object Model (DOM) nodig hebben? Daarvoor is het defer-attribuut bedoeld. Een gedeferd script wordt pas uitgevoerd nadat het HTML-document volledig geladen en geparsed is.
Uitvoering van defer-scripts #
Anders dan async bewaren scripts met het defer-attribuut hun uitvoeringsvolgorde op basis van hun positie in het HTML-document. Ze laden gelijktijdig met het parsen van de HTML, maar wachten met uitvoeren tot het document volledig geparsed is.
Elk acteur (script) wacht op zijn beurt — ook als hij eerder klaar is. Dat houdt de scriptafhankelijkheden intact.
defer is daardoor de veiligere keuze wanneer scripts van elkaar afhankelijk zijn. async kan laadtijden versnellen voor onafhankelijke scripts waarbij de volgorde er niet toe doet. Door dit verschil te begrijpen, ontwerp je een webpagina die zowel goed presteert als soepel werkt.
Render en parser blocking #
Scripts zonder async of defer — synchrone scripts — veroorzaken render-blocking of parser-blocking. Twee serieuze problemen voor de laadefficiëntie van je site.
Render-blocking #
Synchrone scripts in de <head> van het HTML-document zijn render-blocking. Wanneer de browser tijdens het parsen een <script>-tag tegenkomt, stopt hij en voert het script uit voordat hij verder gaat.
Dat blokkeert de opbouw van de DOM en vertraagt het renderen van de webpagina. Denk aan een volledige theaterrepeditie die stilgezet wordt omdat één acteur zijn tekst vergeten is. Het resultaat: merkbare vertragingen bij het laden, en een minder goede gebruikerservaring.
Parser-blocking #
Synchrone scripts in de <body> zijn parser-blocking. De werking lijkt op render-blocking: de HTML-parser stopt en voert het script uit voordat hij verder gaat.
Het effect is iets anders. Omdat de scripts in de body staan, wordt de initiële paginaweergave niet vertraagd. Maar de parser stopt wel met het opbouwen van de rest van de DOM, en het laden van opvolgende resources loopt vertraging op — zoals een bouwteam dat het werk onderbreekt bij elke levering.
Een goede balans vinden #
Synchrone scripts hebben hun plek, maar moeten verstandig worden ingezet. async en defer zorgen ervoor dat scripts op de achtergrond of na het parsen worden geladen, waardoor de pagina naadloos blijft werken.
Pas op voor het anti-pattern #
async en defer weglaten is willens en wetens het anti-pattern inlopen. Deze attributen zijn ontworpen om het laden en parsen van scripts te optimaliseren — gebruik ze.
De footer heroverwegen #
<script>-tags in de footer plaatsen is een gangbare maar verouderde praktijk. Het wordt tegenwoordig beschouwd als een anti-pattern. Houd je aan de moderne best practices.
De ongeschreven regel: vermijd synchroon laden van scripts van derden #
Er is één ongeschreven regel die cruciaal is voor de betrouwbaarheid van je website: vermijd het synchroon laden van scripts van derden. Laad je een third-party script synchroon, dan is de uptime van je website afhankelijk van de betrouwbaarheid van een externe partij. Houd de controle in eigen hand.
Kortom: denk na over waar je <script>-tags staan en gebruik async en defer op de juiste manier. Dat levert aanzienlijke prestatiewinst op.
