Wie du CSS für eine optimale Leistung deiner Webseite optimierst

Auch im Jahr 2021 bleibt die Webleistung ein Problem. Laut HTTP Archive benötigt eine durchschnittliche Seite einen Download von 2 MB, stellt mehr als 60 HTTP-Anfragen und braucht 18 Sekunden, um auf einem mobilen Gerät vollständig geladen zu werden. Stylesheets machen 60 kB aus, die sich auf sieben Anfragen verteilen. Daher haben sie selten oberste Priorität, wenn es darum geht, Leistungsprobleme zu lösen.

CSS hat jedoch eine Wirkung, auch wenn sie noch so gering erscheint. Wenn du dich um dein JavaScript gekümmert hast, solltest du als Nächstes lernen, CSS richtig zu optimieren.

Lass uns damit anfangen!

Wie sich CSS auf die Leistung einer Seite auswirkt

CSS sieht unschuldig aus, kann aber eine hohe Rechenleistung erfordern.

CSS ist ein Render-Blocker

Wenn dein Browser auf ein <link>-Tag stößt, hält er andere Browser-Downloads und -Verarbeitungen an, während er die CSS-Datei abruft und analysiert.

Auch JavaScript kann das Rendering des Browsers blockieren, aber eine asynchrone Verarbeitung ist damit möglich:

Das async-Attribut, um Skripte parallel herunterzuladen, die sofort ausgeführt werden, wenn sie bereit sind.
Das defer-Attribut, um Skripte parallel herunterzuladen, die dann der Reihe nach ausgeführt werden, wenn das DOM fertig ist.
Das Attribut type="module", um ein ES-Modul zu laden (das sich wie defer verhält).

Assets wie Bilder benötigen oft mehr Bandbreite, aber es gibt effiziente Formate, und sie können „lazy“ geladen werden (loading="lazy"-Attribut), ohne das Browser-Rendering zu blockieren.

All das ist bei CSS nicht möglich. Die Datei wird im Cache gespeichert, so dass nachfolgende Seitenladevorgänge schneller sein sollten, aber der Rendering-Blockiervorgang bleibt bestehen.

Große CSS-Dateien brauchen Zeit zum Verarbeiten

Je größer dein Stylesheet ist, desto länger dauert es, es herunterzuladen und in ein CSS-Objektmodell (CSSOM) umzuwandeln, das der Browser und die JavaScript-APIs verwenden können, um die Seite anzuzeigen. Obwohl CSS-Stylesheets kleiner sind als die meisten anderen Dateien auf Webseiten, gilt auch für sie die Faustregel „kleiner ist besser“.

CSS-Dateien wachsen

Es kann schwierig sein, Stile zu erkennen, die nicht mehr verwendet werden, und das Entfernen der falschen Stile kann auf einer Webseite verheerende Folgen haben. Entwickler entscheiden sich in der Regel für den sichersten Ansatz: „Alles beibehalten“. Seitenstile, Komponenten und Widgets, die nicht mehr verwendet werden, bleiben in CSS bestehen. Das Ergebnis? Die Dateigröße, die Komplexität und der Wartungsaufwand steigen exponentiell an, so dass die Entwickler immer weniger dazu geneigt sind, überflüssigen Code zu entfernen.

Stylesheets können auf andere Assets verweisen

CSS kann mithilfe von @import-Regeln auf andere Stylesheets verweisen. Diese Importe blockieren die Verarbeitung des aktuellen Stylesheets und laden weitere CSS-Dateien nacheinander.

Auch auf andere Assets, wie z. B. Schriften und Bilder, kann verwiesen werden. Der Browser wird versuchen, die Downloads zu optimieren, aber im Zweifelsfall holt er sie sofort. Inline base64-kodierte Dateien müssen noch weiter verarbeitet werden.

CSS-Effekte Rendering

Browser haben drei Rendering-Phasen:

In der Layout– (oder Reflow-) Phase werden die Abmessungen jedes Elements berechnet und wie es sich auf die Größe oder Positionierung der Elemente um es herum auswirkt.
In der Malphase werden die visuellen Teile der einzelnen Elemente auf separate Ebenen gezeichnet: Text, Farben, Bilder, Rahmen, Schatten usw.
Der Verbund zeichnet jede Ebene in der richtigen Reihenfolge auf die Seite, je nach Stapelkontext, Positionierung, Z-Index usw.

Wenn du nicht aufpasst, können Änderungen der CSS-Eigenschaften und Animationen dazu führen, dass alle drei Phasen neu gerendert werden. Einige Eigenschaften, wie z. B. Schatten und Farbverläufe, sind außerdem rechenintensiver als Blockfarben und Ränder.

Tools zur CSS-Leistungsanalyse

Sich einzugestehen, dass man ein CSS-Leistungsproblem hat, ist der erste Schritt auf dem Weg zur Besserung! Die Ursachen zu finden und zu beheben ist eine andere Sache.

Die folgenden Tools und Dienste (in keiner Reihenfolge) können dir helfen, Styling-Engpässe in deinem Code zu erkennen.

1. DevTools Network Panel

