Minification is het proces waarbij alle overbodige tekens worden verwijderd uit een CSS-, JavaScript- of HTML-bestand zonder het functionele gedrag te wijzigen: spaties, regeleinden, commentaar, overbodige puntkomma's, inspringing. Het resulterende bestand is lichter, en daardoor sneller te downloaden en te verwerken door de browser. Het is een van de eenvoudigste performance-optimalisaties die je kunt doorvoeren en levert direct meetbare winst op bij PageSpeed-scores.
Wat is minification precies?
Wanneer je CSS of JavaScript schrijft, formatteer je het zodat het leesbaar is voor mensen: je springt in, voegt commentaar toe om de logica te verduidelijken en laat regels open tussen blokken. Dit is essentieel voor het onderhouden van de code, maar volledig overbodig voor de browser die de code uitvoert. Minification verwijdert systematisch alles wat niet noodzakelijk is voor de uitvoering.
Concreet: een CSS-bestand van 120 KB met commentaar, inspringing en spaties kan worden teruggebracht tot 85 KB na minification — zonder één stijlregel te verliezen. Een JavaScript-bestand van 200 KB kan dalen naar 140 KB. Deze winst van 20 tot 30% op het bestandsgewicht vertaalt zich direct in een kortere laadtijd, vooral merkbaar op mobiele verbindingen en trage netwerken.
Minification vs. compressie: wat is het verschil?
Deze twee begrippen worden vaak verward, maar ze verwijzen naar afzonderlijke en complementaire bewerkingen. Minification wijzigt de inhoud van het bestand: het verwijdert tekens, verkort variabelenamen (in JavaScript) en herschrijft de code om hem compacter te maken. Het geminificeerde bestand is permanent — dit gewijzigde bestand wordt opgeslagen op de server.
Compressie (GZIP of Brotli) wijzigt het bestand daarentegen niet: het comprimeert het tijdens de netwerkoverdracht, vergelijkbaar met een ZIP-bestand. De server stuurt de gecomprimeerde versie, de browser decomprimeert deze bij ontvangst. Beide optimalisaties zijn cumuleerbaar: een CSS-bestand dat eerst geminificeerd en vervolgens met GZIP gecomprimeerd wordt, kan een reductie van 70 tot 80% bereiken ten opzichte van het originele, niet-geoptimaliseerde bestand.
CSS-minification
Verwijdering van spaties, commentaar, regeleinden en overbodige regels. Typische reductie: 15 tot 25%.
JS-minification
Naast spaties en commentaar ook het verkorten van variabelenamen (uglification). Typische reductie: 20 tot 40%.
HTML-minification
Verwijdering van spaties tussen tags en HTML-commentaar. Bescheidener winst: 5 tot 15%.
CSS-minification in detail
CSS-minification verwijdert alle tekens die de visuele weergave niet beïnvloeden: meerdere spaties (één spatie tussen selector en accolade is voldoende), regeleinden, commentaar (`/* ... */`), puntkomma's voor de sluitende accolade, overbodige nullen (0.5 wordt .5) en soms de eenheden bij nulwaarden (0px wordt 0). Tools zoals cssnano of clean-css kunnen ook kleuren optimaliseren (#ffffff wordt #fff) en identieke selectors samenvoegen.
JavaScript-minification: inclusief uglification
JavaScript-minification gaat verder dan CSS-minification. Naast het verwijderen van spaties en commentaar passen geavanceerde tools zoals Terser of UglifyJS uglification toe: het hernoemen van lokale variabelen naar korte namen (één of twee letters), het vereenvoudigen van equivalente expressies en het verwijderen van dode code. Een leesbaar JavaScript-bestand met beschrijvende variabelenamen (`updateProductPrice`) wordt een compact bestand met variabelen `a`, `b`, `c` — functioneel identiek, maar veel korter.
Source maps: debuggen van geminificeerde code
Impact op Core Web Vitals en de PageSpeed-score
Google PageSpeed Insights rapporteert expliciet niet-geminificeerde CSS- en JavaScript-bestanden als verbeterkans, met een schatting van de te besparen KB. Minification verbetert met name de TBT (Total Blocking Time) door de parseduur van JS-bestanden te verkorten, en draagt bij aan een betere LCP (Largest Contentful Paint) door de laadtijd van blokkerende resources te verminderen.
De winst op de PageSpeed-score hangt af van de hoeveelheid niet-geminificeerde code in jouw webwinkel. In een typische PrestaShop-webwinkel met meerdere modules die elk hun eigen CSS- en JS-bestanden toevoegen, kan minification 5 tot 15 punten opleveren op de mobiele score.
Minification in PrestaShop: ingebouwde instellingen
PrestaShop biedt standaard minificatie- en concatenatieopties in de back-office, toegankelijk via Geavanceerde instellingen > Prestaties. Er zijn twee opties beschikbaar: de minificatie van HTML-, CSS- en JavaScript-bestanden enerzijds, en de samenvoeging van CSS- en JS-bestanden tot één enkel bestand anderzijds (wat het aantal HTTP-aanvragen vermindert).
- Activeren via: Back-office → Geavanceerde instellingen → Prestaties → CCC (Combineren, Comprimeren, Cachen)
- "CSS comprimeren": minificeert en voegt stylesheets samen tot één bestand
- "JavaScript comprimeren": minificeert en voegt JS-bestanden samen tot één bestand
- "Apache-optimalisatie": activeert GZIP-compressie aan de serverzijde
- Let op: slecht gecodeerde modules kunnen conflicten veroorzaken bij samenvoeging — test na activering