CSS-Performance und LCP in DACH-Webprojekten
Largest Contentful Paint (LCP) misst, wie schnell der Hauptinhalt einer Seite angezeigt wird. Render-blockierendes CSS verzogert LCP direkt. In deutschen Unternehmenswebseiten mit Tailwind CSS oder Bootstrap akkumulieren sich oft grosse Stylesheet-Dateien, die in der Entwicklung alle Klassen enthalten. Die Barrierefreiheitsnorm BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) stellt Performance-Anforderungen fur offentliche Stellen, schlechte Core Web Vitals konnen die Compliance beeintrachtigen. Dieses Tool verarbeitet Ihr CSS vollstandig im Browser.
Was Minifizierung bewirkt
- Entfernt
/* Blockkommentare */ - Entfernt fuhrende und nachgestellte Leerzeichen jeder Zeile
- Reduziert mehrere Leerzeichen auf eines
- Entfernt Leerzeilen zwischen Regelblöcken
- Entfernt uberflussige Semikolons vor schliessenden geschweiften Klammern
Minifizierung vs. CSS-Purging
| Technik | Grossenreduktion | Was sie tut |
|---|---|---|
| Minifizierung (dieses Tool) | 15-30 % | Entfernt Leerzeichen und Kommentare |
| PurgeCSS / Tailwind Purge | 60-95 % | Entfernt nicht verwendete CSS-Regeln |
| Critical CSS Inlining | Variabel | Inline-Styles fur above-the-fold, Rest defer |
Tailwind CSS und Bootstrap sind in DACH-Projekten weit verbreitet. Fur Tailwind ist das Purging von ungenutzten Klassen der wirkungsvollste Schritt, die resultierende Datei kann von Megabytes auf wenige Kilobytes schrumpfen. Minifizierung ist danach der letzte Optimierungsschritt.
Beautifier und Workflow
Mit dem Beautifier konnen Sie minifizierte Stylesheets von Drittanbietern beim Debuggen lesbar machen. Fur CI-Pipelines empfehlen sich cssnano oder Lightning CSS. Kombinieren Sie dieses Tool mit dem JavaScript Minifier fur eine Gesamtreduktion der Seitenressourcen.