Web-Performance-Spezialisten verbringen viel Zeit mit DevTools und insbesondere mit dem Netzwerk-Panel. DevTools ist in den meisten modernen Browsern integriert, obwohl wir in unseren Beispielen Google Chrome verwenden werden.

Die DevTools können über das Browsermenü geöffnet werden, in der Regel über Mehr Tools > Entwicklertools, oder über die Tastaturkürzel Strg | Cmd + Shift + I oder F12.

Wechsle zur Registerkarte „Netzwerk“ und stelle sicher, dass „Cache deaktivieren“ aktiviert ist, damit zwischengespeicherte Dateien den Bericht nicht beeinträchtigen. Du kannst auch die Drosselungsoption ändern, um langsamere mobile Netzwerke zu simulieren.

Aktualisiere die Seite, um das Wasserfalldiagramm für den Download und die Verarbeitung anzuzeigen:

Jeder lange Balken ist besorgniserregend, aber du solltest dich besonders vor langen blockierten Balken in Acht nehmen (in weiß dargestellt). In diesem Beispiel konnten die hervorgehobene Zeile und alle folgenden Zeilen nicht mit dem Herunterladen beginnen, bis die Rendering-blockierenden CSS- und JavaScript-Dateien am Anfang der HTML-Seite verarbeitet wurden.

Mit dem Filterfeld kannst du bestimmte Assets ein- oder ausblenden:

larger-than:<S>: Begrenzung auf Dateien, die größer als <S> sind, ausgedrückt in Bytes (10.000), Kilobytes (1.000 kB) oder Megabytes (1 M)
-larger-than:<S>: Auf Dateien beschränken, die kleiner als <S> sind
-domain:*<.yourdomain.com>: Zeige Anfragen von Dritten an, die nicht von deiner primären Domain geladen werden. Diese sind einer der Hauptgründe für langsame Webseiten.

Eine leistungsstarke Seite mit optimiertem CSS hat in der Regel weniger parallel geladene Assets mit kurzen blockierten/gestoppten Balken.

2. WebPageTest

WebPageTest bietet eine ähnliche Netzwerk-Wasserfall-Ansicht sowie viele andere Leistungsdiagramme:

Der Dienst nutzt Geräte an verschiedenen globalen Standorten, damit du die Leistung und die CSS-Optimierungen unter realen Bedingungen beurteilen kannst.

3. Chrome DevTools Lighthouse Panel

Das DevTools Lighthouse Panel wird in Chromium-basierten Browsern wie Chrome, Edge, Brave, Opera und Vivaldi bereitgestellt. Du kannst Berichte zu Leistung, Progressive Web App, Best Practices, Barrierefreiheit und Suchmaschinenoptimierung für mobile und Desktop-Geräte erstellen.

Das Tool macht Verbesserungsvorschläge, darunter auch Möglichkeiten zur Optimierung von CSS. Nicht alle sind praktikabel oder möglich, aber die nützlichsten Quick Wins werden hervorgehoben.

4. Google PageSpeed Insights

PageSpeed Insights ist die Online-Version von Lighthouse. Es hat weniger Funktionen, kann aber in jedem Browser verwendet werden und bietet einige alternative Einblicke.

Zum Beispiel zeigt eine Treemap die größten JavaScript-Assets mit einer Coverage-Metrik, die angibt, welcher Anteil des Codes genutzt und welcher nicht genutzt wird:

CSS wird nicht angezeigt, aber die Menge an JavaScript hat einen Einfluss auf die Effizienz der Styles.

Ähnliche Tools zum Testen der Geschwindigkeit von Webseiten sind Pingdom Website Speed Test und GTmetrix.

5. Chrome DevTools Coverage Panel

Das DevTools Coverage Panel in Chromium-basierten Browsern hilft dabei, ungenutzten CSS- (und JavaScript-) Code zu finden. Wähle Coverage aus dem Untermenü DevTools More Tools, aktualisiere dann deine Webseite und durchsuche deine Webseite/Anwendung:

CSS- und JavaScript-Assets werden im Coverage Panel angezeigt, wobei der Anteil des ungenutzten Codes rot markiert ist. Wenn du auf eine Datei klickst, wird der Quelltext angezeigt und der nicht verwendete Code in der Zeilennummer rot hervorgehoben.

Ein paar Dinge sind zu beachten:

Die Metrik zur Abdeckung wird zurückgesetzt, wenn du die Seite aktualisierst oder zu einer neuen Seite navigierst, wie es auf einer WordPress Seite üblich ist. Die Kennzahl für ungenutzten Code verringert sich nur, wenn du eine Single Page Application aufrufst, die Inhalte ohne Seitenaktualisierung lädt.
Das Tool kann nur das CSS berücksichtigen, das bis zu einem bestimmten Zeitpunkt verwendet wurde. Es kann nicht feststellen, ob ein Widget nicht angesehen wurde oder mehrere JavaScript-gebundene Zustände hat.

6. Chrome DevTools Echtzeit-Leistungsmonitor

Chromium-basierte Browser verfügen über einen Echtzeit-Leistungsmonitor. Auch dieser ist über das DevTools-Menü More Tools verfügbar. Die Diagramme werden aktualisiert, wenn du auf Seiten navigierst, scrollst und Animationen auslöst:

