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.
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 je website probeert te versnellen en je gebruikt een testtool zoals Google PageSpeed Insight , is een van de waarschuwingen die je waarschijnlijk krijgt, dat je render-blocking resources moet verwijderen.
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 je een render-blocking probleem kunt oplossen, moet je weten waar het vandaan komt. Je kunt achterhalen welke bronnen de rendering blokkeren door een test uit te voeren met Google PageSpeed Insight of Web.Measure.
U kunt de onderstaande stappen volgen om bronnen voor het blokkeren van renderen te vinden:
1. Ga naar Google PageSpeed Insights
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 BloggingTools hebben we geen problemen met renderblocking op desktops, maar wel op mobiele apparaten. Daarom gebruiken we in dit voorbeeld de mobiele versie, 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 gebruikmaken van een zeer snel en lichtgewicht thema genaamd GeneratePress . We hosten onze website ook bij een zeer snelle webhost genaamd Cloudways.
Let op : u hoeft niet geobsedeerd te raken door een score van 100 op PageSpeed Insights. Het is slechts een richtlijn. Een gemiddelde score van 65 tot 80 is meestal voldoende. 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-plugins die dit kunnen, zoals W3 Total Cache, WP Rocket , enzovoort. Maar uit mijn ervaring met talloze websites blijkt dat Autoptimize dit altijd veel beter doet dan al deze plugins. Het mooie is dat Autoptimize compatibel is met vrijwel alle WordPress-cachingplugins en bovendien gratis is.
Ga naar de WordPress-plugindirectory om Autoptimize te installeren en te activeren.
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 je nog meer fouten wilt elimineren, kun je Async JavaScript gebruiken , een plugin van dezelfde ontwikkelaar als Autoptimize. Ze werken samen. Ik raad dit echter af, omdat het je website kan beschadigen. Autoptimize alleen is prima!
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 je website hierna nog steeds erg traag is, zijn de drie meest waarschijnlijke oorzaken een slecht thema of een slechte webhost, of de installatie van verkeerde plugins. Ik raad Cloudways aan als de beste webhost en GeneratePress als het beste thema. Als je een beginner bent, is Bluehost een prima optie, maar als je het je kunt veroorloven, is Cloudways de beste keuze. Je kunt gratis beginnen. Ik gebruik GeneratePress en Cloudways voor TargetTrend.
Lees ook:
Hoe WordPress heel snel te maken
Gerelateerde artikelen
