Gratis CSS-minifier: Comprimeer & Optimaliseer CSS-code Online

Wat is een CSS-minifier?

Een CSS-minifier is een hulpmiddel dat een CSS-bestand (Cascading Style Sheets) verkleint door tekens te verwijderen die browsers niet nodig hebben. Het verwijdert opmerkingen, extra spaties en regeleinden en verkort enkele veelvoorkomende patronen, zonder te veranderen hoe de pagina eruitziet. Het resultaat is een kleiner bestand dat een browser sneller kan downloaden en verwerken.

Hoe CSS-minificatie werkt

Webontwikkelaars schrijven CSS met opmerkingen, inspringingen en lege regels, omdat die het voor mensen gemakkelijker maken om de code te lezen en te bewerken. Browsers negeren al die opmaak. Een minifier verwijdert deze opmaak, samen met enkele andere bytes die geen visueel doel dienen, en laat een compact bestand over dat bedoeld is voor gebruik in productie in plaats van voor bewerking.

Dit hulpmiddel voert de volgende wijzigingen uit:

• Verwijdert opmerkingen. Elk blok /* ... */ wordt verwijderd.
• Voegt witruimte samen. Reeksen spaties, tabs en regeleinden tussen regels worden teruggebracht tot niets, of tot één spatie wanneer een spatie betekenisvol is, bijvoorbeeld tussen .parent en .child in een selector voor afstammelingen.
• Verwijdert witruimte rond leestekens. Spaties naast {, }, :, ; en , worden verwijderd.
• Verwijdert extra puntkomma's. Herhaalde puntkomma's worden samengevoegd tot één puntkomma en de laatste puntkomma vóór een afsluitende } wordt verwijderd.
• Verkort hexadecimale kleuren. Een kleur met zes cijfers, zoals #ffffff, wordt #fff wanneer elk paar cijfers overeenkomt (rood, groen en blauw). Een kleur met acht cijfers en alfakanaal, zoals #ffaa00cc, wordt op dezelfde manier verkort wanneer alle vier de paren overeenkomen.
• Verwijdert de eenheid bij waarden met lengte nul. 0px, 0em en 0rem worden 0. Percentages blijven ongewijzigd, omdat 0% niet altijd uitwisselbaar is met gewoon 0, bijvoorbeeld in een stap van flex-basis of @keyframes.
• Verwijdert een voorloopnul bij decimalen. 0.5 wordt .5.

Om te voorkomen dat het bestand beschadigd raakt, laat het hulpmiddel drie soorten inhoud ongemoeid: tekst tussen aanhalingstekens, de waarde in een URL zonder aanhalingstekens url() en de inhoud van wiskundige functies zoals calc(), clamp(), min() en max(). Spaties in calc(100% - 20px) zijn belangrijk voor de browser, dus het hulpmiddel bewaart ze exact.

Het hulpmiddel voegt geen dubbele selectors samen, verwijdert geen lege regelblokken en zet kleuren in rgb() niet om naar hexadecimale notatie. Dat zijn geldige optimalisaties die andere hulpmiddelen uitvoeren, maar deze minifier richt zich op de hierboven genoemde wijzigingen.

De formule voor het reductiepercentage

Het hulpmiddel rapporteert hoeveel kleiner het bestand is geworden, als percentage:

Beide lengtes worden geteld in tekens. Het resultaat wordt afgerond op twee decimalen.

Uitgewerkt voorbeeld

Oorspronkelijke CSS (193 tekens):

Verkleinde uitvoer (129 tekens):

Toepassing van de formule: (193 − 129) / 193 × 100 = 33,16%. De opmerking is verdwenen, net als de inspringing en regeleinden; 0px werd 0 en #ffffff/#000000 werd #fff/#000.

Het exacte percentage hangt af van de invoer. Zorgvuldig geschreven CSS met weinig opmerkingen wordt minder sterk verkleind. CSS met veel opmerkingen en diepe inspringing kan sterker worden verkleind. Bij typische stylesheets die met dit hulpmiddel worden verkleind, bedraagt de vermindering ongeveer 20% tot 40%.

Deze tool gebruiken

