Als het gaat om webprestaties, is een van de kritieke factoren het elimineren van renderblokkeerbronnen. Render-blokkeerbronnen vertragen de weergave van een pagina en kunnen dingen bevatten zoals JavaScript- en CSS-bestanden. Deze bronnen moeten worden geladen voordat de browser de pagina kan weergeven. Dit omvat externe CSS- en JavaScript -bestanden en al het andere dat de browser in het begin zou kunnen vertragen om de pagina weer te geven.
Hoewel sommige render-blokkerende bronnen nodig zijn, zoals CSS- bestanden die ervoor zorgen dat uw pagina er correct uitziet, kunnen andere worden geoptimaliseerd of geëlimineerd. Om de laadsnelheid van uw website te maximaliseren, is het essentieel om waar mogelijk renderblokkeerbronnen te identificeren en te minimaliseren of te elimineren. Je hebt deze aanbeveling opgemerkt tijdens het testen van de WordPress -site op PageSpeed Tool .
Hoe identificeer je een render-blokkerende bron?
Wanneer u probeert de prestaties van uw website te verbeteren, kunt u de term 'render-blokkerende bronnen' tegenkomen. Dit verwijst naar alle bronnen die moeten worden geladen voordat de browser de pagina kan weergeven. Meestal omvat dit externe CSS- en JavaScript -bestanden.
U kunt de Google Chrome-ontwikkelaarstools gebruiken om een render-blokkerende bron te identificeren . Laad uw website in Chrome en open vervolgens de ontwikkelaarstools. Klik op het tabblad Dekking en zorg er vervolgens voor dat de optie "Cache uitschakelen" is aangevinkt. Dit zorgt ervoor dat u de meest actuele versie van uw website ziet.
Laad nu uw website opnieuw. De ontwikkelaarstools toont u een lijst met alle bronnen die zijn geladen terwijl uw pagina wordt weergegeven. Zoek naar bronnen met een rode lijn naast hen. Dit zijn de renderblokkerende middelen.
3 manieren om een render-blokkerende bron in WordPress te elimineren?
Er zijn een paar verschillende manieren om dit in WordPress te doen.
Methode 1:
Een daarvan is om kritieke CSS te inlijnen , wat betekent dat de CSS -code rechtstreeks in het HTML -bestand wordt ingesloten in plaats van een externe stylesheet aan te roepen. Dit kan effectief zijn voor kleine websites met slechts enkele pagina's, maar is niet praktisch voor grotere websites. Nadat u de renderblokkeerbronnen hebt geïdentificeerd, moet u ze verwijderen of inlijnen. Inlining betekent dat de bron rechtstreeks in de code wordt ingesloten, zodat deze niet apart hoeft te worden geladen. Dit kan worden gedaan met JavaScript- en CSS -bestanden. Plug -ins zoals FlyingPress, WP Rocket, Swift Performance of LiteSpeed Cache kunnen u helpen dit te automatiseren.
Methode 2:
Een andere optie is om niet-kritieke bronnen te laden na het laden van de eerste pagina. Dit kan worden gedaan met behulp van asynchrone laadtechnieken , zoals het laden van JavaScript -bestanden nadat het document is ontleed of uitstelattributen is gebruikt.
Methode 3:
Ten slotte kunt u ook proberen het aantal bronnen te verminderen dat op elke pagina nodig is. Dit kan betekenen dat het combineren van meerdere CSS- of JavaScript -bestanden in één bestand of met kleinere afbeeldingen die sneller laden gebruiken. Door het aantal renderblokkeerbronnen te verminderen, kunt u de laadsnelheid van uw website aanzienlijk verbeteren en een betere gebruikerservaring voor uw bezoekers bieden. Als u meer tijd nodig hebt om comfortabel te werken met code, kunnen sommige plug -ins helpen dit proces te automatiseren, zoals AutOptimize, WProcket etc.
In sommige gevallen kunnen render-blokkerende bronnen nodig zijn voor uw website om correct te functioneren. In deze gevallen moet u een manier vinden om ze te optimaliseren zodat ze sneller laden.
Afronding
Als u het bovenstaande advies hebt opgevolgd, had u nu de meeste, zo niet alle, de renderblokkeerbronnen op uw website moeten elimineren. Als u nog steeds hulp nodig heeft, bekijk dan onze professionele WordPress -snelheidsoptimalisatieservice . Wij zullen u helpen de prestaties en snelheid van uw website te verbeteren, wat essentieel is bij het creëren van een hoogwaardige en gebruiksvriendelijke website.
Vergeet niet dat andere factoren de prestaties van uw website kunnen beïnvloeden, zoals serverresponstijd, bestandsgroottes en codekwaliteit. Het elimineren van renderblocking-bronnen is echter een uitstekende aanpak om de snelheid en prestaties van uw website en kernweb vitals .
