Hoe render-blokkerende bronnen in WordPress te elimineren (zeer eenvoudig)
Het blokkeren van bronnen voor renderen kan een grote pijn zijn voor bloggers. Google blijft waarschuwen om ze te elimineren. Er zijn veel manieren om ze te verwijderen, maar hier is een heel eenvoudige manier waarvoor geen codering vereist is.
Vasten blog of website is erg belangrijk. Het is belangrijk als je hoog wilt scoren zoekmachines. Als uw website erg traag is, zal dit zeker schadelijk zijn voor uw website SEO.
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.
Plugins 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.
Voor BloggenTools, we hebben geen problemen met renderblokkering voor Desktop, maar wel voor mobiel. Daarom zullen we mobiel gebruiken zoals je hieronder kunt zien.
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.
Note: 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.
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.
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.
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.
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.
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
