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.
Het hebben van veel ongebruikte CSS en JS in uw website kan de laadtijd van uw website schaden. Als u uw website door een snelheidstesttools zoals Google PageSpeed Insight, krijgt u 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 verbazingwekkende inpluggen bekend als Asset CleanUp: Booster voor paginasnelheid. Met deze plug-in is het verwijderen van ongebruikte CSS net zo eenvoudig als het klikken op een paar knoppen. Als alternatief, als u het niet erg vindt om een paar dollar per jaar uit te geven, met WP Rocket, er is een ongebruikte CSS-knop verwijderd, activeer deze gewoon en de plug-in verwijdert automatisch alle ongebruikte CSS.
Checkout: Top 7 beheerde Google Cloud WordPress-hosting
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.
Checkout: Top 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 in uw Chrome-browser Chrome Dev-tools en ga vervolgens naar dekking. Klik vervolgens op de herlaadknop binnen het dekkingsgebied. Je kunt een vinden uitgebreide handleiding over hoe u dit kunt doen in de Google Developers-tool.
De andere optie is om te gebruiken jitbit om te scannen op ongebruikte CSS-kiezers. Je kan ook gebruiken ZuiverenCSS 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: Booster voor paginasnelheid maakt het gemakkelijk om ongebruikte CSS en JSin WordPress te verwijderen, zelfs voor beginners. Het enige dat u hoeft te doen, is een bepaalde CSS 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 nummer één WordPress premium performance plug-in. Als je een noob bent, ik bedoel, als je geen ervaring hebt met of vertrouwd bent met WordPress, dan is WP Rocket de gemakkelijkste manier om ongebruikte CSS te verwijderen.
U moet de plug-in aanschaffen, zodra u dat heeft gedaan, kunt u deze downloaden vanuit uw account of uw account controleren email voor 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 plug-in ontwikkeld door Brian Jackson en zijn broer, Brett Jackson. Deze plug-in kan heel gemakkelijk ongebruikte CSS helpen 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
CSS JS-manager kan specifiek CSS of JS van mobiel of desktop verwijderen. Afhankelijk van wat je wilt bereiken.
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 u kunt ze tot een minimum beperken. Ik gebruik Asset CleanUp om ongebruikte CSS te verwijderen voor DoelTrend.
Denk eraan, optimaliseer, maar wees er niet te geobsedeerd door, tenzij u wilt dat uw site eruitziet als de snelste website ter wereld.
Lees ook:
Hoe bronnen die het renderen blokkeren in WordPress te elimineren
