Gesteund door Awesome Motive.
Lees meer op onze Seahawk Blog.

Hoe Render-blocking bronnen verwijderen in WordPress?

Bijgewerkt op
Geschreven door: auteursafbeelding Komal Bothra
auteursafbeelding Komal Bothra
Hoe-Render-blokkering-Resources-  te elimineren

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.

Hoe 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.

Verwante berichten

Ben je op zoek naar de beste AI websitebouwers? Je zoektocht eindigt hier! Of je nu

Ever felt like starting fresh with your WordPress site? Sometimes, you need a clean slate.

Ever shared a blog post on Facebook or Twitter only to find that the preview

Komal Bothra July 11, 2024

How to Add & Update Social Image Previews In WordPress

Ever shared a blog post on Facebook or Twitter only to find that the preview

WordPress
Komal Bothra July 10, 2024

Page Speed Optimization Guide for WordPress

A slow website is a silent business killer. Seriously, who has the patience for a

WordPress
Komal Bothra 9 juli 2024

5 redenen waarom Schema Markup belangrijk is voor SEO

Schema markup heeft een invloedrijke evolutie doorgemaakt als we het hebben over SEO. Weg

SEO

Aan de slag met Seahawk

Meld je aan in onze app om onze prijzen te bekijken en kortingen te krijgen.