Als het gaat om webprestaties, is het elimineren van render-blocking resources een cruciale factor. Render-blocking resources vertragen het renderen van een pagina en kunnen bijvoorbeeld JavaScript- en CSS-bestanden zijn. Deze resources moeten geladen worden voordat de browser de pagina kan weergeven. Dit omvat externe CSS- en JavaScript-bestanden en alles wat de browser in het begin kan vertragen bij het weergeven van de pagina.
Hoewel sommige render-blocking resources noodzakelijk zijn, zoals CSS-bestanden die ervoor zorgen dat je pagina er correct uitziet, kunnen andere worden geoptimaliseerd of verwijderd. Om de laadsnelheid van je website te maximaliseren, is het essentieel om render-blocking resources te identificeren en waar mogelijk te minimaliseren of te verwijderen. Je bent deze aanbeveling wellicht al tegengekomen tijdens het testen van je WordPress-site met de PageSpeed-tool .
Hoe identificeer je een render-blocking resource?
Wanneer je de prestaties van je website wilt verbeteren, kom je mogelijk de term 'render-blocking resources' tegen. Dit verwijst naar alle bronnen die geladen moeten worden voordat de browser de pagina kan weergeven. Meestal gaat het hierbij om externe CSS- en JavaScript-bestanden.
Je kunt de ontwikkelaarstools van Google Chrome gebruiken om een render-blocking resource te identificeren . Laad je website in Chrome en open vervolgens de ontwikkelaarstools. Klik op het tabblad 'Coverage' en zorg ervoor dat de optie 'Cache uitschakelen' is aangevinkt. Dit zorgt ervoor dat je de meest recente versie van je website ziet.
Vernieuw nu je website. De ontwikkelaarstools tonen je een lijst met alle bronnen die tijdens het laden van je pagina worden weergegeven. Zoek naar bronnen met een rode streep ernaast. Dit zijn de bronnen die het laden blokkeren.
3 manieren om een render-blokkerende bron in WordPress te elimineren?
In WordPress zijn er verschillende manieren om dit te doen.
Methode 1:
Een manier is om kritieke CSS inline , wat betekent dat de CSS-code direct in het HTML-bestand wordt opgenomen in plaats van een extern stylesheet aan te roepen. Dit kan effectief zijn voor kleine websites met slechts een paar pagina's, maar is niet praktisch voor grotere websites. Zodra je de render-blokkerende resources hebt geïdentificeerd, moet je ze verwijderen of inline plaatsen. Inline plaatsen betekent dat de resource direct in de code wordt opgenomen, zodat deze niet apart hoeft te worden geladen. Dit kan worden gedaan met JavaScript- en CSS-bestanden. Plugins zoals Flyingpress, WP Rocket, Swift Performance of LiteSpeed Cache kunnen je helpen dit te automatiseren.
Methode 2:
Een andere optie is om niet-essentiële resources pas na de initiële paginalading te laden. Dit kan met behulp van asynchrone laadtechnieken , zoals het laden van JavaScript-bestanden nadat het document is geparseerd of door gebruik te maken van `defer`-attributen.
Methode 3:
Tot slot kun je ook proberen het aantal benodigde resources per pagina te verminderen. Dit kan betekenen dat je meerdere CSS- of JavaScript-bestanden combineert tot één bestand, of dat je kleinere afbeeldingen gebruikt die sneller laden. Door het aantal render-blocking resources te verminderen, kun je de laadsnelheid van je website aanzienlijk verbeteren en je bezoekers een betere gebruikerservaring bieden. Als je meer tijd nodig hebt om vertrouwd te raken met code, kunnen plugins zoals Autoptimize en WPRocket dit
In sommige gevallen zijn render-blocking resources noodzakelijk voor de correcte werking van uw website. In die gevallen moet u een manier vinden om ze te optimaliseren, zodat ze sneller laden.
Samenvatting
Als je bovenstaande adviezen hebt opgevolgd, heb je nu de meeste, zo niet alle, render-blocking resources op je website verwijderd. Mocht je toch nog hulp nodig hebben, bekijk dan onze professionele WordPress-snelheidsoptimalisatieservice . Wij helpen je de prestaties en snelheid van je website te verbeteren, wat essentieel is voor een hoogwaardige en gebruiksvriendelijke website.
Houd er rekening mee dat andere factoren de prestaties van uw website kunnen beïnvloeden, zoals de reactietijd van de server, de bestandsgrootte en de codekwaliteit. Het elimineren van render-blocking resources is echter een uitstekende manier om de snelheid en prestaties van uw website te verbeteren en uw Core Web Vitals- score te verhogen.
