Hoe Render-blokkerende bronnen elimineren in Wordpress [2024] 💥
Google PageSpeed of GtMetrix hebben mogelijk aanbevolen om renderblokkerende bronnen te elimineren als je een test op hun websites hebt uitgevoerd. JavaScript uitstellen en het invoegen van belangrijke CSS-stijlen kan worden gebruikt om renderblokkerende bronnen in WordPress te elimineren. Dit is mogelijk in veel cache-plug-ins, waaronder Autoptimize en Async JavaScript. Elementor en ook de Divi Theme hebben ingebouwde instellingen om renderblokkerende bronnen te elimineren door inline CSS te gebruiken en Javascript uit te stellen en CSS.
1. Verwijder Render-Blocking-bestanden in WP met plug-in
Hoewel er verschillende goede cache-plug-ins beschikbaar zijn om dit te doen, raad ik ten zeerste aan om WP-Rocket ervoor. De reden hiervoor is het feit dat de plug-in zeer eenvoudig te bedienen en te begrijpen is. Verder werkt alles precies zoals het hoort. Er is geen gratis versie van deze plug-in, maar hij kost niet zoveel en is het geld meer dan waard.
Advertisement
Ok, installeer de plug-in via je backend en activeer deze. Deze plug-in doet zijn werk zonder iets in te stellen op het gebied van cachebestanden, maar om JS en CSS te definiëren moet je naar "Instellingen". Ga dan naar het hoofdstuk "Bestandsoptimalisatie". Scroll gewoon naar beneden en markeer de vakjes om uit te stellen. Vergeet niet de instellingen op te slaan. Zie screenshot hieronder.
Screenshot voor het uitstellen van CSS
Zoals je kunt zien op de bovenstaande schermafbeelding, is er ook een optie om async te gebruiken in plaats van uitstellen. Deze plug-in heeft het allemaal en is te gemakkelijk te gebruiken. Maar controleer altijd hoe uw website reageert op de verschillende opties, aangezien niet alle opties kunnen worden toegepast op alle verschillende thema's met het breken van de site.
2. Verwijder Render-Blocking-bestanden in WP met Elementor
Veel mensen werken graag met Elementor. Als je de Elementor-paginabuilder in je website hebt, kun je het probleem met het blokkeren van renderen er meteen mee oplossen. Zelfs voor degenen die nog niet met Elementor werken, is het aan te raden om de paginabuilder in uw site. Op deze manier lost u het probleem met het blokkeren van de weergave op en heeft u tegelijkertijd een toppaginabuilder in uw site die uw werk gemakkelijker zal maken.
Zet "Font-Awesome inline" en "verbeterde CSS laden" in uw Elementor aan. Ga naar "Elementor" >> "Instellingen" >> "Experimenten". Hierdoor kunt u CSS en lettertypen rechtstreeks laden, waardoor ze niet-renderblokkerend zijn. Verbeterd laden van activa kan ongebruikte CSS/JavaScript verwijderen, wat kan helpen de essentiële webvitaliteit op meerdere gebieden te verbeteren.
3. Verwijder Render-Blocking-bestanden in WP met Divi Theme
En wie kent het Divi Theme niet? Al jaren het populairste thema voor Wordpress en terecht. Je kunt het renderblokkeringsprobleem meteen oplossen in Divi zelf.
De prestatie-instellingen van Divi kunnen bronnen die het renderen blokkeren elimineren door essentiële CSS/JavaScript toe te passen en het laden van Google Fonts te verbeteren door uw lettertypen inline te laden.
4. Render-blokkerende bestanden op HTML-site verwijderen
Als je met HTML werkt, zijn er geen plug-ins, Divi of Elementor beschikbaar en moet je render-blokkerende bestanden met de hand verwijderen. In een Wordpress website zou dit veel werk zijn, en ook alles moet via een child theme gebeuren omdat anders alles met een WP upgrade zou worden overschreven. Hoe u bronnen voor het blokkeren van renderen voor HTML kunt elimineren, kunt u lezen in een ander kort artikel van mij.
Render-blokkerende bestanden vinden
Als u een goede plug-in gebruikt die het werk voor u doet, is het niet echt nodig om de renderblokkerende bestanden te vinden. Gebruik een plug-in wanneer u de problemen gewoon snel wilt oplossen. De snelste manier om al uw renderblokkerende bestanden te identificeren, is door gebruik te maken van de gratis service op WebPageTest.
Om het kritieke weergavepad te bepalen en om kritieke bronnen te analyseren
- Voer een test uit op WebPageTest en klik vervolgens op de afbeelding "waterval".
- Concentreer u op alle bronnen die zijn aangevraagd en gedownload voorafgaand aan de groene regel "Start Rendering".
Analyseer de watervalweergave. Zoek naar CSS- en JavaScript-bestanden die vereist zijn vóór de groene regel 'start met renderen', maar die niet essentieel zijn voor het laden van inhoud boven de vouw. Zie screenshot hieronder.
Zodra u (mogelijk) een renderblokkerende bron heeft geïdentificeerd, kunt u deze testen door deze te verwijderen. Hiermee kun je bepalen of inhoud boven de vouw wordt beïnvloed. Het is mogelijk om scripts te verwijderen uit bestanden die kritiek zijn. Zo kun je zien hoe de verschuivende elementen van de site je ervaring beïnvloeden.
U kunt deze bronnen ook op andere manieren verbeteren. U kunt ook overwegen om bestanden te combineren die geen kritieke JavaScript-bestanden zijn. Vervolgens kunt u ze uitstellen door deze bestanden onderaan uw webpagina toe te voegen.
Je kunt het aantal CSS-bestanden dat je hebt voor niet-kritieke bestanden verminderen door ze te comprimeren en te combineren. Er kan een bestand worden gemaakt dat sneller te downloaden is en minder invloed heeft op de weergavesnelheid van uw pagina.
Veelvoorkomende bronnen voor het blokkeren van renders zijn:
- CSS-bestanden
- JS-bestanden
- Code van derden
- Plug-ins
- jQuery
- Paginabuilders
- Lettertypen
- Animaties
- Woocommerce
Advertisement