In der modernen Webentwicklung spielen CSS-Animationen eine entscheidende Rolle bei der Gestaltung ansprechender Nutzeroberflächen. Sie sorgen für Dynamik, bringen Inhalte zum Leben und verbessern die Benutzererfahrung. Doch nicht jede Animation ist unproblematisch – manche führen zu unerwartet hohen Systemressourcen-Beanspruchungen und beeinträchtigen die Performance von Anwendungen erheblich. In einem aktuellen Praxisfall wurde bei einer Electron-Anwendung namens Granola, einer Notiz-App, eine Animation entdeckt, die die CPU- und GPU-Auslastung auf einem M2-MacBook massiv anhob. Die CPU-Auslastung stieg auf etwa 60 Prozent und die GPU-Auslastung auf 25 Prozent, was ungewöhnlich hoch für eine relativ kleine Animation war.
Die Ursache wurde auf eine vermeintlich harmlose CSS-Animation zurückgeführt, die die Höhe eines Elements veränderte. Animationsprobleme tauchen häufig dann auf, wenn CSS-Eigenschaften animiert werden, die umfangreiche Berechnungen im Browser auslösen. Um dieses Problem besser zu verstehen und zu lösen, ist es wichtig, den Rendering-Prozess moderner Browser zu kennen. Wenn eine CSS-Eigenschaft sich ändert, durchläuft der Browser dabei mehrere Phasen. Zuerst die Layout-Phase, in der die Position und Größe der Elemente berechnet wird.
Danach folgt die Paint-Phase, in der das Aussehen der Elemente auf Layern gezeichnet wird, ähnlich wie bei Photoshop-Bildbearbeitung. Abschließend erfolgt die Compositing-Phase, bei der diese Layer zusammengefügt werden, um das finale Bild auf dem Bildschirm darzustellen. Die Veränderung bestimmter Eigenschaften wie der Höhe eines Elements verursacht reale Layout-Berechnungen, da sich dadurch auch die Position anderer Elemente ändern kann oder die gesamte Struktur neu bewertet werden muss. Diese Layout-Berechnungen sind dabei besonders teuer und können dazu führen, dass der Browser jede einzelne Frame-Zeichnung aufwendig neu berechnet. Gerade bei Animationen, die mit 60 Bildern pro Sekunde laufen, summiert sich dieser Aufwand enorm und belastet die gesamte Systemleistung.
Granola zeigte solche Symptome bei einer simplen Audio-Visualizer-Animation, die aus drei "tanzenden Balken" bestand, die ihre Höhe kontinuerlich änderten. Ursprünglich wurde CSS-Transitions für die Höhenänderung genutzt, was zu regelmäßigem Re-Layout, Paint und Compositing führte. Die finanzielle und energetische Kosten waren enorm. Ein erster Verdacht lag auf den 10-mal pro Sekunde aktualisierten DOM-Elementen, aber die Reduktion der DOM-Updates brachte keine signifikante Performance-Verbesserung. Stattdessen zeigte das Performance-Profiling mit den Chrome DevTools klar, dass der größte Teil der Rechenzeit in Rendering und Painting floss, und nicht in JavaScript.
Ein Schlüssel zur Fehlerbehebung war die Analyse der verwendeten CSS-Eigenschaft. Height ist eine sogenannte Layout-Eigenschaft, deren Animation zwangsläufig regelmäßig einen kompletten Layout-Schritt verursacht. Das steigert den Rechenaufwand enorm, besonders wenn sich das Element im sichtbaren Viewport befindet und häufig aktualisiert wird. Diese Erkenntnis ist auch im W3C-Standard verankert: Animationen von Layout-Eigenschaften sind teuer, ebenso wie Eigenschaften, die ein Re-Paint erfordern. Alternativ lassen sich sogenannte Composite-Eigenschaften animieren.
Diese haben den Vorteil, dass sie keine erneute Layout- oder Paint-Phase auslösen, sondern nur die Compositing-Phase betreffen, welche vergleichsweise günstig ist. Die gängigsten Composite-Eigenschaften sind transform und opacity. Animiert man zum Beispiel transform: scaleY(), so verändert man nicht direkt die Höhe des Elements, sondern seine Skalierung in Y-Richtung. Der Vorteil ist, dass keine Layout-Neuberechnung notwendig ist und somit viel weniger Rechenleistung verbraucht wird. Um das Problem zu lösen, wurde bei Granola deshalb ein trickreicher Ansatz gewählt.
Die zuvor genutzte height-Transition wurde durch eine Animation mittels transform: scaleY() ersetzt. Dies führte zu sofortigen Performance-Gewinnen: die Layout- und Paint-Phasen verschwanden aus dem Profil, CPU- und GPU-Nutzung sanken drastisch. Dennoch brachte dieser naive Ersatz einen visuellen Nachteil mit sich. Da beim Skalieren eines Rechtecks mit abgerundeten Ecken diese Ecken verformt und verzerrt werden, wirkte die Animation unschön und nicht mehr professionell. Die finale, optimierte Lösung bestand deshalb darin, die visuelle Illusion einer sich verändernden Höhe auf andere Weise zu erzeugen.
Statt eines einzelnen Rechtecks wurde jeder der drei Balken in zwei separate abgerundete Rechtecke zerteilt. Diese beiden Teile wurden unabhängig voneinander animiert – einer bewegt sich nach oben, der andere nach unten – mittels CSS transform: translateY(). Durch die getrennte Bewegung der Enden eines Balkens konnte ein realistisches Gefühl von Wachstum und Schrumpfung erzeugt werden, ohne die eigentliche Höhe zu verändern. Da diese Bewegung komplett mit Composite-Eigenschaften umgesetzt wurde, blieb die Animation sehr effizient, und die abgerundeten Ecken blieben unverformt. Diese Herangehensweise zeigt eindrücklich, wie wichtig ein tiefes Verständnis des Browser-Rendering-Prozesses ist, um ressourcenschonende und gleichzeitig visuell ansprechende Animationen zu erzeugen.
Gute Performance ist nicht nur eine Frage von weniger JavaScript, sondern vor allem von bewusster Auswahl der richtigen CSS-Eigenschaften für Animationen. Die Anwendung dieser Prinzipien führte bei Granola zu einer enormen Verbesserung: Die CPU-Auslastung sank von 60 Prozent auf etwa 6 Prozent, und die GPU-Nutzung halbierte sich ebenfalls deutlich. Diese Einsparungen wirken sich direkt auf die Akkulaufzeit und das Nutzererlebnis aus, insbesondere auf mobilen Geräten oder leistungsschwächeren Rechnern. Darüber hinaus verdeutlicht der Einsatz von Chrome DevTools als leistungsfähiges Analyse-Tool, wie Entwickler versteckte Flaschenhälse ermitteln können. Die „Performance“- und „Rendering“-Tabs bieten Einblick in Paint- sowie Layout-Vorgänge und erlauben eine visuelle Kontrolle durch Paint-Flashing und Layout-Shift-Indikatoren.
So können problematische Animationen sichtbar gemacht und gezielt verbessert werden. Der Fall von Granola lehrt, dass kleine Animationen große Auswirkungen auf die Systemleistung haben können. Es lohnt sich, die richtigen CSS-Eigenschaften bewusst einzusetzen, Animationen mit Composite-Eigenschaften zu erzeugen und Visualisierungen entsprechend anzupassen. Die Investition in Performance-Optimierung verbessert nicht nur die Entwicklerzufriedenheit, sondern auch das Endnutzererlebnis nachhaltig. Zukünftige Optimierungen könnten durch den Einsatz noch fortschrittlicherer Profiling-Tools erfolgen, etwa dem about://tracing-Tool von Chrome, das tiefere Einblicke in die Rendering-Pipeline bietet.
Entwickler können so noch gezielter Engpässe identifizieren und Performance-Schwächen beseitigen. Für Webentwickler, die auf schnelles, flüssiges und ressourcenschonendes User Interface Wert legen, sind diese Erkenntnisse essenziell. Die Kunst liegt darin, Animationen nicht nur schön aussehen zu lassen, sondern dabei auch die Systemkapazitäten und Rendering-Mechanismen des Browsers zu respektieren und optimal zu nutzen. Die Kombination aus technischem Know-how, intelligentem Profiling und kreativen Lösungsansätzen ist der Schlüssel zu performantem Webdesign im Jahr 2025 und darüber hinaus.
