Hoe render-blokkerende bronnen in WordPress te elimineren (zeer eenvoudig)

Renderblokkeringsbronnen kunnen bloggers veel pijn doen. Google blijft waarschuwen om ze te verwijderen. Er zijn veel manieren om ze te verwijderen, maar hier is een heel eenvoudige manier die geen codering vereist.

Een snelle blog of website is erg belangrijk. Het is belangrijk als je hoog wilt scoren in zoekmachines. Als uw website erg traag is, zal dit zeker uw SEO schaden.

Ook kan een trage website ervoor zorgen dat het bouncepercentage hoog wordt, wat uw merk technisch op veel manieren zal schaden. Een trage website kan van invloed zijn op het inkomen en de conversie.

De meeste gebruikers zijn ongeduldig, als het te lang duurt om uw site te laden, zullen ze deze verlaten en naar een sneller alternatief gaan. Dat is een potentiële klant of omzetbooster weg.

Als je hebt geprobeerd je website te versnellen en je gebruikt een testtool zoals Google PageSpeed ​​Insight, is een waarschuwing die u waarschijnlijk krijgt, het elimineren van bronnen die het renderen blokkeren.

In dit artikel leert u hoe u gemakkelijk renderblokkerende bronnen kunt elimineren.

Wat zijn bronnen die het renderen blokkeren?

Renderblokkerende bronnen zijn CSS en JavaScript die de laadtijd van een website vertragen omdat deze door de webbrowser moet worden gedownload voordat de pagina-inhoud kan worden weergegeven.

Wanneer een bezoeker toegang probeert te krijgen tot een website, begint de browser de website direct van boven naar beneden te lezen. Als er CSS of JavaScript is, stopt de browser met lezen totdat deze de bestanden heeft gedownload en verwerkt. Voordat de browser de inhoud boven de vouw kan weergeven, moet hij de CSS- of JavaScript-bestanden downloaden.

Plug-ins of thema's die u installeert, kunnen enkele van die CSS en JS toevoegen. Sommige hoeven niet eerst te laden, ze kunnen later laden. Maar omdat ze bovenaan staan, vertragen ze je website.

Dus wat Google bedoelt met "renderblokkerende bronnen elimineren" is dat u onnodige bronnen van de bovenkant van uw website verwijdert omdat het het laden van website-inhoud vertraagt.

Bronnen voor het blokkeren van renderen vinden

Voordat u een probleem met het blokkeren van renders kunt oplossen, moet u weten waar het vandaan komt. U kunt erachter komen welke bronnen de weergave blokkeren door een test uit te voeren op Google PageSpeed ​​Insight or Web.Maatregel.

U kunt de onderstaande stappen volgen om bronnen voor het blokkeren van renderen te vinden:

1. Bezoek Google PageSpeed ​​Insight

2. Voer uw websiteadres in en klik op analyseren

3. Scroll naar beneden en let op de waarschuwing voor het verwijderen van renderblokkerende bronnen.

Controleer het in zowel mobiel als desktop tikken.

PageSpeed ​​Insight Desktop
Voor BloggingTools hebben we een 100 op Desktop, gelukkig hebben we geen probleem met het blokkeren van renders

Voor BloggenTools, we hebben geen problemen met renderblokkering voor Desktop, maar wel voor mobiel. Daarom zullen we mobiel gebruiken zoals je hieronder kunt zien.

PageSpeed ​​Insight Mobiele score
PageSpeed ​​Insight mobiel
We hebben 2 problemen voor mobiel:

Zoals u hierboven kunt zien, hebben we voor mobiel 2 problemen met het blokkeren van weergaven. Met een score van 93. De score was hoger, maar omwille van deze post moest ik de Autoptimize-plug-in deactiveren.

BloggingTools.org behaalde deze score zonder optimalisatie omdat we een zeer snel en lichtgewicht thema gebruiken met de naam GeneratePress. We hosten ook op een zeer snelle webhost die bekend staat als Cloudways.

Opmerking:: U moet niet geobsedeerd zijn over het behalen van 100 op de PageSpeed-inzichtscore. Het is slechts een gids. Meestal is een gemiddelde score van 65 tot 80 voor de meeste mensen prima. Verwijder geen bestanden die essentieel zijn voor uw bedrijf.

Het goede aan WordPress is dat je niet alles handmatig hoeft te doen. Er zijn enkele goed gecodeerde plug-ins om te helpen.

Hoe het probleem met renderblokkerende bronnen in WordPress op te lossen