1. Plak CSS-code in het invoervak aan de linkerkant.
2. De geminificeerde versie wordt automatisch aan de rechterkant weergegeven, zonder knop om op te drukken.
3. Controleer het reductiepercentage dat boven de uitvoer wordt weergegeven.
4. Selecteer "Naar klembord kopiëren" om de geminificeerde CSS te kopiëren en plak deze vervolgens in een projectbestand.
5. Selecteer "Wissen" om beide vakken leeg te maken en opnieuw te beginnen.

Niets wat in het hulpmiddel wordt getypt, wordt naar een server verzonden; de minificatie wordt in de browser uitgevoerd.

Wanneer CSS te minificeren

Ontwikkelteams minificeren CSS vaak als stap in hun buildproces, met hulpmiddelen zoals Webpack of npm-scripts, zodat de wijziging vóór elke implementatie automatisch plaatsvindt. Het leesbare bronbestand met opmerkingen blijft onder versiebeheer; alleen de productiebuild wordt verkleind. Veelvoorkomende toepassingen van geminificeerde CSS zijn:

• Grote websites, zoals webwinkels, waar een kleiner stylesheet een sneller ladende pagina betekent.
• Singlepageapplicaties die zijn gebouwd met frameworks zoals React of Vue, waarbij CSS samen met JavaScript wordt gebundeld.
• Mobiele webpagina's, waarop gebruikers vaker een tragere verbinding hebben.
• HTML-e-mails, die vaak strikte groottelimieten hebben.

CSS-minificatie en paginasnelheid

Een kleiner CSS-bestand wordt sneller gedownload en verwerkt, waardoor de tijd tot een pagina zichtbaar wordt korter kan worden. Google heeft verklaard dat paginasnelheid een van de signalen is die bij de rangschikking in zoekresultaten wordt gebruikt. Een snellere pagina kan dus een kleine factor zijn in de prestaties van een website in zoekresultaten. Minificatie alleen garandeert geen verandering in de rangschikking; het is een van meerdere optimalisaties, naast onder andere afbeeldingscompressie en de responstijd van de server.

CSS-minifier versus CSS-beautifier

Een minifier comprimeert code voor productiegebruik. Een beautifier doet het omgekeerde: deze neemt gecomprimeerde CSS en maakt de opmaak met inspringing en regeleinden opnieuw leesbaar. Een beautifier kan opmerkingen of oorspronkelijke variabelenamen die tijdens de minificatie zijn verwijderd niet herstellen, omdat die informatie na verwijdering verdwenen is.

Veelgestelde vragen

Hoeveel kleiner wordt CSS na minificatie? Met dit hulpmiddel meestal 20% tot 40%, afhankelijk van het aantal opmerkingen, lege regels en inspringingen in het oorspronkelijke bestand. Een bestand met van meet af aan weinig opmaak wordt minder sterk verkleind.

Verandert minificatie van CSS hoe een pagina eruitziet? Nee. Minificatie verwijdert alleen tekens die browsers negeren, zoals opmerkingen en extra witruimte, en herschrijft enkele equivalente waarden, zoals #ffffff naar #fff. De weergegeven pagina blijft hetzelfde.

Moet CSS tijdens het ontwikkelen worden verkleind? Nee. Behoud de leesbare versie met opmerkingen tijdens het schrijven en debuggen van code. Minificeer alleen de kopie die naar een productieserver gaat, meestal als automatische stap in het buildproces.

Kan geminificeerde CSS worden teruggezet naar het oorspronkelijke bestand? Een beautifier kan geminificeerde CSS opnieuw opmaken met inspringing, maar kan verwijderde opmerkingen niet terughalen en beschrijvende namen die nooit in de geminificeerde versie stonden niet herstellen. Bewaar het oorspronkelijke bronbestand.

Zet dit hulpmiddel kleuren in rgb() om naar hexadecimale notatie of voegt het dubbele selectors samen? Nee. Het verkort hexadecimale kleuren en verwijdert onnodige tekens, maar herschrijft waarden in rgb()/hsl() niet en voegt herhaalde selectors niet samen. Sommige andere minifiers voeren die extra stappen wel uit.

Is minificatie hetzelfde als gzip-compressie? Nee. Minificatie verwijdert onnodige tekens uit de broncode zelf. Gzip- of Brotli-compressie wordt door de webserver toegepast wanneer het bestand wordt verzonden, met een afzonderlijk algoritme. Door beide samen te gebruiken ontstaat het kleinste bestand voor verzending via het netwerk.