CSS-Farbverlauf und Performance: machen Verläufe langsam?

Gute Performance von CSS-Farbverläufen ist der Normalfall: Ein statischer Verlauf macht eine Website in keiner spürbaren Weise langsamer. Er ist eine Textzeile, also gibt es nichts herunterzuladen, nichts zu dekodieren und auf nichts zu warten. Farbverläufe kosten ein wenig Zeichenzeit, wie jede andere Farbe auf der Seite. Langsame Seiten entstehen durch einige bestimmte Muster, die auf Verläufen aufbauen: große Unschärfen, Neuzeichnen beim Scrollen und Animationen, die in jedem Frame neu zeichnen. Dieser Leitfaden zeigt, was was ist und wie du deine eigene Seite prüfst.

Laden: Farbverläufe gegen Bilder

background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6); hat 67 Zeichen. Es kommt innerhalb deines Stylesheets an, braucht keine zusätzliche Anfrage und wird bei jeder Größe und Pixeldichte scharf gerendert. Ein Bildhintergrund braucht eine eigene Anfrage, muss dekodiert werden, bevor er gezeichnet werden kann, und muss für große Bildschirme mit hoher Dichte groß genug sein.

Für einfache und mäßig geschichtete Hintergründe gewinnt CSS beim Laden also immer. Bilder ergeben weiter Sinn, wenn der Hintergrund wirklich komplex ist, etwa ein malerischer Mesh-Verlauf mit vielen Farbpunkten oder eine fotografische Textur. Dann tauschst du Dateigewicht gegen visuellen Reichtum, und das lohnt sich oft.

Zeichnen: was ein Farbverlauf auf dem Bildschirm kostet

Um einen Farbverlauf zu zeigen, berechnet der Browser für jeden Pixel, den er bedeckt, eine Farbe: Das ist das Zeichnen. Die Arbeit wächst mit der gezeichneten Fläche, der Zahl gestapelter Verlaufsebenen und allen Effekten darüber. Bei einem statischen Hintergrund geschieht das einmal, und das Ergebnis wird beim Scrollen oder Interagieren wiederverwendet, sofern nichts es ungültig macht.

Die echten Risiken: Unschärfe, fixe Hintergründe und Animation

Große Unschärfen. filter: blur() und backdrop-filter lesen für jeden Pixel viele umliegende Pixel aus, und die Arbeit wächst mit Unschärferadius und Fläche. Ein unscharfer Verlauf, der einmal gezeichnet wird, ist meist unproblematisch. Ein backdrop-filter über Inhalt, der darunter scrollt, muss neu berechnet werden, wenn sich der Inhalt bewegt, und genau dort ruckeln Glassmorphism-Oberflächen auf durchschnittlichen Handys.

Fixe Hintergründe. background-attachment: fixed hält einen Hintergrund still, während die Seite scrollt, was ihn bei jedem Scrollschritt zum Neuzeichnen zwingen kann. Willst du einen Verlauf, der an Ort und Stelle bleibt, ist ein position: fixed-Element hinter dem Inhalt meist günstiger, weil der Browser es als eigene Ebene bewegen kann.

Animation. background-position zu bewegen oder Farbstopps per @property zu animieren, zeichnet das Element in jedem Frame neu. Bei einem Button ist das trivial. Bei einem bildschirmfüllenden Hero ist es Dauerarbeit, solange die Seite offen ist, was sich auf Handys als Wärme und Akkuverbrauch zeigt.

/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }

Der Leitfaden zu animierten CSS-Farbverläufen enthält alle Techniken, von der günstigsten bis zur flexibelsten.

Ebenen und will-change

Ein Element auf eine eigene Compositor-Ebene zu heben, mit will-change: transform oder einer aktiven Transform-Animation, macht günstige Animation erst möglich. Es ist nicht kostenlos: Jede Ebene hält ihre eigene Bitmap im Grafikspeicher, etwa Breite × Höhe × 4 Bytes bei Gerätepixeln. Eine übergroße Ebene für einen Hero-Hintergrund ist in Ordnung. Dutzende hochgestufte Karten, jede mit eigener Verlaufsebene, können mehr Speicher verbrauchen, als sie an Zeichenzeit sparen. Füge will-change den Elementen hinzu, die wirklich animieren, nicht als Pauschalregel.

So misst du die Performance von Farbverläufen

1. 1

   Schalte Paint Flashing ein

   Öffne in den Chrome DevTools den Rendering-Bereich und aktiviere Paint flashing. Alles, was grün aufblitzt, obwohl sich nichts ändern sollte, wird neu gezeichnet.

2. 2

   Nimm einen Performance-Trace auf

   Zeichne im Performance-Bereich ein paar Sekunden Scrollen oder ruhende Animation auf. Sieh, wie viel jedes Frames im Zeichnen steckt und ob Frames ausfallen.

3. 3

   Drossle die CPU

   Nutze die CPU-Drosselung des Performance-Bereichs, um ein langsameres Gerät zu simulieren. Ein Hero, der auf einem schnellen Laptop flüssig läuft, kann auf einem Handy der Mittelklasse kämpfen.

4. 4

   Prüfe den Bereich Ebenen

   Sieh, wie viele Compositor-Ebenen existieren und wie viel Speicher sie nutzen. Unerwartet viele Ebenen bedeuten meist, dass will-change überstrapaziert wird.

5. 5

   Teste das echte Gerät

   Schließe auf einem echten Handy ab. Wärme und Akkuverbrauch durch ständige Animation übersieht man auf einem Desktop leicht.

Der Leitfaden von web.dev zur Rendering-Performance erklärt die Pipeline hinter diesen Werkzeugen: Style, Layout, Paint und Composite. Wer weiß, welche Stufe dein Farbverlauf auslöst, weiß, ob er günstig ist.

Eine Performance-Checkliste für Farbverläufe

• Nutze CSS-Farbverläufe für einfache und geschichtete Hintergründe; Bilder nur, wenn der Look sie wirklich braucht.
• Halte Unschärferadien moderat und meide backdrop-filter über großen scrollenden Flächen.
• Ersetze background-attachment: fixed durch eine Ebene mit fester Position.
• Animiere auf großen Flächen transform oder opacity, nicht background-position.
• Langsame Ambient-Animationen können für Menschen mit reduzierter Bewegung ganz enden.
• Füge Körnung als kleines gekacheltes Bild hinzu, nicht als Live-SVG-Filter auf einem großen Element; siehe CSS-Rauschtextur.
• Miss vorher und nachher mit Paint Flashing und einer Performance-Aufzeichnung.