Die folgenden Metriken sind für die Optimierung der CSS-Leistung von besonderem Interesse (je niedriger, desto besser):

CPU usage: Prozessornutzung von 0% bis 100%.
Layouts/sec: Die Rate, mit der der Browser die Seite neu layouten muss.
Style recalcs/sec: Die Rate, mit der der Browser die Stile neu berechnen muss.

Die anderen Metriken können auch nützlich sein, wenn CSS aufgrund externer Faktoren Probleme hat (auch hier gilt: niedrigere Werte bedeuten eine bessere Leistung):

JS heap size: Der gesamte von JavaScript-Objekten verwendete Speicher.
DOM Nodes: Die Anzahl der Elemente im HTML-Dokument.
JS event listeners: Die Anzahl der registrierten JavaScript-Ereignis-Listener.
Documents: Die Anzahl der Ressourcen, einschließlich der Seite, CSS-Dateien, JavaScript-Module, etc.
Document Frames: Die Anzahl der Frames, Iframes und JavaScript Worker Scripts.

7. DevTools Performance Report

Mit dem DevTools Performance-Panel kannst du Seitenaktivitäten für weitere Analysen aufzeichnen und Leistungsprobleme erkennen. Die erstellten Berichte sind komplex und viele Entwickler meiden sie, aber sie liefern wertvolle Informationen.

Über das Einstellungssymbol des Leistungspanels kannst du verschiedene Optionen einstellen, wie z. B. die Verlangsamung des Netzwerks und der CPU. Du kannst auch JavaScript-Samples deaktivieren, damit keine detaillierten Aufrufstapel aufgezeichnet werden.

Um zu beginnen, klicke auf das runde Aufzeichnungssymbol, lade und/oder benutze deine Seite und klicke dann auf die Schaltfläche Stopp, um den Bericht anzuzeigen:

Fast alle diese Metriken sind für JavaScript-Entwickler/innen von Nutzen, aber Probleme bei der CSS-Optimierung können besonders deutlich werden:

Oberer roter Balken: Dies zeigt an, dass die Bildrate deutlich gesunken ist, was zu Leistungsproblemen führen kann. Das ist zu Beginn des Ladens einer Seite zu erwarten, aber auch übermäßige CSS-Animationen können ein Problem darstellen.
Zusammenfassendes Diagramm: Hohe Lade-, Rendering- und Bildmetriken können auf CSS-Probleme hinweisen.

Indirekte CSS-Leistungsverbesserungen

Die folgenden Maßnahmen beheben CSS-Probleme nicht direkt, aber sie können dir helfen, einige Leistungsprobleme mit relativ wenig Aufwand zu lösen.

Verwende einen guten Host

Die Nutzung eines guten Hosts mit Servern in der Nähe deiner Nutzer/innen bringt unmittelbare Leistungsvorteile. Es gibt verschiedene Host-Tarife, aber es gibt drei Haupttypen:

Shared Hosting: Deine Webseite wird auf einem physischen Server gehostet, möglicherweise neben Hunderten von anderen Webseiten. Speicherplatz, RAM, CPU-Zeit und Bandbreite werden gemeinsam genutzt. Die Tarife sind oft günstig, aber Leistung und Verfügbarkeit werden durch andere Webseiten beeinflusst. Ein Upgrade ist zwar möglich, aber deine Webseite bleibt in der Regel auf der gleichen Infrastruktur.
Dediziertes Hosting: Deine Webseite wird auf einem oder mehreren physischen Servern gehostet, die dir gehören. Die Hardware kann je nach Bedarf konfiguriert und aufgerüstet werden. Die Tarife sind oft teuer, und Hardwareausfälle bleiben problematisch.
Cloud-Hosting: Beim Cloud-Hosting wird die Hardware-Infrastruktur in eine Reihe von Diensten abstrahiert, die nach Bedarf abgerufen werden können. Deine Webseite kann über eine Reihe von Geräten bereitgestellt werden, um Upgrades zu erleichtern.

Die Cloud-Hosting-Pläne und -Preise sind sehr unterschiedlich. Das könntest du in Betracht ziehen:

Platform as a Service (PaaS) Optionen, wie virtuelle Webserver und Datenbanken, oder
Software-as-a-Service-Optionen (SaaS), die vollständig verwaltete Anwendungen wie WordPress anbieten.

Ein Wechsel des Hosts kann die Leistung steigern. Es ist unwahrscheinlich, dass du damit alle Probleme lösen kannst, aber es ist eine kostengünstige Lösung für Backend- und Bandbreitenprobleme.

Du könntest auch ein Content Delivery Network (CDN) oder ein spezielles Bild- und Video-CDN in Betracht ziehen, das die Last auf mehrere Standorte verteilt, die geografisch näher an den Nutzern liegen.

Browser- und Server-Effizienzfunktionen nutzen

Etwa 10 % der Webseiten aktivieren nicht die gzip-Komprimierung (oder besser), die normalerweise die Standard-Serveroption ist. Dadurch wird die Größe von CSS um 60% oder mehr reduziert, indem die Dateien vor der Übertragung komprimiert werden. Es behebt zwar kein ineffizientes CSS, aber der Code kommt schneller an!

