Hoe ongebruikte CSS en JS in WordPress te verwijderen (zeer eenvoudig)
Het hebben van veel ongebruikte CSS kan uw site vertragen. Als u uw website test met Google PageSpeed-inzicht, krijgt u mogelijk een waarschuwing om ongebruikte CSS te verwijderen. Er is een eenvoudige manier om dat te doen zonder codering en technische details.
Een grote hoeveelheid ongebruikte CSS en JavaScript op je website kan de laadtijd negatief beïnvloeden. Als je je website test met een snelheidstool zoals Google PageSpeed Insights , krijg je mogelijk een waarschuwing om ongebruikte CSS te verwijderen.
Gelukkig is er een heel gemakkelijke manier om dat te doen. U hoeft geen speciale technische kennis te hebben om ongebruikte CSS en JS van uw WordPress-site te kunnen verwijderen.
Dit komt door een fantastische plugin genaamd Asset CleanUp: Page Speed Booster . Met deze plugin is het verwijderen van ongebruikte CSS kinderspel: je hoeft maar een paar knoppen aan te klikken. Als alternatief, als je bereid bent een paar euro per jaar uit te geven, biedt WP Rocket een knop om ongebruikte CSS te verwijderen. Activeer deze knop en de plugin verwijdert automatisch alle ongebruikte CSS.
Bekijk: Top 7 beheerde Google Cloud WordPress-hostingpakketten
Wat is ongebruikte CSS?
Ongebruikte CSS is een CSS-bestand dat aanwezig is op een pagina, maar meestal niet nodig is om de pagina te laden. Wanneer een bezoeker een website opent, moet de browser doorgaans alle externe stylesheets op de bezochte pagina downloaden, ontleden en verwerken voordat de pagina-inhoud aan de bezoeker kan worden weergegeven. Als er een CSS bestaat op een dergelijke pagina die niet op de pagina wordt gebruikt, zal de browser zijn tijd eraan verspillen.
Een klassiek voorbeeld hiervan zijn de meeste plug-ins voor contactformulieren die worden gebruikt. Hoewel deze plug-ins meestal alleen op de pagina Contact met ons worden gebruikt, laden de CSS ervan op de hele website. Het maakt niet uit of het de homepage is waar deze niet wordt gebruikt, de CSS wordt geladen.
Als er te veel CSS zijn die niet nodig zijn, maar die laden en de browser vertragen om een pagina te lezen en weer te geven, kan dit een probleem worden.
Afgezien van plug-ins, schrijven thema-ontwikkelaars veel dingen in de style.css die meestal niet nodig zijn. Maar of het nu nodig is of niet, ze laden wanneer uw site wordt geladen!
Eén ongebruikte CSS is misschien geen probleem, maar veel ongebruikte CSS kan de laadtijd van uw website beïnvloeden.
Bekijk: De 10 snelste en beste WordPress-thema's
Hoe ongebruikte CSS te identificeren
Het vinden van ongebruikte CSS en JS is heel eenvoudig. Er zijn twee benaderingen die ik zal aanbevelen.
Een daarvan is om uw website te analyseren via Google PageSpeed Insight. Controleer of uw website een probleem heeft met het verwijderen van ongebruikte CSS. Klik erop en u kunt het onderdeel van uw site identificeren dat ervoor verantwoordelijk is.
U kunt van bovenaf zien dat er één geval van ongebruikte CSS is vastgelegd. Ik kan de plug-in en locatie van de ongebruikte CSS zien door hiernaar te kijken.
De tweede optie is om een meer gedetailleerde analyse te krijgen. U kunt dit bereiken door Chrome Dev-tools te gebruiken.
Open de Chrome-ontwikkelaarstools in je Chrome-browser en ga naar 'Dekking'. Klik vervolgens op de knop 'Vernieuwen' in het dekkingsgebied. Een uitgebreide handleiding hiervoor vind je op de website van Google Developers.
Een andere optie is om Jitbit te gebruiken om te zoeken naar ongebruikte CSS-selectors . Je kunt ook PurifyCSS gebruiken om ongebruikte CSS te vinden.
Hoe ongebruikte CSS te verwijderen
Volg deze stappen om ongebruikte CSS van WordPress te verwijderen:
1. Asset CleanUp installeren
Ga naar plug-in en vervolgens Nieuwe toevoegen. Typ vervolgens "Asset CleanUp" in het zoekvak van de pagina Nieuwe plug-in toevoegen. Installeer en activeer de plug-in.
2. Ga naar plug-ininstellingen
Om toegang te krijgen tot de plug-in-instellingen, klikt u vanuit het WordPress-dashboard op instellingen en vervolgens op Asset CleanUp.
3. Verwijder ongewenste CSS en JS
Wat betreft de plug-in-instellingen, moet u mogelijk accepteren dat u weet hoe de plug-in werkt onder de kraan voor het verwijderen van vet voordat u begint.
Om CSS en JS te verwijderen, klik op CSS en JSS manager. Van daaruit kunt u alle CSS en JS verwijderen die u niet nodig heeft. U kunt het verwijderen voor alleen de startpagina, voor de hele site of voor een specifieke URL. U kunt ook berichten, pagina's of categorieën verwijderen.
Een voorbeeld is om elk contactformulier uit het laden voor de hele site te verwijderen, behalve de contactpagina
Neem de tijd en ontlaad elke CSS en JS waarvan u weet dat ze niet nodig zijn. Zorg ervoor dat u uw site test nadat u klaar bent om er zeker van te zijn dat alles in orde is.
Verwijder ongebruikte CSS WordPress-plug-ins
Hier zijn enkele plug-ins die u kunt gebruiken om ongebruikte CSS in WordpPress te verwijderen:
1. Activa opschonen: Booster voor paginasnelheid
Asset CleanUp: Page Speed Booster maakt het zelfs voor beginners gemakkelijk om ongebruikte CSS en JS in WordPress te verwijderen. Het enige wat je hoeft te doen, is de CSS-code deactiveren die niet nodig is voor een bepaalde pagina.
U kunt ook alleen voor afzonderlijke berichten deactiveren. Met de premium-versie kunt u ongebruikte CSS/JS deactiveren door plug-ins.
Deze plug-in is een complete prestatie-plug-in met veel andere opties om WordPress te versnellen. Het verwijderen van ongebruikte CSS/JS is er slechts een onderdeel van.
In dit bericht gebruikte ik deze plug-in heeft een gids.
2. WP Rocket
WP Rocket is de beste premium WordPress-plugin voor prestatieverbetering. Als je een beginner bent, oftewel als je niet bekend bent met WordPress, dan is WP Rocket de gemakkelijkste manier om ongebruikte CSS te verwijderen.
U moet de plug-in aanschaffen, als u dat eenmaal heeft gedaan, kunt u deze downloaden van uw account of uw e-mail controleren op een downloadlink.
Installeer de plug-in via Dashboard>plugins>Nieuwe toevoegen>Uploaden.
Navigeer gewoon naar de WP Rocket-instellingen en klik vervolgens op het tabblad “Bestandsoptimalisatie”. Scroll vervolgens naar beneden en je ziet 'Ongebruikte CSS verwijderen', vink het vakje aan, sla op en wis de cache.
3. Perfmatters
Perfmatters is een premium plugin ontwikkeld door Brian Jackson en zijn broer Brett Jackson. Deze plugin maakt het heel eenvoudig om ongebruikte CSS te verwijderen.
Eerst moet u de plug-in aanschaffen. Installeer het dan. Licentie activeren. Schakel scriptbeheer in wanneer u naar instellingen navigeert.
Ga gewoon naar een pagina of post op uw website, u ziet het scriptbeheerpictogram in het dashboardmenu, klik erop. U kunt ongebruikte CSS en JS van de pagina of wereldwijd verwijderen.
Deze plug-in is een prestatie-plug-in, wordt geleverd met vele andere opties om WordPress te versnellen. Het verwijderen van ongebruikte CSS/JS is daar een onderdeel van.
4. CSS JS-manager
Met CSS JS Manager kunt u specifiek CSS of JavaScript verwijderen van mobiele apparaten of desktops, afhankelijk van uw gewenste resultaat.
Deze plug-in kan ook het laden van CSS- of JS-bestanden uitstellen.
Conclusie
Als je veel ongebruikte CSS en JS hebt, zul je een grote verbetering merken in snelheid en prestatiescores.
Het is misschien onmogelijk om alle ongebruikte CSS te verwijderen, maar je kunt het wel tot een minimum beperken. Ik gebruik Asset CleanUp om ongebruikte CSS voor TargetTrend te verwijderen.
Onthoud: optimaliseer, maar overdrijf het niet, tenzij je wilt dat je website eruitziet als de snelste website ter wereld.
Lees ook:
Hoe bronnen die het renderen blokkeren in WordPress te elimineren
Gerelateerde artikelen
