Style.css van WordPress verkleinen

WordPress heeft een standaard style.css document nodig om te zorgen dat een theme functioneert. In dit bestand staan verschillende belangrijk informatie die niet verwijderd kan worden. Informatie als Theme Name, Theme URI, Description, Version, Author, Author URI, Tags, Text Domain, License, License URI, enz. Deze informatie kan je dus niet verwijderen maar hoe kan je style.css van WordPress verkleinen? Dat gaan we hier eens verder bekijken.

Het is mogelijk om alles overige CSS en niet de informatie te verkleinen en dan is het mogelijk dat de melding “Verklein de CSS” in de Google pagespeed test verdwijnt. Toch is dit niet helemaal netjes en is dit beter op een andere manier te doen. En perfectionisten als ik zullen een mogelijkheid zoeken om ook dit te verwijderen.

Style.css van WordPress verkleinen

Eerlijk gezegd gaan we de style.css niet verkleinen maar we gaan dit op een andere manier aanpakken. De beste manier is om de CSS te scheiden van de informatie over het thema. style.css is eigenlijk alleen maar nodig voor WordPress om te begrijpen welke thema wordt gebruikt en gebruikt de informatie om het thema te tonen in het dashboard van WordPress.

WordPress zoekt altijd naar het bestand style.css. Als deze niet bestaat is het thema niet geldig en kan het niet gebruikt worden. De belangrijke informatie hebben we niet nodig om de website te tonen. Dit betekend dat we de informatie kunnen scheiden en alleen te gebruiken voor het WordPress dashboard.

Download de style.css zodat je het kan bewerken. Maak een nieuw document aan en noem dat bijvoorbeeld style.min.css. Kopieer alle CSS van style.css naar style.min.css en sla dit op. In style.css zou je nu alle css kunnen verwijderen maar is verder niet meer belangrijk.

Hier nemen we als voorbeeld het standaard thema “twenty twenty one” van WordPress. Hier wordt style.css op de volgende manier geladen:

wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

In deze regel is “twenty-twenty-one-style” de handler van dit css bestand. Let op dat elk theme dit anders doet en de volgende code alleen gebruikt in een child theme. Wel zal je opzoek moeten gaan naar de handler want deze heb je nodig om dit bestand niet te laden op de website.

Laten we ervan uit gaan dat de nieuwe style.min.css in de map css wordt geplaatst van het child-theme. Als je deze nog niet hebt kan je eerst een WordPress child-theme maken. In de functions.php van je child-theme kan je dan de volgende code plaatsen:

// This function deregisters style.css and register the new style.min.css from child-theme
function my_new_style_css() {
    wp_dequeue_style('twenty-twenty-one-style');
    wp_enqueue_style('my-new-style', get_stylesheet_directory_uri() . '/css/style.min.css');
}
add_action('wp_enqueue_scripts', 'my_new_style_css', 100);

Uitleg

Op regel 3 wordt de bestaande style.css verwijderd en hierdoor wordt deze niet geladen op de website. Let op dat hier de handler “twenty-twenty-one-style” is gebruikt om deze te verwijderen. Dit zal voor elke theme anders zijn. De handler is belangrijk om deze code te kunnen gebruiken in het child-theme.
Regel 4 registreert de nieuwe style.min.css. Hier kan je zelf beslissen welke handler deze krijgt maar zorgt dat deze uniek is om problemen te voorkomen.

Voor het nieuwe CSS bestand kan je nu de gehele CSS verkleinen. Hoe je dit kan doen kan je lezen in “Verklein de CSS“.

Het is ook mogelijk geen nieuw css bestand te maken maar deze css inline in head te plaatsen. In dit geval kan regel 4 van bovenstaande functie verwijderd worden. Deze is nu niet meer nodig. Dit zou nog meer winst zijn voor page speed. De browser hoeft namelijk geen extra bestand te laden en hoeft niet te wachten tot het volledig geladen is.

Dit is maar een kleine aanpassing. Het is niet dat je hierdoor direct veel sneller de website laad maar de score in de Google page speed test zal verbeteren. Alle kleine beetje helpen.