Du solltest auch HTTP/2 (oder besser) aktivieren, das Daten in einem kleineren Binärformat sendet, die Header komprimiert und mehr als eine Datei über dieselbe TCP-Verbindung senden kann.

Schließlich solltest du sicherstellen, dass der Browser CSS und andere Dateien effektiv zwischenspeichern kann. Dazu musst du in der Regel Expires, Last-Modified und/oder ETag-Hashes im HTTP-Header setzen.

Optimiere dein CMS

Content Management Systeme wie WordPress können mit Themes und Plugins erweitert werden, die ihr eigenes CSS bereitstellen. Wenn möglich, solltest du dein CMS beschleunigen, um:

Entferne ungenutzte Plugins.
Verwende schlankere Themes
Aktiviere das Caching, um einen übermäßigen Seitenaufbau zu verhindern.

Optimiere deine Bilder

Bilder haben nicht den gleichen Verarbeitungs- und Rendering-Overhead wie HTML, CSS und JavaScript, aber sie machen einen großen Teil des Seitengewichts und der nutzbaren Bandbreite aus. Bedenke:

Entfernen von unnötigen Bildern.
Ändern der Größe großer Bilder – vielleicht auf maximal 150% der Größe, die sie auf dem Bildschirm haben können.
Verwendung eines geeigneten Bildformats – idealerweise eine stark komprimierte Option wie WebP oder AVIF, aber möglicherweise auch SVG für Logos und Diagramme.
Ersetzen von Bildern durch CSS-Farbverläufe oder andere Effekte.
Hinzufügen von Breiten- und Höhenattributen zu HTML <img>-Tags oder Verwendung der neuen CSS-Eigenschaft aspect-ratio, um sicherzustellen, dass vor dem Herunterladen des Bildes der entsprechende Platz auf der Seite reserviert wird.

Ein spezialisiertes Bild-CDN kann einen Teil dieser Arbeit für dich übernehmen. Weitere Tipps findest du in unserem Leitfaden zur Optimierung von Bildern für das Internet.

Ungenutzte CSS entfernen

Die schnellsten Stile sind die, die du nie laden oder rendern musst! Versuche, nicht mehr benötigten CSS-Code zu entfernen bzw. zu bearbeiten, z. B. den für ältere Seiten, Widgets oder Frameworks. Das kann bei größeren Webseiten schwierig sein, und es ist nicht immer klar, ob eine bestimmte Gruppe von Stilen notwendig ist oder nicht.

Die folgenden Tools analysieren die HTML- und CSS-Nutzung zum Zeitpunkt der Erstellung oder durch Crawling von URLs, um überflüssigen Code zu identifizieren. Da dies nicht immer ausreicht, können zusätzliche Konfigurationen vorgenommen werden, um sicherzustellen, dass Stile, die durch JavaScript und Benutzerinteraktionen ausgelöst werden, aufgeführt werden dürfen:

Es gibt eine bessere Option: Teile CSS in separate Dateien mit klaren Zuständigkeiten auf und dokumentiere sie entsprechend. Das Entfernen unnötiger Stile ist dann wesentlich einfacher.

Optimiere die CSS-Ladeleistung

Nicht jedes CSS wird gleich schnell geladen. Der bescheidene <link>-Tag hat eine Reihe von Optionen und Eigenheiten, die nicht immer logisch sind.

Optimiere die Verwendung von Web Fonts

Google Fonts und ähnliche Font Foundries haben die Webfonts revolutioniert, aber ein paar Zeilen Font-Code können Hunderte von Kilobytes an Bandbreite verbrauchen.

Hier sind unsere Optimierungsvorschläge:

Lade nur die Schriftarten, die du brauchst: Entferne Schriften, die du nicht brauchst, und prüfe, ob neue Schriften notwendig sind.
Lade nur die Schnitte und Stile, die du brauchst: Die meisten Schriftgießereien können den Download auf bestimmte Zeichensätze (z. B. nur Latein), Schnitte (Stärken) und Kursivschnitte (Schrägen) beschränken. Browser können fehlende Stile automatisch rendern, obwohl die Ergebnisse oft schlecht sind.
Beschränke die benötigten Zeichen: Selten verwendete Schriftarten können auf bestimmte Zeichen beschränkt werden. Zum Beispiel kann der Titel „CSS-Tutorial“ in Open Sans definiert werden, indem ein &text=-Parameter zum Google-Fonts-Abfrage-String hinzugefügt wird: fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
Ziehe variable Schriftarten in Betracht: Variable Schriftarten definieren eine große Vielfalt an Stilen, Schnitten und Kursivschnitten durch Vektorinterpolation. Die Schriftdatei ist etwas größer, aber du brauchst nur eine statt mehrerer. Die rekursive Schriftart zeigt die Flexibilität variabler Schriftarten.
Lade die Schriftarten von deinem lokalen Server: Schriften selbst zu hosten ist effizienter als eine Foundry zu nutzen. Es sind weniger DNS-Abfragen erforderlich und du kannst den Download auf WOFF2 beschränken, das von allen modernen Browsern unterstützt wird. Ältere Browser (ich schaue dich an, IE) können auf eine OS-Schriftart zurückgreifen.
Bedenke OS-Schriften: Die 500 kB große Webschrift sieht vielleicht toll aus, aber würde es jemandem auffallen, wenn du zu den gängigen Schriftarten Helvetica, Arial, Georgia oder Verdana wechselst? OS- oder websichere Schriftarten sind eine einfache Möglichkeit, die Leistung zu steigern.