Volg deze stappen om het probleem met renderblokkerende bronnen op te lossen:

1. Installeer en activeer Autoptimize

Er zijn veel WordPress-plug-ins die dit kunnen, zoals W3 totale cache, WP Rocket enzovoort. Maar vanuit mijn ervaring met veel websites, gaat Autoptimize er altijd veel beter mee om dan alle andere. Het mooie is dat Autoptimize compatibel is met bijna alle WordPress caching-plug-ins en dat het gratis is.

Ga naar de WordPress-plug-inmap om installeer en activeer Autoptimize

2. Ga naar Autoptimize-instellingen

Als je ooit Autoptimize-instellingen nodig hebt, klik dan op je WordPress-dashboard op instellingen en klik vervolgens op Autoptimize.

3. JavaScript optimaliseren

Selecteer onder JavaScript-opties de optie Scriptcode optimaliseren en selecteer ook samengevoegde JS-bestanden. Hieronder vind je de instellingen die ik gebruik voor BloggingTools.

JavaScript automatisch optimaliseren

4. CSS optimaliseren

Selecteer onder de opties CSS optimaliseren de optie CSS-code optimaliseren. Selecteer ook geaggregeerde CSS-bestanden en "Ook aggregeer inline CSS". Zie de opties die ik gebruik voor BloggingTools hieronder.

CSS automatisch optimaliseren

5. HTML optimaliseren

Als u betere prestaties wilt, kunt u Autoptimize ook gebruiken om HTML te optimaliseren. Selecteer onder HTML-opties de optie HTML-code optimaliseren. Hieronder zie je de instellingen die ik gebruik voor BloggingTools.

HTML automatisch optimaliseren

6. Controleer de overige opties

U kunt de overige opties controleren en enkele instellingen aanpassen zoals het voor u werkt. Hieronder vind je de instellingen voor BloggingTools.

Diverse opties automatisch optimaliseren

7. Bewaar en leeg de cache.

Klik vervolgens op Opslaan en cache leegmaken. Dat is alles!

Na dit alles kun je je site nog eens checken op Google PageSpeed ​​Insight. Voor BloggingTools sprong onze score onmiddellijk nadat we dit hadden gedaan naar 95 en alle waarschuwingen voor het elimineren van renderblokkeringsbronnen verdwenen volledig. Zie onder.

Google PageSpeed ​​Insight mobiel
Google PageSpeed ​​Insight Mobiele score

Houd er rekening mee dat, afhankelijk van hoeveel middelen voor het blokkeren van weergaven u heeft en hoe cruciaal ze zijn voor uw site, er een paar over kunnen blijven. Probeer ze niet te verwijderen.

Als u verder wilt elimineren, kunt u gebruik maken van Asynchrone JavaScript, een plug-in van dezelfde auteur als Autoptimize. Ze werken samen. Ik raad dit niet aan, omdat het je site kan breken. Autoptimize alleen is oké!

Conclusie

Snelheid is belangrijk en het elimineren van middelen voor het blokkeren van renderen kan uw website helpen sneller te laden en uw site een betere score te geven op snelheidstesttools. Maar je moet nooit geobsedeerd zijn door deze partituren, omdat ze er alleen maar zijn om je te begeleiden.

Als uw website hierna nog steeds erg traag is. De drie meest waarschijnlijke problemen kunnen zijn dat uw thema of uw webhost slecht is, of dat u slechte plug-ins hebt geïnstalleerd. ik raad aan Coudways als de beste webhost en GeneratePress als het beste thema. Als je een beginner bent, Bluehost aankan, maar als je het kunt betalen, is Cloudways de beste. Je kunt gratis beginnen. Ik gebruik GeneratePress en Coudways voor TargetTrend

Lees ook:

Hoe WordPress heel snel te maken

Hoe u verkeer naar uw blog kunt leiden

Geld verdienen met bloggen

Hoe een blog te starten

Mfon Abel Ekene

Mfon Abel Ekene

Ik geniet ervan om inhoud te maken die nuttig is. Mijn passie is om de internetbevolking te helpen vinden wat ze nodig hebben door ze in de goede richting te wijzen. Het is wat ik graag doe en ik heb vele uren aan onderzoek en testen besteed om ervoor te zorgen dat ik dat doe via mijn inhoud op TargetTrend.

Artikelen: 50

Technische spullen ontvangen

Tech trends, startup trends, reviews, online inkomsten, webtools en marketing een of twee keer per maand

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd.