CSS-Optimierung: Leistung, Größe und Ladezeit

Warum CSS-Performance wichtig ist

CSS ist eine render-blockierende Ressource. Der Browser kann die Seite nicht rendern, ohne CSS zu laden. Große CSS-Dateien erhöhen die First Contentful Paint (FCP) Zeit.

Ungenutztes CSS erhöht die Seitengröße und verlängert die Ladezeit. Typischerweise 60-80% des CSS auf einer Website wird nicht genutzt.

CSS-Optimierung verbessert Core Web Vitals Metriken (insbesondere LCP und CLS). Optimiertes CSS bietet ein schnelleres und flüssigeres Nutzererlebnis.

CSS-Minifizierung

Minifizierung reduziert die Dateigröße um 20-40% durch Entfernung von Leerzeichen, Kommentaren und unnötigen Zeichen aus CSS.

Werkzeuge: cssnano, clean-css, Terser (CSS-Unterstützung). Verwenden Sie Minifizierungs-Plugin in Ihrer Build-Pipeline (Webpack, Vite, Rollup).

In Kombination mit Gzip/Brotli-Komprimierung kann Minifizierung die CSS-Dateigröße um 70-80% reduzieren.

Verwenden Sie in Production-Builds immer minifiziertes CSS. In Development lesbares CSS verwenden.

Kritisches CSS

Kritisches CSS ist das CSS, das für above-the-fold (erste Ansicht) Inhalt benötigt wird. Fügen Sie dieses CSS inline in <head> ein.

Nicht-kritisches CSS async laden: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Werkzeuge: Critical (npm-Paket), Penthouse, Critters (Webpack-Plugin). Diese Werkzeuge extrahieren kritisches CSS automatisch.

Kritische CSS-Größe: Unter 14KB halten (TCP Slow Start Window). Größeres kritisches CSS bläht die initiale Payload auf.

Ungenutztes CSS entfernen

PurgeCSS entfernt ungenutzte CSS-Selektoren. Wird zusammen mit Frameworks wie Tailwind CSS, Bootstrap verwendet.

PurgeCSS-Konfiguration: Definieren Sie content (zu scannende HTML/JS-Dateien) und safelist (zu behaltende Selektoren).

Chrome DevTools Coverage-Tab: Ungenutztes CSS erkennen. Coverage-Bericht zeigt, wie viel von jeder Datei genutzt wird.

CSS-in-JS: Bibliotheken wie Styled Components, Emotion rendern nur verwendete Styles. Ungenutztes CSS wird automatisch entfernt.

CSS-Ladestrategien

Code Splitting: Erstellen Sie separate CSS-Datei für jede Seite. Verwenden Sie Webpack CSS Code Splitting oder Vites automatisches Splitting.

Lazy Loading: Lazy load CSS für bestimmte Komponenten (Modal, Tooltip). CSS-Datei bei Bedarf mit dynamic import() laden.

Font Loading: Verwenden Sie font-display: swap mit @font-face. Minimieren Sie FOIT (Flash of Invisible Text) und FOUT (Flash of Unstyled Text) Probleme.

Media Queries: Bedingtes CSS (Druck, Dark Mode) in separate Dateien aufteilen: <link rel="stylesheet" href="print.css" media="print">.

Preconnect: Verwenden Sie <link rel="preconnect" href="https://fonts.googleapis.com"> für externe CSS-Quellen (Google Fonts).

CSS Best Practices

Halten Sie CSS-Specificity niedrig. Tiefe Selektor-Ketten (div > ul > li > a) reduzieren die Leistung. Verwenden Sie flache Selektoren.

Verwenden Sie Flexbox und Grid. Float-basierte Layouts erfordern mehr CSS und rendern langsamer.

CSS Containment: Begrenzen Sie den Render-Bereich des Elements mit contain: layout paint style. Dies ermöglicht dem Browser, den Render-Bereich zu optimieren.

Will-change: Verwenden Sie will-change: transform auf animierten Elementen. Aber übermäßiger Gebrauch reduziert die Leistung.

Verwenden Sie CSS Custom Properties (Variablen). Verwalten Sie wiederholte Werte (Farbe, Größe) mit Variablen.