Als uw WordPress-site een betaald WordPress-thema gebruikt of een populair thema uit de officiële WordPress Themes-repository, is de kans groot dat het thema wordt ontwikkeld voor verschillende gebruikssituaties. En misschien gebruikt u slechts een kleine set van alle functies die beschikbaar zijn in het thema.
In dat geval laadt uw site een heleboel ongebruikte CSS die niet nodig is om de pagina's van uw site op te maken. Het WordPress-thema dat u gebruikt, kan bijvoorbeeld ook stijlen voor WooCommerce-pagina's hebben, maar als u alleen een blog op uw WordPress-site gebruikt, gebruikt u niet de CSS die is opgenomen voor WooCommerce-pagina's op uw site en dient u dus ongebruikte CSS aan de gebruikers.
Als je je website hebt getest met de Google Pagespeed-tool, weet je waarschijnlijk al dat je site ongebruikte CSS-problemen heeft. In deze handleiding laten we u zien hoe u eerst controleert op ongebruikte CSS en vervolgens een gratis tool gebruikt om ongebruikte CSS van uw WordPress-site te verwijderen.
Hoe ongebruikte CSS te controleren
Google Chrome DevTools (degene die u ziet wanneer u op de optie "Inspecteren" in het contextmenu klikt) heeft een dekkingsfunctie op het tabblad Bronnen. U kunt de dekkingsoptie gebruiken om ongebruikte CSS en JS te vinden die uw website laadt.
- Open uw website in Chrome op de desktop.
- Klik met de rechtermuisknop op een lege witte ruimte op uw site en selecteer Inspecteren vanuit het contextmenu.
- Klik op de bronnen tabblad, druk op Ctrl + Shift + P om een opdrachtvenster te openen, typ dan Dekking en selecteer Begin met het instrumenteren van dekking en laad de pagina opnieuw van beschikbare commando's.
- Klik onder het tabblad Dekking op de URL-filter veld en voer hier het hoofddomein van uw site in om alleen interne CSS/JS-bestanden weer te geven.
└ Controleer de ongebruikte bytes om het percentage gegevens te zien dat vanuit uw thema in een CSS/JS-bestand wordt geladen.
- Klik op een CSS-bestand om de ongebruikte CSS (gemarkeerd met rode balken) te bekijken die door uw site is geladen. De CSS die op de huidige pagina wordt gebruikt, wordt weergegeven met groene balken.
Nadat u alle ongebruikte CSS die op uw website wordt geladen, hebt geanalyseerd, is het tijd om deze te verwijderen. Er zijn verschillende gratis tools beschikbaar om ongebruikte CSS van webpagina's te verwijderen. Hieronder is een van de populaire tools die ik heb getest en gebruikt voor mijn eigen projecten.
Gebruik PurifyCSS Online om ongebruikte CSS te verwijderen
Meestal kun je voor bijna alles in WordPress een plug-in vinden. Maar voor het verwijderen van ongebruikte CSS is er helaas geen enkele plug-in beschikbaar. We zullen dus handmatige, niet-wordpress-specifieke tools gebruiken om ongebruikte CSS van uw site te verwijderen.
PurifyCSS is het meest vriendelijke tool voor niet-ontwikkelaars u kunt vinden om met ongebruikte CSS om te gaan. De tool heeft een eenvoudige gebruikersinterface waarmee gebruikers ofwel de website-URL OF de HTML- en CSS-code kunnen opgeven. Voor WordPress gebruiken we de URL-optie en bieden we links naar allerlei soorten pagina's op uw site zodat de tool CSS van iedereen kan pakken en optimaliseren voor ongebruikte CSS.
Hier is een korte lijst met pagina's die u in de tool moet plaatsen:
- Startpagina URL
- Meerdere postpagina-URL's van elke categorie op uw site
└ Dit is om ervoor te zorgen dat CSS is opgenomen voor alle post-elementen.
- Contact, Over, Privacy en allerlei verschillende pagina's die u op uw site kunt hebben.
- Archiefpagina, Zoekpagina, Auteurspagina's
- Aangepaste pagina's met berichttype
Hete tip: Maak een 'features'-post/pagina met alle thema-elementen die u gebruikt of in de toekomst kunt gebruiken, zoals een tabel, afbeeldingengalerij, code, vooraf, geordende lijsten, ongeordende lijsten, formulieren, tabbladen, accordeons, Gutenberg-blokken die u over het algemeen gebruikt , enzovoort.
Gebruik deze 'features' post-URL in de PurifyCSS Online tool om ervoor te zorgen dat CSS voor de veelgebruikte elementen is opgenomen.
Druk op de CSS opschonen knop zodra u alle relevante typen URL's van uw site hebt toegevoegd aan de PurifyCSS Online-tool.
Kopieer de nieuwe CSS die door de tool is gegenereerd en gebruik deze op uw site. Zorg ervoor dat je maak een back-up van de originele style.css en andere CSS-bestanden in uw thema voordat u de nieuwe CSS vervangt die is gegenereerd door PurifyCSS.
Tip: U kunt de ingebouwde WordPress Theme Editor gebruiken om de CSS-bestanden van uw thema te bewerken, of u kunt een FTP/SFTP-programma gebruiken om verbinding te maken met de server en gemakkelijk bestanden te bewerken met behulp van een Kladblok-editor.