Tijdens het uitvoeren van een snelheidstest is het u misschien opgevallen PageSpeed Insights waarschuwt voor het verwijderen van ongebruikte CSS. Wilt u ongebruikte CSS van uw WordPress-site verwijderen, zodat deze sneller laadt en betere prestatiecijfers krijgt?
Er wordt veel CSS-code toegevoegd door WordPress-thema’s en plug-ins die je niet nodig hebt. De prestaties van WordPress en de gebruikerservaring kunnen worden verbeterd door de ongebruikte CSS-code te verwijderen. In dit artikel laten we zien hoe u eenvoudig ongebruikte CSS van uw WordPress-website kunt verwijderen zonder dat uw website kapot gaat.
Verwijder ongebruikte CSS in WordPress op verschillende manieren
Als u de hoeveelheid ongebruikte CSS op uw WordPress-website wilt verminderen, zijn er een paar verschillende methoden die u kunt proberen.
Hoewel het mogelijk zou zijn om alle onnodige CSS in WordPress te verwijderen, zou het een behoorlijk moeilijke taak zijn. Bovendien kan het, als gevolg van de manier waarop WordPress achter de schermen werkt, voor sommige gebruikers moeilijk zijn om onnodige CSS te vinden en te verwijderen.
In dat geval laten we u verschillende manieren zien om ongebruikte CSS te verwijderen, en kunt u de beste methode kiezen die bij uw behoeften past.
Vind uw grootste CSS-bestanden
Om uw meest uitgebreide CSS-bestanden te zien, sorteert u uw dekkingsrapport op ' gebruiksvisualisatie' in Chrome Dev Tools . URL's bevatten doorgaans de naam van de plug-in, het thema of de code van derden die het bestand heeft gegenereerd. Hierdoor kunt u nu gemakkelijker bepalen wat er geoptimaliseerd moet worden.
Verwijder ongebruikte CSS met gebruikte CSS in een apart bestand
Het is sneller om een afzonderlijk bestand te maken, omdat de HTML-grootte niet toeneemt en het bestand in de cache kan worden opgeslagen, in tegenstelling tot inlining. Het wordt ook in een apart bestand geladen door LiteSpeed Cache's CSS en FlyingPress. Bovendien WP Rocket voor scores in plaats van voor bezoekers, in tegenstelling tot de meeste andere plug-ins, die andere bestanden gebruiken omdat ze sneller zijn.
Vermijd plug-ins die CSS toevoegen
Tools als Query Monitor en WP Hive zijn goed, maar laten niet altijd zien of een plugin extra CSS/JS aan de frontend toevoegt. Als gevolg hiervan kan de volledige impact van de plug-in pas worden waargenomen nadat u uw website opnieuw heeft getest nadat u inhoud aan de voorkant heeft toegevoegd. De meest voorkomende boosdoeners zijn galerijen, sliders, contactformulieren, opmerkingen, chat, kalenders en plug-ins voor het maken van pagina's met betrekking tot ontwerp.
Gebruik een lichtgewicht thema + paginabouwer.
De front-end is overladen met CSS, JavaScript en lettertypen. Hierdoor is een trage website gegarandeerd in combinatie met extra pagebuilder plugins zoals Elementor Pro en Ultimate Addons.
Schakel CSS-optimalisaties in paginabouwers in
Tot deze instellingen behoren de experimenten van Elementor en de prestatie-instellingen van Divi, die verschillende opties bevatten voor het verkleinen van de CSS-grootte (bijvoorbeeld verbeterd laden van middelen en CSS in Elementor en dynamische CSS in Divi). Over het algemeen krijgt u betere resultaten als u meer prestaties inschakelt.
Schakel pictogrammen uit als u ze niet gebruikt
Als u geen Elementor-pictogrammen gebruikt, schakelt u deze uit. Voor Google Fonts + Font Awesome kunt u dit doen in de documentatie van Perfmatters of Elementor.
Verwijder CSS in plug-ins voor het lossen van activa
Met Perfmatters kun je CSS/JS (of hele plug-ins) uitschakelen waar ze niet nodig zijn, ongebruikte CSS verwijderen en YouTube-iframes vervangen door voorbeeldafbeeldingen. De resterende ongebruikte CSS kan met al deze methoden toegankelijker worden gemaakt. CSS/JS-bestanden kunnen ook worden uitgeschakeld met de Asset CleanUp Plugin.
Lazy Load-achtergrondafbeeldingen gevonden in CSS
De meeste cache-plug-ins zullen geen achtergrondafbeeldingen lazyloaden als ze in een afzonderlijk CSS-bestand zijn verpakt.
Als u daarom achtergrondafbeeldingen wilt laden, raadpleeg dan de documentatie van uw cacheplug-in. FlyingPress wordt geleverd met een lazy-bg-helperklasse die u kunt toevoegen aan de extra CSS-klasse, in tegenstelling tot WP Rocket waarvoor inline HTML vereist is. Een lazy-bg helperklasse kan handmatig worden toegevoegd, of Optimole heeft een oplossing met behulp van CSS-selectors.
Verwijder Gutenberg CSS
Stel dat u de Gutenberg-blokbibliotheek uit de wachtrij kunt halen als u geen Gutenberg-blokken gebruikt. Gebruik codefragmenten of function.php om dit toe te voegen.
Combineer CSS (of niet)
De CSS/JS-grootte mag niet groter zijn dan 10 KB als u ze combineert. In de meeste gevallen mogen CSS en JavaScript niet worden gecombineerd, omdat dit vrijwel onmogelijk is.
Schakel WooCommerce-stijlen uit
Standaard laadt WooCommerce stijlen op uw website. Als u deze stijlen alleen op e-commercepagina's gebruikt, kunt u ze overal uitschakelen. WooCommerce heeft documentatie, maar we raden aan om WooCommerce Bloat uit te schakelen, dat veel meer instellingen heeft voor het verwijderen van bloat.
Vind meer van dergelijke artikelen op Seahawk Media .
