In dit bericht beantwoorden we beide vragen voor je. Dit is wat we in dit artikel gaan behandelen:<\/p>\n
- \n
- Wat render-blocking resources zijn en waarom ze een probleem vormen<\/a><\/li>\n
- Hoe repareer je render-blocking resources in het algemeen<\/em><\/a><\/li>\n
- Hoe gebruik je gratis of betaalde plugins om het probleem op te lossen in WordPress<\/a><\/li>\n<\/ul>\n
Kijk je liever de videoversie<\/a>?<\/h3>\n
<\/kinsta-video><\/p>\n Wat betekent “Eliminate Render-Blocking Resources”?<\/h2>\n
Om te begrijpen wat render-blocking resources zijn en waarom ze een negatieve impact hebben op de laadtijden van je site, moeten we beginnen met de basics. Hoe geeft een webbrowser een webpagina weer?<\/p>\n
Wanneer een bezoeker op je site terechtkomt, begint zijn webbrowser de code van je site te lezen<\/a>. De webbrowser begint daarbij bovenaan en leest vervolgens naar beneden. Van boven naar beneden dus.<\/p>\n
Als je browser binnen dat proces een CSS<\/a>– of JavaScript-bestand tegenkomt, moet het stoppen<\/strong> met “lezen”. De browser moet namelijk wachten totdat het bestand gedownload \u00e9n verwerkt is. De tijd dat je browser “pauzeert” om te downloaden en de code te verwerken, kan natuurlijk aan iets veel productievers worden besteed. Denk hierbij aan het laden van dat deel van de pagina waar de (ongeduldige) bezoeker naar zit te kijken.<\/p>\n
Laten we een extreem voorbeeld erbij halen om te laten zien waarom dit proces problematisch kan zijn.<\/p>\n
Stel dat je een heel leuk JavaScript-effect in de footer van je site hebt staan. Het wordt aangedreven door “coolfooter.js’, een script waar boven in de code van je site al naar wordt verwezen (dit terwijl het coole effect pas te zien is als de bezoeker helemaal naar beneden is gescrold<\/em>).<\/p>\n
Als we een hele<\/em> ruwe lay-out voor de code van je site zouden moeten maken, ziet dat er ongeveer zo uit:<\/p>\n
- \n
- Header meta<\/li>\n
- Coolfooter.js<\/li>\n
- HTML voor jouw above-the-fold content. Dit is alle content die een bezoeker meteen te zien krijgt (voordat ze \u00fcberhaupt iets doen met de pagina<\/em>).<\/li>\n<\/ul>\n
En hierom is dit een probleem:<\/p>\n
Wanneer een bezoeker op je site terechtkomt, begint zijn browser van boven naar beneden te lezen. Dat betekent dat deze moet wachten totdat het bestand coolfooter.js is gedownload en geladen, voordat het de above-the-fold content van je site kan laden en weergeven.<\/p>\n
Het eindresultaat? Het duurt langer om de HTML van de above-the-fold content weer te geven.<\/strong> Dit betekent dat je bezoeker jouw site als langzamer ervaart.<\/p>\n
Wanneer Google tegen je zegt dat je deze render-blocking resources moet verwijderen, zegt het in feite: “stop eens met het laden van onnodige resources aan het begin van je code, waardoor je bezoeker langer moet wachten om het zichtbare deel van je content te zien.”<\/p>\n
Gelukkig gaan wij in dit artikel tips met je delen, waardoor je het laden van bepaalde CSS- en JavaScript-resources kan uitstellen, totdat het zichtbare deel van je pagina is geladen.<\/p>\n
Wat zijn render-blocking resources?<\/h3>\n
Wanneer we het over render-blocking resources hebben, dan hebben we het meestal over:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Het is belangrijk om te begrijpen dat niet alle CSS- en JavaScript-bestanden aan render-blocking doen<\/strong>.<\/p>\n
Zo is het van cruciaal belang om je kritieke CSS bovenin de code te laden, anders krijgen bezoekers iets te zien wat ook wel een flasy of unstyled content<\/a> heet (FOUC).<\/p>\n
Zijn afbeeldingen render-blocking resources?<\/h3>\n
Nee, afbeeldingen zijn geen render-blocking resources<\/strong>. Het is natuurlijk sowieso belangrijk om je afbeeldingen te optimaliseren<\/a> en hun bestandsgrootte te verkleinen, maar afgezien daarvan hoe je je geen zorgen te maken om je afbeeldingen.<\/p>\n
Hoe te testen of je website render-blocking resources bevat<\/h2>\n
Om te zien of jouw site ook render-blocking resources bevat, kan je Google PageSpeed Insights<\/a> gebruiken.<\/p>\n
Het enige wat je doet, is de URL invoeren die je wil testen. Mocht je problemen hebben met render-blocking resources, dan geeft PageSpeed Insights elke afzonderlijke resource weer in de sectie Eliminate render-blocking resources<\/strong> onder Opportunities<\/strong>:<\/p>\n
![\"Het](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/12\/eliminate-render-blocking-resources-wordpress-1-1.jpg\")
Het bericht Eliminate Render-Blocking Resources in PageSpeed Insights<\/figcaption><\/figure>\n Hoe verwijder je render-blocking resources?<\/h2>\n
Maak je geen zorgen, je hoeft dit niet handmatig te doen. In de volgende sectie behandelen we de WordPress-plugins die je kunnen helpen om render-blocking resources te verwijderen.<\/p>\n
Het is echter wel nuttig om te begrijpen wat deze plugins achter de schermen doen wanneer ze de render-blocking resources verwijderen.<\/p>\n
Hoe verwijder je render-blocking resources<\/h3>\n
Er zijn een aantal strategie\u00ebn om render-blocking JavaScript te verwijderen. We behandelen deze in ons artikel over hoe je de melding \u2018Defer Parsing of JavaScript\u2019 oplost<\/a>, maar hier zijn de belangrijkste methoden:<\/p>\n
- \n
- Async<\/strong> \u2013 hiermee laat je de HTML-parser ( de browser van de bezoeker<\/em>) de JavaScript downloaden, terwijl de rest van de HTML nog steeds wordt geparseerd. Met andere woorden, terwijl het bestand wordt gedownload, gaat de browser door met parseren. De HTML-parser wordt echter wel gepauzeerd om het script uit te voeren (nadat het downloaden ervan is voltooid).<\/li>\n
- Defer <\/strong>– hiermee laat je de HTML-parser de JavaScript downloaden terwijl de rest van de HTML wordt geparseerd en<\/strong> wordt het uitvoeren van het script in kwestie totdat het parseren van de HTML helemaal is afgerond.<\/li>\n<\/ul>\n
Deze illustratie van Growing with the Web<\/a> laat uitstekend het verschil zien:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/08\/javascript-async-vs-defer-3.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n Het voordeel van het gebruik van defer<\/strong> is dat je scripts gegarandeerd worden uitgevoerd in de volgorde waarin ze in de code worden weergegeven.<\/p>\n
Async<\/strong> volgt een andere aanpak. Dit kan soms tot problemen leiden, met name als je async<\/strong> op alle JavaScript-resources toepast. In sommige gevallen kan dit voor foutmeldingen zorgen, als bepaalde resources afhankelijk zijn van resources die eerder in het documenten staan. Het meest voorkomende probleem dat async veroorzaakt, zijn gebroken jQuery<\/a>-bronnen die geladen worden voordat jquery.js aan het document is toegevoegd.<\/p>\n
Hoe verwijder je render-blocking CSS<\/h3>\n
Het verwijderen van render-blocking CSS kan iets lastiger zijn. Je mag namelijk geen CSS uitstellen die nodig is om de above-the-fold content weer te geven. De ideale opstelling is dus:<\/p>\n
- \n
- Identificeer de stijlen die nodig zijn om de above-the-fold content weer te geven. Lever die stijlen inline met de HTML<\/a>.<\/li>\n
- Gebruik de media-attributen op de link-elementen die CSS-bestanden ophalen om CSS-resources te identificeren die voorwaardelijk zijn (dat wil zeggen, alleen nodig voor specifieke apparaten of situaties).<\/li>\n
- De resterende CSS-resources moeten asynchroon worden geladen. Dit wordt meestal gedaan door ze toe te voegen met deferred of asynchrone JavaScript. Snap je het nog? Als je er weinig van begrijpt is dat niet heel vreemd. We begeven ons inmiddels op het werkterrein van de front-end engineer. Dat komt goed uit als je toevallig een front-end engineer bent, maar de meeste mensen zijn dat niet. Het goede nieuws is dat dit artikel over WordPress in het algemeen gaat en dat je het aantal JS- en CSS-bronnen die je site vertragen met de juiste plugins kan verwijderen – of op zijn minst aanzienlijk kan verminderen.<\/li>\n<\/ul>\n
Voor een andere snelle en gemakkelijke manier om je algehele optimalisatie een boost te geven, kun je ook overwegen om je code te verkleinen. Kinsta heeft een codeminificatiefeature<\/a> ingebouwd in het MyKinsta dashboard<\/a>, waardoor klanten met een simpele klik automatische CSS en JavaScript minificatie kunnen inschakelen.<\/p>\n
Als je de feature niet in je dashboard kunt vinden, ga je naar onze video Zo schakel je minificatie in binnen MyKinsta<\/a>.<\/p>\n
Hoe verwijder je render-blocking CSS- en JavaScript-resources met WordPress-plugins<\/h2>\n
Om te demonstreren hoe je render-blocking resources kan verwijderen op WordPress, hebben we een eenvoudige testsite opgezet met render-blocking CSS en JavaScript. Vervolgens laten we zien hoe met twee verschillende plugins de render-blocking CSS en JavaScript verwijdert:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratis)<\/li>\n
- WP Rocket (betaald)<\/li>\n<\/ul>\n
Ter referentie is dit hoe onze testsite eruitziet voordat we de levering van CSS<\/a> en JavaScript optimaliseerden:<\/p>\n
Het bericht Eliminate Render-Blocking Resources in PageSpeed Insights<\/figcaption><\/figure>\n Als je de effectiviteit van wijzigingen wil testen met Google PageSpeed Insights, houdt er dan wel rekening mee dat Google de testresultaten enkele minuten in de cache bewaart. Dit betekent dat als je snel …<\/p>\n
- \n
- je niet-geoptimaliseerde site test<\/li>\n
- Een van de plugins in deze sectie activeert<\/li>\n
- Je site opnieuw test<\/li>\n<\/ol>\n
… je dan nog steeds de resultaten van je niet-geoptimaliseerde site ziet, totdat Google de cache opnieuw instelt. Wacht dus een paar minuten totdat Google de cache heeft gewist, voordat je denkt dat de plugin niet werkt.<\/p>\n
Hoe verwijder je render-blocking resources met Autoptimize + Async JavaScript plugin<\/h3>\n
Autoptimize<\/a> en Async JavaScript<\/a> zijn twee verschillende gratis plugins van dezelfde ontwikkelaar. Samen helpen ze je de levering van zowel je CSS als JavaScript te optimaliseren.<\/p>\n
Nadat je beide plugins hebt ge\u00efnstalleerd<\/a>, ga je naar Instellingen \u2192 Async JavaScript<\/strong> en:<\/p>\n
- \n
- Vink het vakje bovenaan aan dat zegt Enable Async JavaScript<\/strong>.<\/li>\n
- Kies tussen Apply Async<\/strong> en Apply Defer<\/strong> in de box Quick Settings<\/strong>.<\/li>\n<\/ul>\n
![\"Hoe](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/12\/eliminate-render-blocking-resources-wordpress-2.jpg\")
Hoe de Async JavaScript plugin in te stellen<\/figcaption><\/figure>\n Als de Async<\/strong> optie problemen op je site veroorzaakt, dan raden we aan om Defer<\/strong> te proberen of jQuery<\/strong> uit te sluiten. Deze mogelijkheden vind je in de plugin.<\/p>\n
Nadat je de plugin Async JavaScript hebt ingesteld, ga je naar Instellingen \u2192 Autoptimize<\/strong> en:<\/p>\n
- \n
- Schakel het selectievakje in met Optimize JavaScript Code<\/strong><\/li>\n
- Schakel het vakje in met Optimize CSS Code<\/strong><\/li>\n<\/ul>\n
![\"Hoe](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/12\/eliminate-render-blocking-resources-wordpress-3.jpg\")
Hoe de Autoptimize plugin in te stellen<\/figcaption><\/figure>\n Als je een gevorderde gebruiker bent, kan je gerust spelen met de aanvullende JavaScript- en CSS-optimalisatie-instellingen, maar voor de meeste gebruikers volstaan de standaardinstellingen.<\/p>\n
Nadat je Autoptimize<\/a> en Async JavaScript hebt ingesteld, slaagde onze testsite voor de PageSpeed Insights-test “Eliminate Render-Blocking Resources”:<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/12\/eliminate-render-blocking-resources-wordpress-4.jpg\")
PageSpeed Insights resultaten met Autoptimize en Async JavaScript<\/figcaption><\/figure>\n Als je nog meer bestanden wil verwijderen, kan je Autoptimize gebruiken om handmatig je kritieke CSS inline te zetten<\/a>. Hierbij is enig verstand van (ontwikkelings)zaken wel gewenst, dus we raden niet-ontwikkelaars af om hiermee te knoeien.<\/p>\n
Als je de plugins afzonderlijk wil gebruiken, kan dit ook. Maar aangezien beide plugins van dezelfde ontwikkelaar komen en zijn gebouwd om met elkaar te worden gecombineerd, is de beste aanpak voor de meeste sites om ze samen te gebruiken.<\/p>\n
Hoe render-blocking resources te verwijderen met WP Rocket<\/h3>\n
WP Rocket<\/a> is een populaire premium WordPress performance- en caching plugin.<\/p>\n
Normaal gesproken staan we geen cachingplugins<\/a> toe op WordPress-sites die door Kinsta worden gehost, omdat wij op serverniveau al caching verzorgen<\/a> via de snelle Nginx FastCGI-cache.<\/p>\n
- Schakel het vakje in met Optimize CSS Code<\/strong><\/li>\n<\/ul>\n
- Kies tussen Apply Async<\/strong> en Apply Defer<\/strong> in de box Quick Settings<\/strong>.<\/li>\n<\/ul>\n
- Vink het vakje bovenaan aan dat zegt Enable Async JavaScript<\/strong>.<\/li>\n
- Defer <\/strong>– hiermee laat je de HTML-parser de JavaScript downloaden terwijl de rest van de HTML wordt geparseerd en<\/strong> wordt het uitvoeren van het script in kwestie totdat het parseren van de HTML helemaal is afgerond.<\/li>\n<\/ul>\n
- Async<\/strong> \u2013 hiermee laat je de HTML-parser ( de browser van de bezoeker<\/em>) de JavaScript downloaden, terwijl de rest van de HTML nog steeds wordt geparseerd. Met andere woorden, terwijl het bestand wordt gedownload, gaat de browser door met parseren. De HTML-parser wordt echter wel gepauzeerd om het script uit te voeren (nadat het downloaden ervan is voltooid).<\/li>\n
- Hoe repareer je render-blocking resources in het algemeen<\/em><\/a><\/li>\n
![\"Configuratieproces](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"PageSpeed](\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2019\/12\/eliminate-render-blocking-resources-wordpress-6.jpg\")