{"id":27152,"date":"2019-10-10T03:48:06","date_gmt":"2019-10-10T10:48:06","guid":{"rendered":"https:\/\/kinqsta.com\/?p=54531"},"modified":"2023-08-10T10:03:11","modified_gmt":"2023-08-10T08:03:11","slug":"defer-parsing-of-javascript","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/defer-parsing-of-javascript\/","title":{"rendered":"Hoe je de melding \u2018Defer Parsing of JavaScript\u2019 oplost in WordPress (4 methoden)"},"content":{"rendered":"

Heb je wel eens tijdens het uitvoeren van een prestatie-testtool<\/a> op je WordPress-site de melding gekregen over het zogenoemde parseren van JavaScript in WordPress?<\/p>\n

Het oplossen van deze melding kan een positief effect hebben op de laadtijd van je site, vooral bij mobiele bezoekers. Maar de melding is vaak wel wat lastig te ontcijferen \u2026 Vandaar dat we in dit artikel uitleggen wat het precies betekent om het parseren van JavaScript uit te stellen \u00e9n hoe je de wijzigingen aanbrengt aan je WordPress-site om dit te doen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Kijk je liever de videoversie<\/a>?<\/strong><\/p>\n<\/kinsta-video>\n

<\/a>Wat betekent het uitstellen van parseren van JavaScript in WordPress?<\/h2>\n

Als je ooit je WordPress-site hebt gecheckt aan de hand van Google PageSpeed Insights<\/a>, GTmetrix of andere tools die de paginasnelheid testen, dan heb je wellicht de melding gezien om de parsering van JavaScript uit te stellen.<\/p>\n

Maar wat houdt dat eigenlijk in? En waarom is het zo\u2019n belangrijke factor voor de prestaties van je site?<\/p>\n

Wanneer iemand jouw WordPress-site<\/a> bezoekt, dan levert de server van je site in principe de HTML-inhoud aan de browser van die bezoeker. De browser van de bezoeker begint dan bovenaan en gaat door de code heen om jouw site weer te geven. Vind deze tijdens dat proces – van boven naar beneden – ergens JavaScript, dan stopt deze het laden van de rest van de pagina totdat hij het JavaScript-bestand kan ophalen en ontleden \u2013 parsing<\/em> in het Engels.<\/p>\n

Dit gebeurt voor elk deeltje JavaScript dat de browser tegenkomt. En dat kan een negatief effect hebben op de laadtijden van je pagina, omdat de bezoeker naar een leeg scherm moet staren terwijl zijn browser al het JavaScript downloadt en parseert.<\/p>\n

Als een bepaald script niet nodig is voor de kernfunctie van je site (in ieder geval bij het laden van het eerste deel van je pagina<\/em>), dan wil je niet dat het in de weg staat van het laden van die kernfuncties. Dat is dan ook de reden dat de tools voor het testen van de paginasnelheid<\/a> je altijd aanraden om het parseren van JavaScript uit te stellen. Dus wat betekent dit uitstellen van het parseren precies?<\/p>\n

Het komt er in feite op neer dat jouw site tegen de browsers van de bezoekers gaat zeggen om te wachten met het downloaden en\/of parseren van JavaScript totdat<\/em> de kerninhoud van je site klaar is met laden. Op die manier kunnen bezoekers de pagina al zien en ermee aan de gang gaan, dus het negatieve effect van de wachttijden om JavaScript te downloaden en te ontleden zijn dan lang niet zo groot.<\/p>\n

Door de laadtijden van je belangrijkste delen van je content te versnellen<\/a>, maak je Google gelukkig en cre\u00eber je een betere, snellere ervaring voor je bezoekers.<\/p>\n

<\/a>Hoe je weet of uitstellen van parseren van JavaScript nodig is<\/h2>\n

Om te testen of je WordPress-site het parseren van JavaScript moet uitstellen, kun je deze via GTmetrix<\/a> laten draaien.<\/p>\n

GTmetrix geeft je een cijfer en daarnaast een lijst met specifieke scripts die moeten worden uitgesteld:<\/p>\n

\"Test
Test in GTmetrix voor het uitstellen van parseren van JavaScript<\/figcaption><\/figure>\n

<\/a>De verschillende methoden om parseren van JavaScript uit te stellen<\/h2>\n

Er zijn een paar manieren om het ontleden van JavaScript uit te stellen. Ten eerste zijn er twee attributen<\/a> die je aan jouw scripts kunt toevoegen:<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    Beide attributen laten de browsers van bezoekers JavaScript downloaden zonder de HTML-parsering te onderbreken. Tijdens Async <\/strong>wordt het parseren van HTML niet gepauzeerd om het JavaScript op te halen (dit wordt standaard wel gedaan), maar wordt het parseren van HTML wel gepauzeerd om het script uit te voeren wanneer deze is gedownload.<\/p>\n

    Met Defer<\/strong> downloaden de browsers van de bezoekers nog steeds de scripts terwijl ze de HTML ontleden, maar wachten ze met het parseren van het script todat de HTML-parsering is voltooid.<\/p>\n

    Deze grafiek van Growing with the Web<\/a> legt het verschil goed uit:<\/p>\n

    \"Visuele
    Visuele uitleg van async t.o.v. defer<\/figcaption><\/figure>\n

    Een andere optie, aanbevolen door Patrick Sexton van Varvy, gebruikt een script om een extern JavaScript-bestand pas op te roepen nadat de eerste pagina is geladen. Dit betekent dat de browsers van de bezoekers geen JavaScript zullen downloaden of uitvoeren totdat het eerste deel van de pagina is geladen.<\/p>\n

    Tot slot is er nog een andere manier die je zult tegenkomen: gewoon je JavaScript naar de onderkant van de pagina verplaatsen. Maar dit is geen goede oplossing; ondanks dat je pagina eerder zichtbaar zal zijn, zullen de browsers van de bezoekers nog steeds de pagina laden totdat alle scripts klaar zijn. Dit kan sommige bezoekers ervan weerhouden om op je pagina te blijven omdat ze denken dat de inhoud niet volledig is geladen.<\/p>\n

    <\/a>Hoe je het parseren van JavaScript in WordPress kunt uitstellen (4 methoden)<\/h2>\n

    Om het parsen van JavaScript in WordPress uit te stellen, zijn er drie manieren die je kunt proberen:<\/p>\n