Wil je ongebruikte CSS in WordPress verwijderen om betere resultaten te krijgen in PageSpeed Insights?
Ongebruikte CSS kan worden verwijderd met behulp van selectieve isolatieplug-ins zoals Asset CleanUp of Perfmatters, CSS-verwijderingssites en zelfs met behulp van gespecialiseerde CSS-verwijderingsplug-ins. Een goede manier om ongebruikte CSS te verwijderen is echter het vermijden van plug-ins en paginabouwers die zware CSS-bestanden gebruiken.
Zware CSS en JavaScript kunnen meerdere elementen in Google PageSpeed Insights beïnvloeden. Het verkleinen van de bestandsgrootte kan de resultaten van het verwijderen van ongebruikte CSS en andere items in PageSpeed Insights verbeteren. De Core Web KPI’s van Google zijn sterk gericht op het optimaliseren van zowel CSS als JavaScript.
Waarom zou u ongebruikte CSS verwijderen?
Omdat CSS bepaalt hoe inhoud wordt weergegeven in een HTML-document, moet de browser van de gebruiker alle externe CSS-bestanden downloaden en parseren voordat de inhoud kan worden weergegeven. Hoe meer CSS-bestanden een webpagina bevat, hoe langer gebruikers moeten wachten voordat ze iets op hun scherm zien. Het opnemen van minimale CSS in het HTML-bestand en het minimaliseren van externe stijlbladen kan de presentatie van de inhoud helpen verbeteren, maar het elimineren van nutteloze CSS is een effectievere strategie om de algehele prestaties te verbeteren.
Afgezien van het vertragen van de algehele prestaties van uw website, kan overmatige CSS hoofdpijn veroorzaken voor ontwikkelaars. Het is gemakkelijker om stijlbladen schoon en georganiseerd te houden dan ongeorganiseerde stijlbladen. Doe uw gebruikers en uzelf een plezier door ongebruikte CSS-bestanden weg te geven.
Verwijder ongebruikte CSS-bestanden in WordPress
1. Verwijder ongebruikte CSS in Asset CleanUp of Perfmatters
Asset CleanUp en Perfmatters zijn twee populaire CSS-verwijderingsplug-ins in WordPress.
Kies Toevoegen om ongebruikte CSS te verwijderen
Asset CleanUp is gratis terwijl Perfmatters wordt betaald, maar de UI/UX is beter. Asset CleanUp heeft een Pro-versie waarmee u aangepaste CSS-bestanden kunt offloaden (stap 12), terwijl de gratis versie en Perfmatters dat niet doen. Zelf gebruik ik Perfmatters.
Activeer Scriptbeheer
Als u Perfmatters gebruikt, schakel dan de scriptmanager in de instellingen in. Er zijn ook instellingen voor het verwijderen van WordPress-rommel, het vooraf laden en andere instellingen die de snelheid kunnen verbeteren. Wanneer u Asset CleanUp of Perfmatters gebruikt, schakelt u de testmodus in de instellingen in waarmee u de verwijdering van CSS kunt testen zonder uw site te verpesten.
Verwijder CSS-bestanden omdat deze niet hoeven te worden geüpload
Sommige plug-ins, paginabouwers en CSS-bestanden worden over de hele WordPress-site geladen. Als sommige bestanden alleen in bepaalde delen van uw site worden gebruikt, schakelt u ze elders uit. U kunt CSS-bestanden overal uitschakelen, behalve bestaande URL’s, berichten of pagina’s, ze uitschakelen op een enkele URL, of regex gebruiken om CSS-bestanden uit te schakelen met behulp van URL-stijlen.
Voorbeelden:
- Schakel het toevoegen van een contactformulier uit op pagina’s die geen contactformulier hebben.
- Schakel het toevoegen van affiliate-links uit op pagina’s die geen affiliate-marketing gebruiken.
- Schakel de plug-in voor sociaal delen uit op alle pagina’s (aangezien deze meestal alleen voor blogposts is).
- Schakel ongebruikte functies uit in uw paginabuilder (zie dit artikel voor hoe u Elementor kunt versnellen).
2. Creëer kritische CSS
Als je WP Rocket of een andere cacheplug-in gebruikt, heb je waarschijnlijk een optie gezien om het laden van CSS-bestanden (of iets dergelijks) te optimaliseren.
Hierdoor wordt kritieke CSS gemaakt en worden alle andere CSS-bestanden asynchroon geladen zonder de weergave te blokkeren. Hoewel het misschien niet echt helpt bij het verwijderen van ongebruikte CSS, kan het wel helpen CSS-bestanden sneller weer te geven.
Soms resulteert het inschakelen van CSS-levering in FOUT (het uitknippen van ongestructureerde tekst) en draagt het bij aan de verschuiving van cumulatieve stijlvariabelen (CLS). Als dit bij u gebeurt, moet u de volgende oplossingen proberen:
- Schakel optimalisatie van het laden van CSS-bestanden in.
- Zuiver uw website met PurifyCSS.
- Download bulk-, opgeschoonde en verkleinde CSS.
- Plak de code in de cacheplug-in (Fallback critical CSS).
- Sluit bestanden uit van CSS-laadoptimalisatie met behulp van de WP Rocket-plug-in.
- Als dat niet werkt, heeft de FlyingPress-plug-in van Gijo Varghese goede recensies.
3. Gebruik tools voor het verwijderen van CSS
Er zijn tal van gratis tools online om ongebruikte CSS te verwijderen.
Zuiver CSS – Gratis tool voor het verwijderen van CSS. Voeg uw website toe, klik op “CSS opschonen” terwijl Uitvoer verkleinen is ingeschakeld. Zodra de scan is voltooid, downloadt u het gecombineerde, opgeschoonde en verkleinde CSS-bestand.
Ongebruikte CSS – CSS-verwijderingstool met gratis en betaalde functies. U kunt een pagina door de tool laten lopen en deze vertelt u dat veel CSS (en het percentage gebruikte CSS) zal worden verwijderd. U moet uw e-mailadres doorgeven en u aanmelden voor een betaald abonnement als u de CSS voor uw hele site wilt downloaden.
UnCSS – Een complexere tool voor het verwijderen van CSS, waarbij u HTML en CSS in hun tool moet kopiëren/plakken en deze moet downloaden. KeyCDN zegt dat het nauwkeuriger is dan PurgeCSS omdat het naar daadwerkelijke webpagina’s kijkt in plaats van naar individuele bestanden, maar het is ook langzamer en vereist meer handmatige installatie.
4. Verwijder ongebruikte CSS in WP Rocket
Het is erg moeilijk om deze taak nauwkeurig te automatiseren en zelfs ongebruikte CSS handmatig te verwijderen.
Chris Cowher, auteur van CSS Tricks, legt alle redenen uit waarom.
Vanaf WP Rocket 3.9 kunt u ongebruikte CSS echter automatisch direct verwijderen. Ga gewoon naar uw WP Rocket-dashboard en optimaliseer de bestanden:
Wanneer het selectievakje Ongebruikte CSS verwijderen is geactiveerd, wordt de CSS die voor uw website wordt gebruikt op de achtergrond gegenereerd en toegevoegd aan de HTML van elke verwerkte pagina.
WP Rocket verzamelt alle stijlbladen en tekst op de pagina en stuurt deze naar een externe tool voor verwerking. Later zal het de HTML van de pagina vergelijken met de opgegeven gegevens om overeen te komen met de CSS-bestanden die daadwerkelijk op de pagina worden gebruikt.
Wanneer het proces is voltooid, ziet u een bevestigingsbericht:
Op dit punt kunt u de PageSpeed-test uitvoeren om de voordelen van deze functie te zien.
5. Neem kritieke CSS-bestanden intern op en stel niet-kritieke CSS uit
Autoptimize en Async JavaScript zijn vaak beter in het optimaliseren van CSS en JavaScript dan caching-plug-ins, waaronder WP Rocket.
Met WP Rocket kunt u CSS verkleinen/samenvoegen en het uploaden van CSS-bestanden optimaliseren (voor het maken en insluiten van kritische CSS). Autoptimize kan echter betere resultaten behalen dan WP Rocket.
Installeer Autoptimize en schakel vervolgens de instellingen in om CSS- en JavaScript-bestanden te optimaliseren. Installeer vervolgens Async JavaScript en klik op ‘Uitstel toepassen’ in Instellingen. Als u uw site opnieuw test, ziet u mogelijk verbeterde resultaten bij het verwijderen van niet alleen ongebruikte CSS, maar ook bij het weergeven van blokkeringsproblemen.
6. CSS-minificatie en samenvoeging
U moet CSS verkleinen altijd inschakelen en onnodige tekens uit CSS-bestanden verwijderen, waardoor ze kleiner worden.
Of het samenvoegen van CSS-bestanden nuttig is, valt te betwisten, maar WP Johnny stelt voor om dit voor kleinere sites in te schakelen en voor grotere sites uit te schakelen. U moet het op uw site inschakelen en de testresultaten controleren.
Als u Autoptimize gebruikt om uw CSS-bestanden te optimaliseren (in de instellingen “CSS optimaliseren” genoemd), moet u dit in uw cache uitschakelen. WP Rocket doet dit automatisch wanneer u dit in Autoptimize inschakelt.
7. Geef CSS-bestanden door van CDN
Als u een CDN gebruikt, zorg er dan voor dat u CSS-bestanden (en andere middelen) van het CDN weergeeft. Dit kan worden ingeschakeld in Perfmatters, WP Rocket of WP CDN Rewrite.
Zonder CDN:
https://example.com/style.css
Met CDN:
http://cdn.example.com/style.css
8. Schakel WooCommerce-stijlen uit op niet-e-commercepagina’s
Standaard laadt WooCommerce stijlen over de hele website.
Als u deze stijlen alleen op e-commercepagina’s gebruikt, kunt u ze elders uitschakelen. WooCommerce heeft hier documentatie over, of gebruik Perfmatters of Schakel WooCommerce Bloat uit.
9. Vermijd zware paginabouwers
Zware paginabouwers (met name Elementor en Divi) voegen veel extra CSS-bestanden toe aan uw site.
Overweeg op zijn minst om de koptekst, het menu, de voettekst en de zijbalk van uw blog hard te coderen. U kunt de paginabuilder nog steeds gebruiken om andere inhoud te ontwerpen, maar deze gebieden worden over uw hele website geladen en kunnen uw PageSpeed Insights-resultaten aanzienlijk verbeteren. Harde codering is lichter dan paginabouwers.
Om je een idee te geven van alles wat met Elementor geladen is:
10. Vermijd plug-ins die CSS injecteren
Sommige plug-ins (formulieren, schuifregelaars, enz.) injecteren CSS die over uw hele site wordt geladen.
Bekijk deze lijst met langzame plug-ins om deze te vermijden of gebruik tools zoals Query Monitor om de langzaamst ladende plug-ins te vinden. Met de WP Hive Chrome-extensie kun je door de WordPress-winkel bladeren terwijl je bekijkt of de plug-in een hoog geheugengebruik veroorzaakt of een aanzienlijke impact heeft op PageSpeed Insights. Installeer de extensie en er wordt een sectie rechts van de plug-ininformatie toegevoegd.
11. Verwijder ongebruikte CSS met RapidLoad
RapidLoad is een premium plug-in ontwikkeld door het Autoptimize-team.
Het is een volledig geautomatiseerde plug-in om ongebruikte CSS in WordPress te verwijderen. De enige reden dat het negatieve recensies krijgt, is omdat mensen het installeren omdat ze denken dat het een gratis plug-in is, maar vervolgens wordt gevraagd een abonnement aan te schaffen. Anders zijn er weinig klachten over.
Download de plug-in, koop een abonnement en de plug-in doet de rest. Elke URL wordt automatisch verwerkt.
12. Schakel aangepaste CSS uit met Asset CleanUp Pro
Als u hardgecodeerde (niet-in de wachtrij geplaatste) CSS moet verwijderen, kunt u met Asset CleanUp Pro dat doen, terwijl de gratis versie van Asset CleanUp (en Perfmatters) dat niet doet.
Met Asset CleanUp Pro kunt u CSS ook verplaatsen naar HEAD/BODY en CSS-bestanden verwijderen op andere pagina’s zoals Categorieën, Auteur, Zoeken, WooCommerce Zoeken, 404 en Geschiedenisarchief.
Test uw site opnieuw op ongebruikte CSS
Voer uw WordPress-site uit via PageSpeed Insights of Lighthouse en controleer of u ongebruikte CSS-inhoud beperkt. We hopen dat deze gids u helpt de software voldoende te verbeteren om eindelijk door de audit te komen.
Veel Gestelde Vragen
Hoe verwijder ik ongebruikte CSS in WordPress?
CSS-verwijdering kan worden gedaan met behulp van de Asset Control-plug-in, CSS-verwijderingssites, minificatie en samenvoeging. Vermijd WordPress-plug-ins en paginabuilder die veel CSS bevatten.
Hoe verwijder ik ongebruikte CSS-bestanden met WP Rocket?
Het is gemakkelijk om ongebruikte CSS-bestanden in WP Rocket te verwijderen. Het enige dat u hoeft te doen is de plug-in WP Rocket 3.9+ installeren, naar het tabblad Bestanden optimaliseren gaan en vervolgens de functie Ongebruikte CSS verwijderen activeren.
Hoe kan ik ongebruikte CSS verwijderen met Autoptimize?
De Autoptimize-plug-in kan CSS-bestanden verkleinen, groeperen, insluiten en uitstellen. Hun RapidLoad-plug-in is bedoeld voor het verwijderen van ongebruikte CSS.
Hoe kan ik ongebruikte CSS verwijderen zonder een WordPress-plug-in?
Als je geen WordPress-plug-in wilt gebruiken om CSS te verwijderen, gebruik dan een CSS-verwijderingssite zoals PurifyCSS of Unused-CSS.
Naast ongebruikte CSS-bestanden bevat uw website waarschijnlijk HTML en JavaScript waar u zonder kunt. Voordat u begint met het compileren, verkleinen en comprimeren van uw bestanden, zorg ervoor dat ze niet vol staan met onnodige codes en verwijder ongebruikte CSS.
Zie ook: Hoe ik een score van 100% kreeg op Google PageSpeed Insights
