Heb je wel eens tijdens het uitvoeren van een prestatie-testtool op je WordPress-site de melding gekregen over het zogenoemde parseren van JavaScript in WordPress?
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 … Vandaar dat we in dit artikel uitleggen wat het precies betekent om het parseren van JavaScript uit te stellen én hoe je de wijzigingen aanbrengt aan je WordPress-site om dit te doen.
Kijk je liever de videoversie?
Wat betekent het uitstellen van parseren van JavaScript in WordPress?
Als je ooit je WordPress-site hebt gecheckt aan de hand van Google PageSpeed Insights, GTmetrix of andere tools die de paginasnelheid testen, dan heb je wellicht de melding gezien om de parsering van JavaScript uit te stellen.
Maar wat houdt dat eigenlijk in? En waarom is het zo’n belangrijke factor voor de prestaties van je site?
Wanneer iemand jouw WordPress-site 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 – parsing in het Engels.
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.
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), 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 je altijd aanraden om het parseren van JavaScript uit te stellen. Dus wat betekent dit uitstellen van het parseren precies?
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 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.
Door de laadtijden van je belangrijkste delen van je content te versnellen, maak je Google gelukkig en creëer je een betere, snellere ervaring voor je bezoekers.
Hoe je weet of uitstellen van parseren van JavaScript nodig is
Om te testen of je WordPress-site het parseren van JavaScript moet uitstellen, kun je deze via GTmetrix laten draaien.
GTmetrix geeft je een cijfer en daarnaast een lijst met specifieke scripts die moeten worden uitgesteld:
De verschillende methoden om parseren van JavaScript uit te stellen
Er zijn een paar manieren om het ontleden van JavaScript uit te stellen. Ten eerste zijn er twee attributen die je aan jouw scripts kunt toevoegen:
- Async
- Defer
Beide attributen laten de browsers van bezoekers JavaScript downloaden zonder de HTML-parsering te onderbreken. Tijdens Async 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.
Met Defer 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.
Deze grafiek van Growing with the Web legt het verschil goed uit:
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.
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.
Hoe je het parseren van JavaScript in WordPress kunt uitstellen (4 methoden)
Om het parsen van JavaScript in WordPress uit te stellen, zijn er drie manieren die je kunt proberen:
- Een plugin: er zijn enkele goede gratis en premium WordPress-plugins om JavaScript-parsering uit te stellen. We laten zien hoe dat werkt aan de hand van twee populaire plugins.
- De Varvy-methode: als je een beetje technisch onderlegd bent, kun je de code van je site direct bewerken en het stukje code van Varvy gebruiken.
- Het functions.php-bestand: je kunt een stukje code toevoegen aan het bestand functions.php van je child-thema om automatisch scripts uit te stellen.
Je kunt hierboven klikken om gelijk een methode naar voorkeur te bekijken, of je kunt alle technieken doorlezen om de methode te vinden die het beste bij jou past.
1. Gratis Async JavaScript-plugin
Async JavaScript is een gratis WordPress-plugin van Frank Goossens, dezelfde man achter de populaire plugin Autoptimize. Het biedt een eenvoudige manier om het parseren van JavaScript uit te stellen met behulp van async of defer.
Begin met het installeren en activeren van de gratis plugin van WordPress.org. Ga dan naar Instellingen → Async JavaScript om de plugin te configureren. Bovenaan kun je de functionaliteit van de plugin inschakelen en kiezen tussen async en defer. Vergeet niet dat:
- Async het JavaScript downloadt terwijl het nog steeds HTML parseert maar het pauzeert dan dit parseren om het JavaScript uit te voeren.
- Defer het JavaScript downloadt terwijl het nog steeds de parsering uitvoert en wacht met het uitvoeren ervan totdat parsering is voltooid.
In dezelfde plugin kan je ook kiezen hoe je met jQuery werkt. Veel thema’s en plugins zijn sterk afhankelijk van jQuery, dus als je probeert het parseren van de jQuery-scripts uit te stellen, kan dit kernfunctionaliteit van je site aantasten. De veiligste manier is om jQuery uit te sluiten, maar je kunt experimenteren met het uitstellen ervan. Zorg er wel voor dat je jouw site uitgebreid test.
Nog verder naar beneden kun je ook handmatig specifieke scripts toevoegen of uitsluiten van uitstel, inclusief een leuke gebruiksvriendelijke feature om je specifieke thema’s of plugins die actief zijn op je site te laten targeten:
2. Gebruik de WP Rocket-plugin
Hoewel wij de meeste caching-plugins bij Kinsta niet toestaan, staan we de WP Rocket-plugin wel toe, omdat deze een ingebouwde integratie bevat om goed om te gaan met Kinsta’s server-level caching.
Naast veel andere technieken om de prestaties te optimaliseren, kan WP Rocket je helpen met het uitstellen van het parseren van JavaScript via het tabblad File Optimization van het WP Rocket-dashboard. Kijk voor de optie Load JavaScript deferred in de sectie JavaScript Files.
We hebben onze kennis van effectief websitebeheer op schaal omgezet in een ebook en videocursus. Klik om De gids voor het beheren van 60+ WordPress sites te downloaden!
Net als de Async JavaScript-plugin kun je met WP Rocket ook jQuery uitsluiten om problemen met de content van je site te voorkomen:
3. Use Varvy’s Recommended Method (Code)
We hebben eerder aangegeven dat Patrick Sexton van Varvy aanraadt om een stukje code te gebruiken dat wacht met zowel het downloaden als uitvoeren van JavaScript totdat je site zijn eerste page load heeft voltooid.
Je kunt deze methode uitvoeren door de code snippet dat Varvy levert aan te passen en vervolgens het script aan je thema toe te voegen, gelijk vóór de afsluitende </body> tag.
Hier is de code van Varvy:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>Zorg ervoor dat je “defer.js” vervangt door de eigenlijke bestandsnaam/pad van het JavaScript-bestand dat je wilt uitstellen. Daarna kun je de wp_footer hook gebruiken om de code in te sluiten via het function.php-bestand van je child-thema.
Zo zet je de code van Varvy om in iets wat hierop lijkt:
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}4. JavaScript uitstellen via het bestand functions.php
Tot slot kun je ook het attribuut defer toevoegen aan je JavaScript-bestanden zonder dat je hiervoor een plugin nodig hebt. Dit doe je door de volgende coderegels toe te voegen aan jouw functions.php-bestand:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Deze coderegels zeggen in feite tegen WordPress om het attribuut defer toe te voegen aan al jouw JavaScript-bestanden, behalve jQuery.
Het is snel en makkelijk, maar het geeft je niet controle op detailniveau dat zoiets als de Async JavaScript plugin biedt.
Samenvatting
Het uitstellen van de parsering van JavaScript op je WordPress-site kan zorgen voor een belangrijke verbetering van je prestaties.
Als je eenmaal een van bovenstaande methoden hebt gebruikt om het parseren van JavaScript in WordPress uit te stellen, raden we je aan om twee dingen te doen:
- Test je site om er zeker van te zijn dat het uitstellen van bepaalde scripts niet belangrijke content bovenaan je pagina heeft aangetast. Ook dit kan vaak gebeuren met jQuery, dus daarom kun je met veel tools jQuery.js uitsluiten. Echter, het kan ook met andere scripts gebeuren.
- Check nogmaals je site met GTmetrix om er zeker van te zijn dat je site zo veel mogelijk scripts uitstelt. (Je krijgt misschien geen perfecte score als je jQuery uitsluit, maar je score zou wel moeten verbeteren.)
Heb je vragen over het uitstellen van parseren van JavaScript in WordPress? Vraag alles wat je wilt weten in de reacties hieronder!
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
Laat een reactie achter