CSS verkleinen (minify)

« Back to Glossary Index

CSS verkleinen (minifyen) is het weghalen van alle tekens uit een stylesheet die de browser niet nodig heeft: spaties, regeleinden, inspringingen en commentaar. De opmaak blijft exact hetzelfde, het bestand wordt alleen kleiner en laadt daardoor sneller.

Wat er precies gebeurt

Een stylesheet die een ontwikkelaar schrijft is netjes ingesprongen en voorzien van uitleg, zodat een mens hem kan lezen. Een browser heeft daar niets aan. Een minifier gooit dat eruit en plakt alles achter elkaar. Van dit:

• een regel met inspringing, spaties rond de dubbele punt en een commentaarregel erboven

blijft alleen de kale eigenschap en waarde over. Op een groot themabestand scheelt dat vaak 20 tot 30 procent aan bestandsgrootte. Bij een WordPress-site met een zwaar thema en tien plugins die elk hun eigen CSS meesturen, tikt dat aan.

Waarom het uitmaakt voor SEO

CSS is render-blokkerend. De browser weigert de pagina te tonen tot hij de stylesheets heeft binnengehaald en verwerkt, anders zou de bezoeker even een ongestileerde pagina zien. Elke kilobyte CSS zit dus rechtstreeks in de weg van je Largest Contentful Paint, een van de Core Web Vitals waar Google op meet. Op een trage 4G-verbinding, en zo bezoekt de helft van je publiek je site, is dat het verschil tussen wachten en niet wachten.

Hoe je het doet

In WordPress doen cachingplugins dit met één vinkje (“Minify CSS”). Bouw je zelf, dan doet je build-tool het automatisch bij een productie-build. Bij een hostingpartij met een ingebouwde optimalisatielaag staat het vaak al aan. Combineer het met compressie op de server (gzip of brotli), want die twee versterken elkaar.

Waar het misgaat

• Alles samenvoegen tot één bestand. Vroeger goed advies, nu vaak niet meer. Met HTTP/2 is een handvol losse bestanden prima en voorkom je dat je op elke pagina alle CSS van de hele site meelaadt.
• Minifyen zonder te controleren. Een agressieve minifier kan een slordig geschreven stylesheet slopen. Klik na het inschakelen je belangrijkste pagina’s na op mobiel én desktop.
• Het als hoofdmaatregel zien. Minifyen scheelt kilobytes. Een niet-geoptimaliseerde header-foto van 3 MB kost megabytes. Begin bij het grootste probleem.

Ongebruikte CSS weghalen levert meestal meer op dan minifyen. Veel sites laden de stylesheet van een sliderplugin op elke pagina, ook op pagina’s zonder slider.

« Back to Glossary Index