Als het gaat om webprestaties, is een van de kritieke factoren het elimineren van render-blocking resources. Render-blocking resources vertragen het renderen van een pagina en kunnen bijvoorbeeld JavaScript- en CSS-bestanden zijn. Deze bronnen moeten worden geladen voordat de browser kan beginnen met het renderen van de pagina. Hieronder vallen externe CSS- en JavaScript-bestanden en alles wat de browser kan vertragen bij het begin van de weergave van de pagina.
Hoewel sommige render-blocking resources noodzakelijk zijn, zoals CSS-bestanden die ervoor zorgen dat uw pagina er correct uitziet, kunnen andere geoptimaliseerd of geëlimineerd worden. Om de laadsnelheid van uw website te maximaliseren, is het essentieel om waar mogelijk render-blocking resources te identificeren en te minimaliseren of te elimineren. Deze aanbeveling is u wellicht opgevallen tijdens het testen van uw WordPress site met de PageSpeed tool.
Inhoud
SchakelHoe identificeer je een render-blocking bron?
Wanneer u de prestaties van uw website probeert te verbeteren, kunt u de term "render-blocking resources" tegenkomen. Dit verwijst naar alle bronnen die moeten worden geladen voordat de browser kan beginnen met het renderen van de pagina. Hieronder vallen doorgaans externe CSS- en JavaScript-bestanden.
U kunt de Google Chrome Developer Tools gebruiken om een renderblokkerende bron te identificeren. Laad uw website in Chrome en open vervolgens de Developer Tools. Klik op het tabblad Dekking en zorg ervoor dat de optie "Cache uitschakelen" is aangevinkt. Zo krijgt u de meest actuele versie van uw website te zien.
Herlaad nu uw website. De Developer Tools laten u een lijst zien van alle resources die worden geladen tijdens het renderen van uw pagina. Zoek naar bronnen met een rode lijn ernaast. Dit zijn de render-blocking resources.
3 Manieren om een render-blocking resource in WordPress te elimineren?
Er zijn een paar verschillende manieren om dit in WordPress te doen.
Methode 1:
Eén daarvan is het inline zetten van kritisch CSS, wat betekent dat de CSS-code rechtstreeks in het HTML-bestand wordt opgenomen in plaats van een extern stylesheet aan te roepen. Dit kan effectief zijn voor kleine websites met slechts enkele pagina's, maar is niet praktisch voor grotere websites. Zodra u de renderblokkerende bronnen hebt geïdentificeerd, moet u ze verwijderen of inlinen. Inlining betekent dat de bron direct in de code wordt opgenomen, zodat hij niet apart hoeft te worden geladen. Dit kan met JavaScript- en CSS-bestanden. Plugins als Flyingpress, WP Rocket, Swift Performance of LiteSpeed cache kunnen je helpen dit te automatiseren.
Methode 2:
Een andere optie is het laden van niet-kritische bronnen na het laden van de pagina. Dit kan worden gedaan met asynchrone laadtechnieken, zoals het laden van JavaScript-bestanden nadat het document is geparsed of met behulp van defer attributen.
Methode 3:
Ten slotte kunt u ook proberen het aantal bronnen dat op elke pagina nodig is te verminderen. Dit kan betekenen dat u meerdere CSS- of JavaScript-bestanden combineert tot één bestand of kleinere afbeeldingen gebruikt die sneller laden. Door het aantal render-blocking resources te verminderen, kunt u de laadsnelheid van uw website aanzienlijk verbeteren en uw bezoekers een betere gebruikerservaring bieden. Als u meer tijd nodig hebt om vertrouwd te raken met het werken met code, kunnen sommige plugins helpen dit proces te automatiseren, zoals Autoptimize, WPRocket enz.
In sommige gevallen kunnen renderblokkerende bronnen noodzakelijk zijn voor de goede werking van uw website. In deze gevallen moet u een manier vinden om ze te optimaliseren, zodat ze sneller laden.
Samenvatting
Als je het bovenstaande advies hebt opgevolgd, zou je nu de meeste, zo niet alle, renderblokkerende bronnen op je website moeten hebben geëlimineerd. Als je nog steeds hulp nodig hebt, bekijk dan onze professionele WordPress snelheidsoptimalisatie service. Wij zullen u helpen de prestaties en snelheid van uw website te verbeteren, wat essentieel is voor het maken van een hoogwaardige en gebruiksvriendelijke website.
Vergeet niet dat andere factoren de prestaties van uw website kunnen beïnvloeden, zoals de reactietijd van de server, de bestandsgrootte en de kwaliteit van de code. Het elimineren van renderblokkerende bronnen is echter een uitstekende aanpak om de snelheid en prestaties van uw website te verbeteren en de Core Web Vitals-cijfers te halen.