Verwende eine geeignete Option zum Laden von Schriften

Das Herunterladen und Verarbeiten von Web-Schriften kann einige Sekunden dauern. Der Browser wird entweder:

Einen Flash von ungestyltem Text anzeigen (FOUT): Die erste verfügbare Ausweichschrift wird zunächst verwendet, aber ersetzt, sobald die Webschrift fertig ist.
Einen unsichtbaren Text anzeigen (FOIT): Es wird kein Text angezeigt, bis die Webschrift fertig ist. Dies ist das Standardverfahren in modernen Browsern, die in der Regel drei Sekunden warten, bevor sie auf eine Ausweichschrift zurückgreifen.

Beides ist nicht ideal. Die CSS-Eigenschaft font-display und der Parameter Google Font & display = können eine alternative Option auswählen:

auto: Das Standardverhalten des Browsers (normalerweise FOIT).
block: Wirkt wie FOIT. Der Text ist bis zu drei Sekunden lang unsichtbar. Die Schrift wird nicht ausgetauscht, aber es kann dauern, bis der Text erscheint.
swap: Wirkt wie FOUT. Der erste Fallback wird verwendet, bis die Webschriftart verfügbar ist. Der Text ist sofort lesbar, aber der Effekt des Schriftartwechsels kann störend sein. Der Font Style Matcher kann verwendet werden, um einen ähnlich großen Fallback zu definieren.
fallback: Ein Kompromiss zwischen FOIT und FOUT. Der Text ist für eine kurze Zeit (in der Regel 100 ms) unsichtbar, dann wird der erste Fallback verwendet, bis die Webschrift verfügbar ist.
optional: Ähnlich wie Fallback, nur dass hier keine Schriftart gewechselt wird. Die Webschriftart wird nur verwendet, wenn sie innerhalb der ersten Zeitspanne verfügbar ist. Bei der ersten Seitenansicht wird wahrscheinlich eine Fallback-Schriftart angezeigt, bei den folgenden Ansichten wird die heruntergeladene und zwischengespeicherte Webschriftart verwendet.

Die Verwendung von Swap, Fallback oder Optional kann zu einer spürbaren Leistungssteigerung führen.

Vermeide CSS @import

Die @import at-rule erlaubt es, CSS-Dateien in andere einzubinden:

/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");

Das scheint ein effektiver Weg zu sein, um kleinere Komponenten und Schriftarten zu laden. Leider blockiert jeder @import den Rendervorgang, und jede Datei muss nacheinander geladen und geparst werden.

Mehrere <link>-Tags innerhalb von HTML sind effizienter und laden CSS-Dateien parallel:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="widget.css">

Trotzdem ist es besser, wenn du…

CSS zusammenfassen und minimieren

Moderne Build Tools, CSS-Präprozessoren wie Sass und WordPress Plugins können alle Teilbereiche in einer großen CSS-Datei zusammenfassen. Unnötige Leerzeichen, Kommentare und Zeichen werden dann entfernt, um die Dateigröße auf ein Minimum zu reduzieren.

Mehrere Dateien sind mit HTTP/2 und höher weniger ein Leistungsproblem, aber eine einzige Datei benötigt nur einen Header und kann effizienter gzipped und gecached werden.

Separate CSS-Dateien sind nur dann sinnvoll, wenn du ein oder mehrere Stylesheets hast, die häufig geändert werden – vielleicht mehrmals pro Woche. Aber auch dann kann der meist statische CSS-Code in einer Datei zusammengefasst werden.

Kinsta-Kunden können in ihrem MyKinsta-Dashboard auf die Funktion zur Code-Minifizierung zugreifen, die ihnen dabei hilft. Mit dieser Funktion können Kunden die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren. So kann eine Seite ohne manuellen Aufwand beschleunigt werden.

Base64-Kodierung vermeiden

Tools können Bilder in base64-Strings kodieren, die du als Daten-URIs in HTML <img>-Tags und CSS-Hintergründen verwenden kannst:

.background {
  background-image: url('data:image/jpg;base64,ABC123...');
}

Dadurch wird die Anzahl der HTTP-Anfragen reduziert, aber es schadet der CSS-Leistung:

base64-Strings können 30% größer sein als ihr binäres Äquivalent.
Browser müssen den String dekodieren, bevor ein Bild verwendet werden kann, und
die Änderung eines Bildpixels macht die gesamte CSS-Datei ungültig.

Die base64-Kodierung solltest du nur in Betracht ziehen, wenn du sehr kleine, sich selten ändernde Bilder verwendest und die resultierende Zeichenkette nicht wesentlich länger als eine URL ist.

Allerdings kannst du wiederverwendbare SVG-Symbole mit UTF8 kodieren, z. B.

.svgbackground {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>');
}

CSS-Hacks und IE-Fallbacks entfernen

Wenn du nicht das Pech hast, dass du einen hohen Anteil an Internet Explorer-Nutzern hast, kannst du bedingte Stylesheets und Hacks für den IE aus deinem CSS entfernen. In den meisten Fällen werden IE-Nutzer trotzdem etwas sehen, vor allem wenn du ein Mobile-First-Design verwendest, das standardmäßig eine einfachere lineare Ansicht zeigt. Das Ergebnis wird vielleicht nicht schön und nicht pixelgenau sein, aber dein Entwicklungsbudget ist besser angelegt, wenn du die Barrierefreiheit für alle Nutzer/innen berücksichtigst.

CSS-Dateien vorladen

Der <link>-Tag bietet ein optionales Preload-Attribut, mit dem ein Download sofort gestartet werden kann, anstatt auf den eigentlichen Verweis im HTML zu warten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My page</title>
  <!-- preload styles -->
  <link rel="preload" href="/css/main.css" as="style" />
  <!-- lots more code -->
  <!-- load preloaded styles -->
  <link rel="stylesheet" href="/css/main.css" />

Das ist besonders in WordPress und anderen CMS von Vorteil, wo ein Plugin ein Stylesheet weiter unten auf der Seite einfügen könnte.

Kritisches Inline-CSS verwenden

Analyse-Tools empfehlen dir oft, „kritisches CSS“ zu inline zu stellen oder „Rendering-blockierende Stylesheets zu reduzieren“. Dies verbessert die Leistung durch:

Identifizierung wichtiger Stile, die von Elementen oberhalb der Falz verwendet werden (die beim Laden der Seite sichtbar sind)
Einfügen der wichtigen CSS in einen <style> Tag in deinem <head>
Asynchrones Laden des restlichen CSS, um Rendering-Blockaden zu vermeiden. Dies kann erreicht werden, indem das Stylesheet in einem „Druck“-Stil geladen wird, dem der Browser eine niedrigere Priorität gibt. JavaScript schaltet es dann in einen „All“-Medienstil um, sobald die Seite geladen ist (ein <noscript> sorgt dafür, dass das CSS funktioniert, wenn JavaScript nicht verfügbar ist):

<style>
/* critical styles */
body { font-family: sans-serif; color: #111; }
</style>
<!-- load remaining styles -->
<link rel="stylesheet" 
     href="/css/main.css"
    media="print" 
   onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/css/main.css">
</noscript>

Tools wie critical und criticalCSS können dabei helfen, Stile für In-View-Elemente zu extrahieren.

Diese Technik verbessert die Leistung spürbar und steigert die Audit-Scores. Webseiten oder Anwendungen mit einheitlichen Schnittstellen sollten einfacher zu implementieren sein, aber anderswo kann es schwieriger sein:

Ein Tool zum Erstellen von Webseiten ist nur für die einfachsten Webseiten erforderlich.
Der „Fold“ ist auf jedem Gerät anders.
Deine Webseiten können eine Vielzahl von Layouts haben, die unterschiedliches kritisches CSS erfordern.
Kritische CSS-Tools haben mit bestimmten Frameworks, client-seitig generiertem HTML und dynamischen Inhalten zu kämpfen.
Diese Technik kommt vor allem dem Laden der ersten Seite zugute. CSS wird für nachfolgende Seiten zwischengespeichert, sodass zusätzliche Inline-Stile das Gewicht

Media Query Rendering verwenden

Eine einzige verkettete und minimierte Datei ist für die meisten Webseiten von Vorteil, aber Webseiten, die eine beträchtliche Menge an größeren Bildschirmstilen benötigen, könnten CSS-Dateien aufteilen und mit einer Media Query laden:

<!-- core styles loaded on all devices -->
<link rel="stylesheet" href="core.css">
<!-- served to screens at least 40em wide -->
<link rel="stylesheet" media="(min-width: 40em)" href="40em.css">
<!-- served to screens at least 80em wide -->
<link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

Dieses Beispiel geht von einer Mobile-First-Methodik aus. Mobile Geräte laden core.css, müssen aber die übrigen Stylesheets nicht herunterladen oder analysieren.

Progressives Rendering verwenden

Progressives Rendering ist eine Technik, bei der einzelne Stylesheets für einzelne Seiten oder Komponenten definiert werden. Es kann für sehr große Webseiten von Vorteil sein, bei denen einzelne Seiten aus einer Vielzahl von Komponenten aufgebaut sind.

Jede CSS-Datei wird sofort geladen, bevor eine Komponente im HTML referenziert wird:

<head>
  <!-- core styles -->
  <link rel="stylesheet" href="core.css" />
</head>
<body>
  <!-- header -->
  <link rel="stylesheet" href="header.css" />
  <header>...</header>
  <!-- primary content -->
  <link rel="stylesheet" href="main.css" />
  <main>
    <!-- widget styling -->
    <link rel="stylesheet" href="widget.css" />
    <div class="mywidget>...</div>
  </main>
  <!-- footer -->
  <link rel="stylesheet" href="footer.css" />
  <footer>...</footer>
</body>

Das funktioniert in den meisten Browsern gut. (Safari zeigt eine leere Seite an, bis das gesamte CSS geladen ist, aber das sollte nicht merklich schlechter sein als ein einzelnes großes Stylesheet.)

Die Einführung von Web Components fördert auch die Verwendung von Scoped Styles, die geladen werden, wenn das benutzerdefinierte Element gerendert wird.

Optimiere die CSS-Leistung

CSS-Techniken und -Eigenschaften belasten den Browser, die CPU, den Speicher, die Bandbreite und andere Ressourcen unterschiedlich stark. Die folgenden Tipps können dir helfen, unnötige Verarbeitungsprozesse und Leistungseinbußen zu vermeiden.

Übernimm moderne Layout-Techniken (Grid und Flexbox)

Float-basierte Layouts sind schwierig zu erstellen, verwenden zahlreiche Eigenschaften, erfordern ständige Anpassungen von Rändern und Abständen, müssen mit Media-Queries verwaltet werden und sind mit erheblicher Browser-Verarbeitung verbunden. Sie waren viele Jahre lang die einzige praktikable Layout-Methode, aber sie sind nicht mehr notwendig. Verwende entweder:

CSS Flexbox für eindimensionale Layouts, die in die nächste Zeile übergehen können. Es ist ideal für Menüs, Bildergalerien, Karten, etc.
CSS Grid für zweidimensionale Layouts mit eindeutigen Zeilen und Spalten. Es ist ideal für Seitenlayouts.

Beide sind einfacher zu entwickeln, benötigen weniger Code, werden schneller gerendert und passen sich ohne Media-Queries an jede Bildschirmgröße an.

Sehr alte Browser erkennen die modernen Flexbox- und Grid-Eigenschaften nicht, sodass jedes Element zu einem Block wird. Zeige sie in einem einfachen, mobilen, linearen Layout an: es ist nicht nötig, das Design mit float-basierten Fallbacks zu emulieren.

Ersetze Bilder durch CSS-Verläufe und Effekte

Entscheide dich, wenn möglich, für CSS-Code anstelle von Bildern. Experimentiere mit Farbverläufen, Rändern, Radien, Schatten, Filtern, Mischmodi, Masken, Beschneidungen und Pseudoelement-Effekten, um vorhandene Bilder wiederzuverwenden oder zu ersetzen.

CSS-Effekte verbrauchen deutlich weniger Bandbreite, sind leichter zu ändern und können in der Regel animiert werden.

Vermeide die übermäßige Verwendung teurer Eigenschaften

Auch wenn du einen knappen deklarativen Code hast, erfordern manche CSS-Eigenschaften mehr Verarbeitung als andere. Die folgenden Eigenschaften lösen Bildberechnungen aus, die bei übermäßigem Gebrauch teuer werden können:

position: fixed
border-radius
box-shadow
text-shadow
opacity
transform
filter
backdrop-filter
background-blend-mode

Verwende CSS-Übergänge und Animationen, wenn möglich

CSS-Übergänge und -Animationen sind immer flüssiger als JavaScript-gestützte Effekte, die ähnliche Eigenschaften verändern. In sehr alten Browsern werden sie nicht verarbeitet, aber da diese wahrscheinlich auf weniger leistungsfähigen Geräten laufen, ist das auch gut so.

Vermeide jedoch übermäßige Animationen. Effekte sollten das Nutzererlebnis verbessern, ohne die Leistung zu beeinträchtigen oder Motion Sickness zu verursachen. Überprüfe die Medienabfrage prefers-reduced-motion und deaktiviere Animationen, wenn nötig.

Vermeide die Animation von Eigenschaften, die ein Re-Layout auslösen

Wenn du die Abmessungen eines Elements (width, height, padding, border) oder die Position (top, bottom, left, right, margin) änderst, kann das dazu führen, dass die gesamte Seite bei jedem Animationsframe neu layoutet wird. Die effizientesten Eigenschaften zum Animieren sind:

opacity
filter: Unschärfe, Kontrast, Schatten und andere Effekte
transform: Ein Element übersetzen (verschieben), skalieren oder rotieren

Browser können die hardwarebeschleunigte GPU nutzen, um diese Effekte in einer eigenen Ebene zu rendern, sodass nur die Compositing-Phase betroffen ist.

Wenn du andere Eigenschaften animieren musst, kannst du die Leistung verbessern, indem du das Element mit position: absolute aus dem Seitenfluss nimmst.

Achte auf komplexe Selektoren

Die komplexesten CSS-Selektoren werden von den Browsern schnell geparst, aber wenn du sie vereinfachst, verringert sich die Dateigröße und die Leistung wird verbessert. Komplexe Selektoren werden oft erzeugt, wenn du tief verschachtelte Strukturen in CSS-Präprozessoren wie Sass erstellst.

Angeben, welche Elemente sich ändern werden

Mit der CSS-Eigenschaft will-change kannst du angeben, wie ein Element geändert oder animiert werden soll, damit der Browser im Voraus Optimierungen vornehmen kann:

.myelement {
  will-change: transform, opacity;
}

Es können beliebig viele kommagetrennte Werte definiert werden, aber die Eigenschaft sollte nur als letztes Mittel verwendet werden, um bekannte Leistungsprobleme zu beheben. Du solltest es nicht auf zu viele Elemente anwenden und darauf achten, dass du der Eigenschaft genügend Zeit zum Initialisieren gibst.

Berücksichtige CSS Containment

Containment ist eine neue CSS-Funktion, die die Leistung verbessern kann, indem sie es dir ermöglicht, isolierte Teilbäume einer Seite zu identifizieren. Der Browser kann die Verarbeitung optimieren, indem er einen bestimmten DOM-Inhaltsblock rendert – oder nicht rendert.

Die Eigenschaft contain akzeptiert einen oder mehrere der folgenden Werte in einer durch Leerzeichen getrennten Liste:

none: Containment wird nicht angewendet
layout: Das Layout des Elements ist vom Rest der Seite isoliert – sein Inhalt hat keine Auswirkungen auf andere Elemente
paint: Die untergeordneten Elemente des Elements werden nicht außerhalb ihrer Begrenzung angezeigt
size: Die Größe des Elements kann ohne Überprüfung der untergeordneten Elemente bestimmt werden – die Abmessungen sind unabhängig vom Inhalt

Außerdem gibt es zwei besondere Werte:

strict: Alle Einschließungsregeln (außer keiner) werden angewendet
content: Wendet Layout und Farbe an

CSS-Containment wird von den meisten modernen Browsern unterstützt. In Safari und älteren Anwendungen gibt es keinen Support, aber auch hier kann Containment sicher verwendet werden, da der Browser die Eigenschaft einfach ignoriert.

Reagiere auf den Save-Data-Header

Save-Data ist ein HTTP-Request-Header, der anzeigt, dass der Nutzer reduzierte Daten angefordert hat. In manchen Browsern wird er als „Lite“- oder „Turbo“-Modus bezeichnet.

Wenn er aktiviert ist, wird bei jeder Browseranfrage ein Save-Data-Header gesendet:

GET /main.css HTTP/1.0
Host: site.com
Save-Data: on

Der Server kann entsprechend reagieren, wenn Save-Data erkannt wird. Im Falle von CSS könnte er ein einfacheres, mobiles, lineares Layout senden, eine OS-Schriftart verwenden, zu Blockfarben wechseln oder Bildhintergründe mit niedriger Auflösung laden.

Beachte, dass der Server bei geänderten Anfragen den folgenden Header zurückgeben sollte, um sicherzustellen, dass minimale Inhalte nicht zwischengespeichert und wiederverwendet werden, wenn der Nutzer den Lite/Turbo-Modus ausschaltet:

Vary: Accept-Encoding, Save-Data

Der Header kann auch durch clientseitiges JavaScript erkannt werden. Der folgende Code fügt dem <html>-Element eine bestUX-Klasse hinzu, wenn Save-Data nicht aktiviert ist:

if ('connection' in navigator && !navigator.connection.saveData) {
  document.documentElement.classList.add('bestUX');
}

Die Stylesheets können dann entsprechend reagieren, ohne dass der Server manipuliert werden muss:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
  background-image: url("hero.jpg");
}

