Tijdens een snelheidstest heb je mogelijk van PageSpeed Insights over het verwijderen van ongebruikte CSS. Wil je ongebruikte CSS van je WordPress-site verwijderen om de laadtijd te verkorten en betere prestatieresultaten te behalen?
Er wordt door WordPress-thema's en -plugins vaak veel CSS-code toegevoegd die je niet nodig hebt. De prestaties van WordPress en de gebruikerservaring kunnen worden verbeterd door deze ongebruikte CSS-code te verwijderen. In dit artikel laten we zien hoe je eenvoudig ongebruikte CSS van je WordPress-website kunt verwijderen zonder dat je website crasht.
Ongebruikte CSS in WordPress verwijderen met verschillende methoden
Als je de hoeveelheid ongebruikte CSS op je WordPress-website wilt verminderen, zijn er verschillende methoden die je kunt proberen.
Hoewel het mogelijk zou zijn om alle overbodige CSS in WordPress te verwijderen, zou dat een behoorlijk lastige klus zijn. Bovendien kan het door de manier waarop WordPress achter de schermen werkt, voor sommige gebruikers moeilijk zijn om overbodige CSS te vinden en te verwijderen.
In dat geval laten we je verschillende manieren zien om ongebruikte CSS te verwijderen, en kun je de methode kiezen die het beste bij jouw behoeften past.
Vind uw grootste CSS-bestanden
Om uw meest omvangrijke CSS-bestanden te bekijken, 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 geoptimaliseerd moet worden.
Verwijder ongebruikte CSS en plaats de gebruikte CSS in een apart bestand
Het is sneller om een apart bestand te maken, omdat de HTML-grootte niet toeneemt en het bestand in de cache kan worden opgeslagen, in tegenstelling tot inline-code. Het wordt ook in een apart bestand geladen door LiteSpeed Cache's CSS en FlyingPress. Bovendien WP Rocket voor scores in plaats van bezoekers, in tegenstelling tot de meeste andere plugins, die aparte bestanden gebruiken omdat die sneller zijn.
Vermijd plugins die CSS toevoegen
Tools zoals Query Monitor en WP Hive zijn handig, maar ze laten niet altijd zien of een plugin extra CSS/JS aan de front-end toevoegt. Daardoor is de volledige impact van een plugin pas zichtbaar na het opnieuw testen van je website nadat je content aan de front-end hebt toegevoegd. De meest voorkomende boosdoeners zijn galerijen, sliders, contactformulieren, reacties, chat, kalenders en page builder plugins die gerelateerd zijn aan het ontwerp.
Gebruik een lichtgewicht thema + paginabouwer.
De front-end is overladen met CSS, JavaScript en lettertypen. Daardoor is een trage website gegarandeerd, zeker in combinatie met extra page builder-plugins zoals Elementor Pro en Ultimate Addons.
CSS-optimalisaties inschakelen in paginabouwers
Tot deze instellingen behoren de experimenten van Elementor en de prestatie-instellingen van Divi, die verschillende opties bevatten om de CSS-grootte te verkleinen (bijvoorbeeld verbeterde laadmogelijkheden voor assets en CSS in Elementor en dynamische CSS in Divi). Over het algemeen krijg je betere resultaten als je meer prestatie-instellingen inschakelt.
Schakel pictogrammen uit als u ze niet gebruikt
Als je geen Elementor-pictogrammen gebruikt, schakel ze dan uit. Voor Google Fonts en Font Awesome kun je dit doen via Perfmatters of de documentatie van Elementor.
CSS verwijderen in plugins voor het ontladen van assets
Met Perfmatters kun je CSS/JS (of complete plugins) 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 Loading-achtergrondafbeeldingen gevonden in CSS
De meeste cache-plugins laden achtergrondafbeeldingen niet lazyloading als ze in een apart CSS-bestand staan.
Als je achtergrondafbeeldingen dus lazy wilt laden, raadpleeg dan de documentatie van je cache-plugin. FlyingPress wordt geleverd met een lazy-bg helperklasse die je 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 biedt een oplossing met behulp van CSS-selectors.
Gutenberg CSS verwijderen
Stel dat u de Gutenberg-blokkenbibliotheek kunt verwijderen als u geen Gutenberg-blokken gebruikt. Gebruik hiervoor Code Snippets of functions.php.
Combineer CSS (of niet)
De gecombineerde CSS- en JavaScript-bestanden mogen niet groter zijn dan 10 KB. In de meeste gevallen is het echter vrijwel onmogelijk om CSS en JavaScript te combineren.
WooCommerce-stijlen uitschakelen
Standaard laadt WooCommerce stijlen op je hele website. Als je deze stijlen alleen op e-commercepagina's gebruikt, kun je ze overal uitschakelen. WooCommerce heeft documentatie, maar we raden aan om 'Disable WooCommerce Bloat' te gebruiken, dat veel meer instellingen biedt om overbodige elementen te verwijderen.
Meer van dit soort artikelen vind je op Seahawk Media .
