CSS Verkleinern für Schnellere Ladezeiten
Entfernen Sie Kommentare und überflüssige Leerzeichen aus Ihrem CSS, um die Dateigröße sofort zu reduzieren.
Ihr Stylesheet bleibt auf dem Gerät
Nichts, was später zu löschen wäre
Sicher für unveröffentlichte Oberflächen
Läuft in jedem modernen Browser
So funktioniert es
- 1
CSS einfügen
Ein Stylesheet, die Stile einer Komponente oder ein Block, der vor dem Ausliefern kleiner werden soll.
- 2
Größen prüfen
Vergleichen Sie verkleinert und komprimiert und lesen Sie Hinweise, bevor Sie das Original ersetzen.
- 3
Ausgabe kopieren
Nehmen Sie sie in eine Build-Ausgabe, einen `<style>`-Block oder eine Vorlage.
Warum dieses Tool
Reihenfolge der Deklarationen bleibt
Nichts wird umsortiert, denn die Kaskade entscheidet Gleichstand über die Position, und eine verschobene Regel ändert die Darstellung.
Rückfalllösungen bleiben erhalten
Eine zweimal deklarierte Eigenschaft ist meist ein bewusster Rückfall für ältere Browser, keine zu löschende Doppelung.
Kein unsicheres Kurzschreibweise-Zusammenfassen
Langformen in eine Kurzform zu falten setzt die nicht genannten Seiten zurück — das geschieht hier nicht stillschweigend.
Komprimierte Größe gezeigt
Die verkleinerte Zahl neben der gzip-Zahl, denn nur letztere lädt der Browser wirklich herunter.
Dort ausgewertet, wo es hingehört
Ein Browser ist bereits eine CSS-Maschine, es braucht also keine Anfrage und die Datei bleibt einfach auf der Seite.
Ohne Grenzen und ohne Anmeldung
Nutzen Sie es für eine einzelne Regel oder für den Build eines ganzen Frameworks, so oft Sie wollen.
Reihenfolge ist Bedeutung, und das begrenzt, was ein Verkleinerer gefahrlos darf
CSS entscheidet konkurrierende Deklarationen zuerst über die Spezifität und dann über die Dokumentreihenfolge: Bei gleichem Gewicht gewinnt die später geschriebene. Damit ist die Position Teil der Bedeutung eines Stylesheets, und deshalb ist aggressives Optimieren hier riskanter als in den meisten Sprachen. Ein Werkzeug, das alle Regeln mit gleichem Selektor gruppiert, oder Deklarationen für bessere Komprimierung sortiert, oder zwei Blöcke zusammenlegt, die zufällig dieselben Eigenschaften nennen, kann eine Datei erzeugen, die Byte für Byte kleiner und optisch anders ist — weil eine Regel, die zuvor zuletzt kam, das nicht mehr tut. Immer sichere Reduktionen sind jene, die nichts verschieben: Leerraum entfernen, Kommentare entfernen und Werte verkürzen, deren Bedeutung feststeht. Alles, was umsortiert, muss Ihre gesamte Kaskade verstehen — ein Werkzeug auf Textebene tut das nicht.
Dieselbe Eigenschaft zweimal ist meist ein Rückfall, kein Fehler
Das ist der Fall, in dem „das Duplikat entfernen“ eine Seite zerlegt. Eine Eigenschaft zweimal im selben Block zu deklarieren ist der übliche Weg, ältere Browser zu unterstützen: `color: #ccc` gefolgt von `color: rgba(0, 0, 0, .5)` heißt, dass ein Browser, der die zweite versteht, sie nimmt, und einer, der sie nicht versteht, auf die erste zurückfällt — denn eine nicht auswertbare Deklaration wird verworfen, nicht fatal. Dasselbe Muster deckt `display: -webkit-box` vor `display: flex`, eine Pixelbreite vor einer `calc()`-Breite und eine Volltonfarbe vor einem Verlauf. Ein Verkleinerer, der zwei Deklarationen einer Eigenschaft sieht und nur die letzte behält, hat die Unterstützung entfernt; einer, der nur die erste behält, hat die Funktion entfernt. Beide irren, und das richtige Verhalten ist, das Paar unangetastet zu lassen.
Langform in Kurzform zu fassen setzt zurück, was Sie nicht genannt haben
Das ist die feinste Korrektheitsfalle der CSS-Optimierung. Setzt eine Regel `margin-top` und `margin-left`, so lässt ihr Zusammenfalten in eine einzige `margin`-Deklaration die anderen beiden Seiten nicht unberührt — eine Kurzform setzt jede Eigenschaft ihrer Gruppe, also werden die nicht genannten Seiten auf ihre Ausgangswerte zurückgesetzt und verwerfen alles Geerbte oder von einer früheren Regel Gesetzte. `background` ist schlimmer, denn es setzt eine lange Liste zurück, darunter `background-size` und `background-position`; ein Zusammenfassen kann ein anderswo deklariertes `background-size: cover` stillschweigend aufheben. `font` verhält sich mit `line-height` genauso. Der Gewinn solcher Zusammenfassungen ist klein und der Fehler ein Layout, das in der Datei richtig und im Browser falsch aussieht — deshalb führt dieses Werkzeug sie nicht durch.
Der große Gewinn sind unbenutzte Regeln, und das ist schwerer als es aussieht
Ein Stylesheet zu verkleinern trimmt vielleicht ein Fünftel. Die Regeln zu entfernen, die eine Seite nie nutzt, kann neunzig Prozent trimmen, denn ein Allzweck-Framework liefert Stile für jede Komponente und jede Variante, während eine gegebene Seite eine Handvoll benutzt. Dort liegt die eigentliche Größe — und es sicher zu tun ist wirklich schwierig, aus einem CSS-eigenen Grund. Ein Bereinigungswerkzeug durchsucht Ihre Vorlagen und Ihren Code nach Klassennamen und behält die passenden Regeln. Einen zur Laufzeit zusammengesetzten Namen sieht es nicht: `"btn-" + variant` sieht für es nach nichts aus, und die Regel für `btn-danger` wird gelöscht, während der Code, der sie braucht, weiterläuft. Alles dynamisch Gebaute, von einem Fremd-Widget Eingefügte oder nach dem Laden per JavaScript Ergänzte muss als Ausnahme aufgelistet werden — und diese Liste macht Bereinigen zu einem Projekt statt zu einem Schalter.
CSS blockiert die Darstellung, seine Größe kostet also etwas anderes
Warum die Größe zählt, ist bei CSS nicht dasselbe wie bei Skripten. Ein Browser zeichnet keine Inhalte, die ein noch ausstehendes Stylesheet umgestalten könnte; ein Stylesheet im Kopfbereich blockiert also die Darstellung: Bis es angekommen und ausgewertet ist, bleibt die Seite leer. Damit landet der Preis für CSS-Gewicht direkt beim ersten Zeichnen — dem Teil des Ladens, den Nutzende am stärksten wahrnehmen — und das ist das stärkste Argument, das kritische Stylesheet klein zu halten. Es erklärt auch, warum der Standardrat lautet, die kleine Menge CSS für den sichtbaren Bereich einzubetten und den Rest asynchron zu laden: eine strukturelle Änderung, die weit mehr hilft als Verkleinerung. Wenn Sie nur eines tun können, schlägt das Aufteilen des Stylesheets sein Komprimieren.
Warum lokales Verkleinern bei dieser Art Datei zählt
Ein Stylesheet ist weniger offensichtlich vertraulich als Anwendungscode und beschreibt dennoch mehr, als bemerkt wird. Klassennamen kartieren Ihre Oberfläche: Sie benennen Komponenten, die noch nicht ausgeliefert sind, Varianten eines laufenden Experiments, Bereiche, die nur Verwaltende sehen, und Funktionen hinter einem Schalter. Kommentare in CSS sind freimütig, wie es Kommentare anderswo nicht sind — ein Kundenname, eine Notiz, welcher Browser brach, eine Erinnerung, dass ein Wert einen Fehler einer bestimmten Version umgeht. Ein Produktiv-Stylesheet in einen gehosteten Verkleinerer einzufügen übergibt all das für eine Größenreduktion, die lokal verfügbar ist. Dieses Werkzeug verarbeitet die Datei auf der Seite und überträgt nichts, nachprüfbar im Netzwerk-Tab der Entwicklerwerkzeuge.
Häufige Fehler, die Sie vermeiden sollten
- Eine zweimal in einem Block deklarierte Eigenschaft entfernen. Das ist fast immer ein bewusster Rückfall für ältere Browser — nur eine der beiden zu behalten entfernt entweder die Unterstützung oder die Funktion.
- Langformen in eine Kurzform zusammenfassen. Eine Kurzform setzt jede Eigenschaft ihrer Gruppe, die nicht genannten Seiten werden also auf ihre Ausgangswerte zurückgesetzt.
- Ein Werkzeug Regeln für bessere Komprimierung umsortieren oder gruppieren lassen. Die Kaskade entscheidet Gleichstand über die Dokumentreihenfolge — eine kleinere Datei kann anders aussehen.
- Erwarten, dass Verkleinerung die Stylesheet-Größe löst. Unbenutzte Regeln sind meist die Masse; Verkleinerung trimmt etwa ein Fünftel dessen, was ein Durchgang gegen unbenutztes CSS trimmen würde.
- Unbenutztes CSS bereinigen, ohne dynamische Klassennamen aufzulisten. Ein als `"btn-" + variant` zusammengesetzter Name ist für einen Scanner unsichtbar — seine Regel verschwindet, während der Code weiterläuft.
Im Vergleich
| Kriterium | Dieses Werkzeug | Online-Verkleinerer | Eine Build-Kette |
|---|---|---|---|
| Stylesheet an einen Server gesendet | Nie | Meistens ja | Nein |
| Erhält die Deklarationsreihenfolge | Immer | Meistens | Meistens |
| Behält Browser-Rückfälle | Ja | Unterschiedlich | Einstellbar |
| Entfernt unbenutzte Regeln | Nein | Nein | Mit einem Bereinigungsschritt |
| Komprimierte Größe gezeigt | Ja | Selten | Mit einer Erweiterung |
| Preis | Kostenlos | Kostenlos / Bezahltarife | Kostenlos |
Funktionen
Leerraum und Kommentare entfernen
Alles, was der Parser ignoriert, fällt weg, auch die Leerzeilen, die Ihre Regeln gruppieren.
Sicheres Verkürzen von Werten
Farben auf ihre kürzeste gleichwertige Form gebracht und Null-Einheiten beschnitten, wo sich die Bedeutung nicht ändern kann.
Reihenfolgesicher durch Entwurf
Regeln behalten ihre Position, sodass Spezifität und Quellreihenfolge weiterhin gleich aufgelöst werden.
Beide Größen gemeldet
Roh und komprimiert, denn Komprimierung fasst das meiste, was Verkleinerung entfernt, schon selbst zusammen.
Moderne Syntax verstanden
Eigene Eigenschaften, Verschachtelung, Container-Abfragen und Ebenen gehen unbeschädigt durch.
Verträgt große Stylesheets
Ein ganzer Framework-Build wird ohne Upload und ohne Größenobergrenze verkleinert.
Nichts zu installieren
Kein Build-Werkzeug, keine Laufzeitumgebung, keine Abhängigkeiten — es läuft auf der Webseite.
Bereit für Arabisch und RTL
Vollständige Oberfläche in acht Sprachen, darunter Arabisch von rechts nach links.
Standardmäßig sicher
Über HTTPS ausgeliefert, ohne Inhaltsverfolgung und ohne Upload an Dritte.
Wer es nutzt
Frontend-Entwicklung
Ein Stylesheet verkleinern, das keinen Build-Schritt durchläuft.
Web-Performance
Das darstellungsblockierende Stylesheet verkleinern, das das erste Zeichnen aufhält.
E-Mail-Entwicklung
Stile verdichten, die in eine Vorlage mit Größenbegrenzung eingebettet werden müssen.
Wer einen Stilblock einbettet
Komponentenstile klein genug für den Kopfbereich einer Seite bekommen.
Häufig Gestellte Fragen
Nein. Alles läuft lokal im Browser — Ihr Text wird nie hochgeladen, gespeichert oder geteilt.
Ja — komplett kostenlos, ohne Konto und ohne Limits.