Die Medienabfrage prefers-reduced-data bietet als Alternative eine reine CSS-Option, die allerdings zum Zeitpunkt der Erstellung dieses Artikels in keinem Browser unterstützt wird:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
  header {
    background-image: url("hero.jpg");
  }
}

Zusammenfassung

Es gibt viele Möglichkeiten, die CSS-Leistung zu optimieren, aber für neue Projekte solltest du die folgenden Praktiken in Betracht ziehen:

Verwende einen Mobile-First-Ansatz: Programmiere zuerst das einfachste mobile Layout und füge dann Erweiterungen hinzu, wenn der Bildschirmplatz und die Browserfunktionen zunehmen.
Teile das CSS in separate Dateien mit eindeutigen Verantwortlichkeiten auf: Ein CSS-Präprozessor oder ein CMS Plugin kann CSS-Teilbereiche in einer einzigen Datei zusammenfassen.
Füge einen Build-Schritt hinzu: Es gibt Tools, die den Code automatisch linsen, Probleme erkennen, verketten, minimieren, Bildgrößen reduzieren und vieles mehr. Automatisierung macht das Leben leichter und die Wahrscheinlichkeit, dass du einen Optimierungsschritt vergisst, ist geringer.
Dokumentiere deine Stylesheets: Ein Styleguide mit dokumentierten Beispielen macht es einfacher, deinen Code zu übernehmen und zu pflegen. Du kannst veraltetes CSS erkennen und entfernen, ohne in Schweiß auszubrechen.

Lerne endlich CSS! Je mehr du weißt, desto weniger Code musst du schreiben und desto schneller wird deine Webanwendung. Es wird dich zu einem besseren Entwickler machen, unabhängig davon, welche Plattformen und Frameworks du verwendest.

Welche anderen Tipps hast du, um die CSS-Leistung zu optimieren? Teile sie bitte in den Kommentaren mit!

Craig Buckler

Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.