Verklein de CSS
Verklein de CSS om pagespeed en Web Vitals van je website te verbeteren. Alle kleine beetje helpen maar bij grote files dat kan dit weleens een groot verschil zijn. De files moeten geladen worden door de browser dus de kleiner de beter. Alles draait om de bestandsoverdracht bij page speed.
Het verkleinen van de CSS heeft voor Web Vitals in vloed op de FCP (First Contentful Paint) en LCP (Largest Contentful Paint) die samen 35% van je page speed score bepalen. Dit het voornamelijk op de laadtijd van de website in de browser. Belangrijk dus om hier eens bij stil te staan en de te kijken hoe we dit kunnen optimaliseren.
De CSS is wat het uiterlijk bepaald van een website. De kleuren, afmetingen, lettertypes en nog veel worden bepaald door de CSS. Dit wordt meestal in een CSS file geplaatst dat door de browser wordt gedownload en gebruikt om de website te tonen zoals het is ontworpen. Probleem met deze files is dat ontwikkelaar vaak heel uitgebreid schijven, met kanttekeningen en heel veel spaties en andere zaken die niet nodig zijn.
CSS verkleinen is niets meer dan alle overbodige tekst, spaties en enters te verwijderen om page speed en Web Vitals te verbeteren.
Verklein de CSS
Wat wordt precies bedoeld met “verklein de CSS” in de page speed test van Google? Dit is misschien het makkelijkst uit te leggen met voorbeelden. Vaak zie je in CSS files iets als volgt:
/*
** CSS 2020 - Body
*/
body {
font-family: 'roboto', sans-serif; /* Hoofd lettertype */
font-size: 17px;
background-color: #fff;
color: #444;
}
.container {
max-width:1280px;
margin:0 auto;
border-radius: 10px;
padding:3rem 0 1rem 0;
}
Voor vele zal dit er misschien netjes uitzien. Overzichtelijk is het misschien maar het zorgt er ook voor dat je de hele tijd zit te scrollen tot je vindt wat je wilt aanpassen.
Om het document of inline CSS te verkleinen moet je alles dat niet nodig is verwijderen. En dan wordt bovenstaande zoals dit:
body{font-family:'roboto', sans-serif;font-size:17px;background-color:#fff;color:#444}
.container{max-width:1280px;margin:0 auto;border-radius: 10px;padding:3rem 0 1rem 0}
Het is duidelijk een stuk kleiner geworden. Hier zijn alle overbodige tekst, spaties, lege regels en enters verwijderd. Merk op dat ook de laatst puntkomma “;” van elk argument is verdwenen. Om het helemaal goed te doen zouden ook de laatste enters verwijderd moeten worden.
Als je dit doet met een bestaand document zal je zien dat je hier heel veel mee kan winnen voor page speed en Web Vitals door de bestandsgrootte te verkleinen. Hierdoor kan de CSS sneller geladen worden in de browser en ook sneller uitgevoerd worden.
Hoe verklein je de CSS?
Met de uitleg hierboven zou men in staat moeten zijn om dit handmatig te doen maar dit is erg veel werk voor grote CSS bestanden. Handiger zou zijn als we dit automatisch zouden kunnen doen en dat is mogelijk.
Meestal hebben plugins een gewoon CSS bestand dat niet verkleind is en een min.css bestand dat wel is verkleind. Hier is het dan verstandig om de min.css te gebruiken en alleen deze te laden.
Vraag vrijblijvende een offerte aan.
CSS verkleinen online
CSS bestanden kan je ook online verkleinen. Je hoeft alleen de CSS te plaatsen, te selecteren dat het om css gaat en kan daarna je de verkleinde CSS kopiëren en in een document te plaatsen. Dit bestand kan je dan laden maar je zou de CSS ook inline kunnen plaatsen in <head>. Een goede website hiervoor is: CSS verkleinen.
CSS verkleinen met PHP
Andere manier is om het te doen met php maar dit is meer voor template en thema bouwers om dit te automatiseren. Hier ga ik niet uitleggen hoe men dit helemaal kan automatiseren maar alleen hoe je met een eenvoudige PHP functie je CSS kan verkleinen. Zelf gebruik ik namelijk een frontend on page CSS editor die extra CSS automatisch inline in <head> plaatst.
De PHP functie:
<?php
// Minify CSS
function my_minified_css($css){
$css = preg_replace('/\/\*((?!\*\/).)*\*\//', '', $css);
$css = preg_replace('#/\*.*?\*/#s', '', $css);
$css = preg_replace('/\s{2,}/', ' ', $css);
$css = preg_replace('/\s*([:;{}])\s*/', '$1', $css);
$css = preg_replace('/;}/', '}', $css);
return $css;
}
?>
In <head> kan je bijvoorbeeld op de volgende manier de verkleinde CSS plaatsen met behulp van boven staande PHP functie.
<?php
echo '<style type="text/css">'.my_minified_css($custom_css).'</style>';
?>
Hier is $custom_css de CSS die je inline wilt plaatsen.
Gebruik dit alleen als de CSS kan veranderen van tijd tot tijd. Als je namelijk maar eenvoudig dit hoeft te doen dan is het makkelijker om handmatig deze CSS inline te plaatsen. Deze functie kan erg handig zijn als je bijvoorbeeld de aangepaste CSS van de Customizer van WordPress inline wilt plaatsen.
Style.css van WordPress verkleinen
In WordPress wordt er standaard in het thema een style.css gebruikt. Dit bestand bevat verschillende informatie die niet verwijderd kunnen worden. Dit is informatie over het thema, de auteur en dergelijken. Deze informatie is nodig om te zorgen dat het thema werkt en gebruikt kan worden.
Toch is er een manier om hier om heen te werken en ook deze style.css van WordPress te verkleinen. Zie hiervoor Style.css van WordPress verkleinen voor meer informatie en uitleg.
Er zijn nog geen reacties. Wees de eerste..!!