CSS hat direkten Einfluss auf alle drei Core Web Vitals. Render-blocking CSS verschlechtert LCP und FCP. Unspezifizierte Bildgrößen verursachen CLS. Zu große CSS-Dateien verlängern den gesamten Ladevorgang. Dieser Artikel zeigt konkrete CSS-Optimierungsstrategien die Core Web Vitals messbar verbessern.
CSS und LCP: Render-Blocking Stylesheet vermeiden
Das größte CSS-Problem für LCP: Externe Stylesheets blockieren das Rendering bis sie vollständig geladen sind.
Standard (blockierend):
<head>
<link rel="stylesheet" href="styles.css">
<!-- Seite wird erst nach CSS-Download gerendert -->
</head>Optimiert (non-blocking + Critical CSS):
<head>
<!-- Critical CSS inline: kein Download-Wait -->
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #fff; padding: 20px; }
h1 { font-size: 2rem; color: #000229; }
/* Nur Above-the-fold Styles */
</style>
<!-- Rest nicht-blockierend laden -->
<link rel="stylesheet" href="styles.css" media="print"
onload="this.media='all'">
</head>Das Inlinen von Critical CSS und nicht-blockierendes Laden des vollständigen Stylesheets verbessert FCP und LCP in Benchmarks um 0,3–0,8 Sekunden – genug um von „Verbesserungsbedarf” zu „Gut” zu springen.
CSS und CLS: Bildgrößen immer angeben
Cumulative Layout Shift (CLS) entsteht wenn sich Elemente während des Ladens verschieben. CSS-Ursachen:
Problem: Bilder ohne Größenangabe im HTML verschieben Content beim Laden.
<!-- CLS verursacht: -->
<img src="hero.webp" alt="Hero">
<!-- CLS vermieden: -->
<img src="hero.webp" alt="Hero" width="1200" height="600">Die width und height Attribute ermöglichen es dem Browser, den richtigen Platz zu reservieren bevor das Bild geladen ist – kein Layout-Shift.
In CSS mit aspect-ratio:
.responsive-image {
width: 100%;
aspect-ratio: 2 / 1; /* 2:1 Verhältnis beibehalten */
height: auto;
}Unused CSS entfernen: Dateigrößen reduzieren
Viele Themes und Frameworks laden CSS für Features die auf einer bestimmten Seite nie genutzt werden. Jedes KB CSS verlängert den Ladevorgang.
Tools zum Identifizieren von Unused CSS:
- Chrome DevTools Coverage Tab
- PurgeCSS (npm-Tool)
- UnCSS (online-Tool)
PurgeCSS in Build-Workflow integrieren (PostCSS):
// postcss.config.js
module.exports = {
plugins: [
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html', './src/**/*.js'],
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}CSS für Schriften: FOIT und FOUT vermeiden
Font-related CLS und FCP-Probleme entstehen durch:
FOIT (Flash of Invisible Text): Font ist geladen, Fallback-Schrift ist ausgeblendet → kein Text sichtbar während Font lädt.
FOUT (Flash of Unstyled Text): Fallback-Schrift wird angezeigt, dann springt Text zur echten Font → Layout-Shift.
CSS-Lösung: font-display
@font-face {
font-family: 'Meine Font';
src: url('/fonts/meine-font.woff2') format('woff2');
font-display: swap; /* FOIT verhindern, FOUT akzeptieren */
}font-display: swap zeigt die Fallback-Schrift sofort und wechselt zur echten Font wenn sie verfügbar ist. Das verhindert FOIT, kann aber minimale FOUT-CLS verursachen.
font-display: optional lädt Font nur wenn er sehr schnell verfügbar ist – kein FOIT, kein FOUT, aber Font könnte nicht angezeigt werden.
Kombinieren Sie font-display: optional mit Preloading: Wenn der Font durch Preloading sehr früh geladen wird, schafft er es in der Regel vor dem ersten Paint – womit optional zu einem CLS-freien swap wird. Das ist die beste Kombination für CLS und LCP gleichzeitig.
contain: size und content-visibility
Moderne CSS-Properties ermöglichen Performance-Optimierungen die Browser-Rendering beschleunigen:
content-visibility: auto (für lange Seiten)
.article-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* Geschätzte Höhe */
}Der Browser überspringt das Rendering von Inhalten außerhalb des Viewports – erhebliche Performance-Verbesserung für lange Seiten.
contain: layout paint
.sidebar {
contain: layout paint;
}Isoliert Reflow und Repaint auf den Container – verhindert dass Änderungen an diesem Element andere Teile der Seite beeinflussen.
CSS minimieren und komprimieren
Einfache aber wirksame Maßnahmen:
Minifizierung: Entfernt Whitespace, Kommentare und redundante Zeichen. 20–30 % Größenreduktion typisch.
Gzip/Brotli-Komprimierung: Server-seitig komprimiertes CSS. Brotli ist moderner und oft 15–20 % effizienter als Gzip.
CSS-Kombinierung: Mehrere CSS-Dateien in eine zusammenführen – reduziert HTTP-Requests.
Die Kombination aus Critical CSS Inlining + non-blocking CSS Loading + Unused CSS Removal reduziert die CSS-bezogenen Core Web Vitals Einbußen um durchschnittlich 60 % – in vielen Fällen der wichtigste einzelne Optimierungsschritt.
Mehr zu Performance-Optimierung finden Sie in unserem Artikel über render-blocking Ressourcen.