Als je ooit je WordPress-site hebt laten testen door Google PageSpeed Insights, dan heeft Google je waarschijnlijk verteld dat je bronnen die de weergave blokkeren moet verwijderen van je WordPress-site. Of in het Engels: je hebt te maken met render-blocking resources. Sterker nog, het is misschien zelfs wel de precieze reden waarom je dit bericht nu aan het lezen bent.
Dit roept waarschijnlijk twee vragen op:
- Wat zijn render-blocking resources eigenlijk?
- Hoe verwijder je render-blocking resources in WordPress?
In dit bericht beantwoorden we beide vragen voor je. Dit is wat we in dit artikel gaan behandelen:
- Wat render-blocking resources zijn en waarom ze een probleem vormen
- Hoe repareer je render-blocking resources in het algemeen
- Hoe gebruik je gratis of betaalde plugins om het probleem op te lossen in WordPress
Kijk je liever de videoversie?
Wat betekent “Eliminate Render-Blocking Resources”?
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?
Wanneer een bezoeker op je site terechtkomt, begint zijn webbrowser de code van je site te lezen. De webbrowser begint daarbij bovenaan en leest vervolgens naar beneden. Van boven naar beneden dus.
Als je browser binnen dat proces een CSS– of JavaScript-bestand tegenkomt, moet het stoppen met “lezen”. De browser moet namelijk wachten totdat het bestand gedownload én 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.
Laten we een extreem voorbeeld erbij halen om te laten zien waarom dit proces problematisch kan zijn.
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).
Als we een hele ruwe lay-out voor de code van je site zouden moeten maken, ziet dat er ongeveer zo uit:
- Header meta
- Coolfooter.js
- HTML voor jouw above-the-fold content. Dit is alle content die een bezoeker meteen te zien krijgt (voordat ze überhaupt iets doen met de pagina).
En hierom is dit een probleem:
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.
Het eindresultaat? Het duurt langer om de HTML van de above-the-fold content weer te geven. Dit betekent dat je bezoeker jouw site als langzamer ervaart.
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.”
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.
Wat zijn render-blocking resources?
Wanneer we het over render-blocking resources hebben, dan hebben we het meestal over:
- CSS
- JavaScript
Het is belangrijk om te begrijpen dat niet alle CSS- en JavaScript-bestanden aan render-blocking doen.
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 heet (FOUC).
Zijn afbeeldingen render-blocking resources?
Nee, afbeeldingen zijn geen render-blocking resources. Het is natuurlijk sowieso belangrijk om je afbeeldingen te optimaliseren en hun bestandsgrootte te verkleinen, maar afgezien daarvan hoe je je geen zorgen te maken om je afbeeldingen.
Hoe te testen of je website render-blocking resources bevat
Om te zien of jouw site ook render-blocking resources bevat, kan je Google PageSpeed Insights gebruiken.
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 onder Opportunities:
Hoe verwijder je render-blocking resources?
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.
Het is echter wel nuttig om te begrijpen wat deze plugins achter de schermen doen wanneer ze de render-blocking resources verwijderen.
Hoe verwijder je render-blocking resources
Er zijn een aantal strategieën om render-blocking JavaScript te verwijderen. We behandelen deze in ons artikel over hoe je de melding ‘Defer Parsing of JavaScript’ oplost, maar hier zijn de belangrijkste methoden:
- Async – hiermee laat je de HTML-parser ( de browser van de bezoeker) 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).
- Defer – hiermee laat je de HTML-parser de JavaScript downloaden terwijl de rest van de HTML wordt geparseerd en wordt het uitvoeren van het script in kwestie totdat het parseren van de HTML helemaal is afgerond.
Deze illustratie van Growing with the Web laat uitstekend het verschil zien:
Het voordeel van het gebruik van defer is dat je scripts gegarandeerd worden uitgevoerd in de volgorde waarin ze in de code worden weergegeven.
Async volgt een andere aanpak. Dit kan soms tot problemen leiden, met name als je async 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-bronnen die geladen worden voordat jquery.js aan het document is toegevoegd.
Hoe verwijder je render-blocking CSS
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:
- Identificeer de stijlen die nodig zijn om de above-the-fold content weer te geven. Lever die stijlen inline met de HTML.
- 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).
- 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.
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 ingebouwd in het MyKinsta dashboard, waardoor klanten met een simpele klik automatische CSS en JavaScript minificatie kunnen inschakelen.
Als je de feature niet in je dashboard kunt vinden, ga je naar onze video Zo schakel je minificatie in binnen MyKinsta.
Hoe verwijder je render-blocking CSS- en JavaScript-resources met WordPress-plugins
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:
- Autoptimize + Async JavaScript (gratis)
- WP Rocket (betaald)
Ter referentie is dit hoe onze testsite eruitziet voordat we de levering van CSS en JavaScript optimaliseerden:
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 …
- je niet-geoptimaliseerde site test
- Een van de plugins in deze sectie activeert
- Je site opnieuw test
… 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.
Hoe verwijder je render-blocking resources met Autoptimize + Async JavaScript plugin
Autoptimize en Async JavaScript zijn twee verschillende gratis plugins van dezelfde ontwikkelaar. Samen helpen ze je de levering van zowel je CSS als JavaScript te optimaliseren.
Nadat je beide plugins hebt geïnstalleerd, ga je naar Instellingen → Async JavaScript en:
- Vink het vakje bovenaan aan dat zegt Enable Async JavaScript.
- Kies tussen Apply Async en Apply Defer in de box Quick Settings.
Als de Async optie problemen op je site veroorzaakt, dan raden we aan om Defer te proberen of jQuery uit te sluiten. Deze mogelijkheden vind je in de plugin.
Nadat je de plugin Async JavaScript hebt ingesteld, ga je naar Instellingen → Autoptimize en:
- Schakel het selectievakje in met Optimize JavaScript Code
- Schakel het vakje in met Optimize CSS Code
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.
Nadat je Autoptimize en Async JavaScript hebt ingesteld, slaagde onze testsite voor de PageSpeed Insights-test “Eliminate Render-Blocking Resources”:
Als je nog meer bestanden wil verwijderen, kan je Autoptimize gebruiken om handmatig je kritieke CSS inline te zetten. Hierbij is enig verstand van (ontwikkelings)zaken wel gewenst, dus we raden niet-ontwikkelaars af om hiermee te knoeien.
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.
Hoe render-blocking resources te verwijderen met WP Rocket
WP Rocket is een populaire premium WordPress performance- en caching plugin.
Normaal gesproken staan we geen cachingplugins toe op WordPress-sites die door Kinsta worden gehost, omdat wij op serverniveau al caching verzorgen via de snelle Nginx FastCGI-cache.
WP Rocket heeft echter speciale integratie met Kinsta, waardoor WP Rocket goed combineert met de caching op Kinsta. En dat is erg fijn, omdat WP Rocket veel meer voor de performance van je WordPress-site kan doen dan alleen caching. Denk aan het verwijderen van render-blocking CSS en JavaScript-resources op je WordPress-site.
Nadat je WP Rocket hebt geïnstalleerd en geactiveerd, ga je naar het tabblad File Optimization. Schakel vervolgens deze twee opties in:
- Optimize CSS delivery in de sectie CSS Files
- Load JavaScript deferred in de sectie JavaScript files. Ook kan je experimenteren met het uitschakelen van Safe Mode for jQuery. Kom je echter problemen tegen in de front-end van je site, dan is de eerste stap het opnieuw inschakelen van de Safe Mode voor jQuery. Dit is waarschijnlijk de boosdoener.
Na activatie van deze twee features, slaagde onze testsite voor “eliminate render-blocking resources” in PageSpeed Insights. WP Rocket slaagde er bovendien in om meer render-blocking resources te verwijderen dan onze Autoptimize/Async Javascript setup:
En dat is hoe je render-blocking resources van je WordPress-site verwijdert!
Samenvatting
Render-blocking resources vertragen de laadtijden van je WordPress-site, omdat ze de above-the-fold content van je site vertragen terwijl de browser bestanden downloadt die niet meteen nodig zijn.
Om te zorgen dat bezoekers het zichtbare gedeelte van je pagina sneller kunnen laden, moet je het laden van resources die niet meteen nodig zijn, uitstellen.
Om render-blocking resources te verwijderen op WordPress, kan je kant-en-klare plugins gebruiken.
Als gratis oplossing kan je de combinatie Autoptimize en Async JavaScript gebruiken, twee plugins van dezelfde ontwikkelaar.
Als je bereid bent om te betalen, kan je WP Rocket inzetten. Deze plugin heeft een speciale integratie met Kinsta en kan je helpen met vele andere WordPress-performancetweaks.
Heb je nog vragen over hoe je render-blocking resources verwijdert op WordPress? Laat het weten in de reacties!
Jon is de Chief Operating Officer bij Kinsta en is dagelijks betrokken bij de sales-, klantenservice- en technische ondersteuningsteams van Kinsta. Jon is een familieman. Dus als hij niet koortsachtig op de toetsen van zijn laptop aan het tikken is, is hij meestal een van zijn kinderen aan het helpen met het repareren van een fiets of het opzetten van Netflix voor een ongeduldige kleuter.
Ik heb de autoptimize plugin geïnstalleerd, maar mijn afbeeldingen verdwijnen als ik de optie: ‘JS-bestanden samenvoegen’ aanvink. Hoe los ik dit op?
Naomi, voor vragen over de autoptimize plugin kan je het beste terecht in het support forum: https://wordpress.org/support/plugin/autoptimize/
Is het ook mogelijk om die css en Java bestanden te verwijderen zonder plugin?
Sebastiaan, ja hoor dat is zeker mogelijk. Ik zou je alleen wel willen aanraden hier met een expert naar te kijken en niet zomaar op je live site te gaan sleutelen. Je kan op onze partnerpagina een geschikte partij vinden.
Dank je wel voor deze super verhelderende blog. Ik heb beide gratis plugins geinstalleerd en jullie instellingen opgevolgd en mijn website is enorm veel sneller geworden! top!