CSS minifier
Verklein CSS-bestanden en zie precies hoeveel je bespaart.
Draait in je browser. Niets van wat je typt wordt ergens naartoe gestuurd.
- Toont bespaarde bytes
- Verwijdert commentaar
- Niets wordt geüpload
Zo minify je CSS
- Plak je CSS.
- Bekijk de bespaarde ruimte in de statistiekenregel.
- Kopieer of download de verkleinde CSS.
Wat wordt verwijderd
- Commentaar geschreven als /* ... */
- Witruimte en regeleinden tussen regels en declaraties
- Een laatste puntkomma vlak vóór een sluitende accolade
- Dubbele of overbodige regels, waar csso ze veilig kan samenvoegen
- Extra puntkomma's en lege regelblokken zonder declaraties erin
Typische besparing in bestandsgrootte
| Startpunt | Ongeveer hoeveel kleiner |
|---|---|
| Met de hand geschreven CSS met commentaar | 20 tot 30 procent |
| Al compacte CSS | 5 tot 10 procent |
| CSS gegenereerd door een preprocessor | 10 tot 20 procent |
Wanneer je wel en niet moet minifyen
- Minify vlak voor het uitrollen, niet terwijl je actief aan het bewerken bent, want een leesbare stylesheet debugt veel sneller.
- Sla minify over bij een bestand dat al gzipped en klein wordt uitgeleverd, waar het verschil in grootte de extra buildstap niet waard is.
Wanneer minifyen het meeste verschil maakt
- Stylesheets die op veel pagina's worden gedeeld, omdat de bespaarde bytes zich vermenigvuldigen bij elke paginaweergave.
- Grote designsystemen of componentbibliotheken met veel herhaalde, samen te voegen regels.
- Sites zonder buildpipeline, waar met de hand geschreven CSS rechtstreeks wordt uitgeleverd zonder verdere minify-stap.
- Een CSS-framework teruggebracht tot alleen de utility-classes die echt op de pagina worden gebruikt.
Veelgestelde vragen over CSS minifier
Hoeveel kleiner wordt mijn CSS?
Meestal 10 tot 30 procent, meer als het origineel veel commentaar en witruimte bevat, minder als het al compact is.
Verandert minify hoe mijn pagina eruitziet?
Nee. Minify verwijdert alleen witruimte, commentaar en overbodige syntax. De regels die voor je pagina gelden blijven hetzelfde.
Voegt dit dubbele regels samen?
Ja, waar dat veilig kan, wat het bestand verder kan verkleinen dan alleen het verwijderen van witruimte.
Moet ik het originele bestand bewaren?
Ja. Bewaar de leesbare versie om te bewerken en gebruik de verkleinde versie alleen in productie.
Welke minifier gebruikt dit?
csso, dezelfde CSS-minifier die verschillende bundlerplugins gebruiken. Die voegt ook sommige dubbele en overbodige regels samen, verder dan alleen het verwijderen van witruimte.
Is geminificeerde CSS nog steeds veilig om in een stylesheet te plakken?
Ja, het is gewone CSS waar de witruimte uit is gehaald. Elke browser of buildtool leest het precies hetzelfde als het origineel.
Verwijdert het vendor-prefixes die ik nog nodig heb, zoals -webkit-?
Nee. Eigenschappen en waarden met een vendor-prefix blijven precies zoals geschreven. Minify verwijdert alleen witruimte, commentaar en veilig samen te voegen regels, nooit een eigenschap die je CSS echt declareert.
Wat gebeurt er met CSS custom properties (variabelen)?
Die blijven ongewijzigd, inclusief hun --namen en waarden, aangezien minify custom properties niet hernoemt of oplost.