Lukas G.Hinweis: Der folgende Artikel hilft Ihnen dabei: Vermeiden von Problemen mit nicht zusammengesetzten Animationen
Haben Sie schon einmal auf eine Website geklickt und festgestellt, dass diese beim Scrollen ruckelt und verzögert?
Frustrierend, nicht wahr?
Was wäre, wenn wir Ihnen sagen würden, dass das Geheimnis hinter diesen Mängeln in sogenannten nicht zusammengesetzten Animationen liegt?
Hierbei handelt es sich um Animationen, die vom Browser nicht effizient verarbeitet werden, was den Hauptprozessor des Computers zusätzlich belastet und zu Leistungsproblemen führt.
Aber keine Sorge, es gibt eine Möglichkeit, das Problem zu beheben.
In diesem Blog besprechen wir die nicht zusammengesetzten Animationen und wie man sie behebt. Wir führen Sie durch einfache Schritte, um diese ruckartigen Animationen zu glätten, sodass Ihre Website nicht nur schneller wird, sondern auch für Ihre Besucher ein Vergnügen beim Navigieren ist.
Lass uns anfangen.
Was ist eine nicht zusammengesetzte Animation?
Nicht zusammengesetzte Animationen sind eine Art Webanimation, die hauptsächlich von der CPU und nicht von der GPU (Graphics Processing Unit) verarbeitet wird.
Dieser Verarbeitungsansatz führt häufig zu einer weniger effizienten Darstellung, was möglicherweise zu Leistungsproblemen wie langsameren Bildraten und Verzögerungen der Benutzeroberfläche führt, insbesondere auf komplexen Webseiten oder weniger leistungsstarken Geräten.
Die Reduzierung des Cumulative Layout Shift (CLS) verspricht eine Steigerung Ihres Lighthouse-Performance-Scores.
Warum ist die Vermeidung nicht zusammengesetzter Animationen für die Webleistung unerlässlich?
Die Vermeidung nicht zusammengesetzter Animationen ist aus mehreren Gründen für die Webleistung unerlässlich. Erstens können nicht zusammengesetzte Animationen, die von der CPU verarbeitet werden, weniger effizient und langsamer sein als GPU-verarbeitete Animationen.
Diese Ineffizienz führt häufig zu einer Verringerung der Bildrate, wodurch Animationen abgehackt oder verzögert erscheinen, was sich negativ auf das Benutzererlebnis auswirken kann. Webseiten mit flüssigeren Animationen wirken reaktionsschneller und die Interaktion mit ihnen ist im Allgemeinen angenehmer.
Zweitens können CPU-intensive Animationen die Systemressourcen belasten, insbesondere auf leistungsschwächeren Geräten wie Smartphones oder älteren Computern. Diese Belastung kann nicht nur die Animationen selbst, sondern auch andere auf der Webseite laufende Prozesse verlangsamen.
Dadurch kann die Gesamtleistung der Website beeinträchtigt werden. Darüber hinaus kann sich eine beeinträchtigte Website-Leistung auch negativ auf den Erfolg des digitalen Marketings auswirken. Sehen Sie sich diesen Blog „Der Einfluss der Website-Geschwindigkeit auf den Erfolg des digitalen Marketings“ an, um zu erfahren, wie es geht.
Wie wirken sich nicht zusammengesetzte Animationen auf die Seitenleistung und das Browser-Rendering aus?
Nicht zusammengesetzte Animationen können sowohl die Seitenleistung als auch das Browser-Rendering erheblich beeinträchtigen. Was die Leistung betrifft, neigen sie dazu, eine Website zu verlangsamen. Dies liegt daran, dass der Hauptprozessor (CPU) des Computers überlastet ist und versucht, neben anderen Aufgaben auch komplexe Animationen zu verarbeiten.
Dadurch reagiert die Website weniger auf Benutzerinteraktionen wie Klicken oder Scrollen. Dies macht sich besonders bei Geräten mit geringerer Rechenleistung, wie etwa Mobiltelefonen, bemerkbar.
Beim Rendern im Browser führen nicht zusammengesetzte Animationen häufig zu abgehackten und ungleichmäßigen Bewegungen auf dem Bildschirm. Da die CPU beim Zeichnen und Verwalten dieser Animationen weniger effizient ist als die GPU, können die Animationen stotternd und nicht flüssig erscheinen.
Dies beeinträchtigt die visuelle Attraktivität und kann dazu führen, dass sich die Website langsamer anfühlt, da der Browser Schwierigkeiten hat, mit der Wiedergabe dieser anspruchsvollen Animationen Schritt zu halten. Darüber hinaus kann die Belastung der CPU zu längeren Ladezeiten der Webseite führen, da die Verarbeitung und Anzeige der animierten Elemente länger dauert.
Wie erkennt man nicht zusammengesetzte Animationen?
Die Erkennung nicht zusammengesetzter Animationen kann mithilfe von Leistungsanalysetools wie Google PageSpeed Insights und GTmetrix erfolgen. Hier sind die 10 besten WordPress-Geschwindigkeitstest-Tools, mit denen Sie nicht zusammengesetzte Animationen erkennen können.
Diese Tools analysieren verschiedene Aspekte der Leistung Ihrer Website, einschließlich der Art und Weise, wie Animationen gerendert werden.
So können Sie sie verwenden:
Google PageSpeed Insights
- Besuche den PageSpeed Insights-Website, geben Sie die URL Ihrer Webseite ein und klicken Sie auf „Analysieren“. Das Tool bewertet Ihre Seite sowohl hinsichtlich der mobilen als auch der Desktop-Leistung.
- Nach der Analyse liefert PageSpeed Insights einen Score und einen detaillierten Bericht. Schauen Sie im Abschnitt „Diagnose“ des Berichts nach.
- Suchen Sie nach einer Warnung, die etwa „Vermeiden Sie nicht zusammengesetzte Animationen“ lautet. Dies weist darauf hin, dass Ihre Seite über Animationen verfügt, die für eine bessere Leistung optimiert werden könnten.
GT Metrix
- Gehe zum GTmetrix Website, geben Sie die URL Ihrer Website ein und starten Sie den Test. GTmetrix bietet eine umfassende Analyse der Ladeleistung Ihrer Website.
- Sobald die Analyse abgeschlossen ist, erhalten Sie einen detaillierten Bericht. GTmetrix konzentriert sich mehr auf allgemeine Leistungsmetriken und weist daher möglicherweise nicht direkt auf nicht zusammengesetzte Animationen wie PageSpeed Insights hin.
- Achten Sie auf Rendering-Zeiten und CPU-Auslastungsmetriken, wie z. B. „Gesamtblockierungszeit“ oder „Zeit bis zur Interaktion“.
- Während GTmetrix möglicherweise nicht explizit nicht zusammengesetzte Animationen erwähnt, könnten hohe Werte in diesen Bereichen auf ineffiziente Rendering-Prozesse hinweisen, die möglicherweise auf nicht zusammengesetzte Animationen zurückzuführen sind.
Darüber hinaus können Sie auch einen Stresstest durchführen, um die Leistung Ihrer Website zu ermitteln.
Wie gehen Browser mit Animationen um?
Wenn es um die Verarbeitung von Animationen geht, nutzen Browser zwei Hauptteile eines Computers: die CPU (Central Processing Unit) und die GPU (Graphics Processing Unit). Einfache Animationen, wie das Ändern von Farben oder Text, werden normalerweise von der CPU verwaltet.
Bei komplexeren Animationen, insbesondere solchen mit Bewegung oder Transformation, versuchen Browser jedoch, die GPU zu verwenden. Die GPU ist für diese Aufgaben besser geeignet, da sie für die Verarbeitung von Grafiken ausgelegt ist und flüssige, flüssige Animationen erstellen kann.
Wenn eine Animation jedoch nicht richtig eingerichtet ist, beansprucht der Browser möglicherweise trotzdem die CPU dafür, wodurch die Animation weniger flüssig wird und die gesamte Website langsamer wird. Daher arbeiten Webentwickler daran, sicherzustellen, dass ihre Animationen GPU-freundlich sind, um die beste Leistung zu erzielen.
Ursachen für nicht zusammengesetzte Animationen
Um das Problem nicht zusammengesetzter Animationen zu lösen, ist es wichtig, zunächst zu verstehen, was sie verursacht. Hier sind einige häufige Gründe:
Animieren nicht zusammengesetzter Eigenschaften
Das Animieren nicht zusammengesetzter Eigenschaften führt häufig zu nicht zusammengesetzten Animationen. Dies geschieht, wenn in Animationen Eigenschaften wie „Breite“, „Höhe“ oder „Rand“ verwendet werden, die vom Browser viele Neuberechnungen und Neuzeichnungen erfordern.
Diese Eigenschaften werden von der GPU nicht effizient verarbeitet, sodass sie die CPU stärker belasten und Animationen weniger flüssig machen.
Verwenden von JavaScript zum Animieren
Auch die Verwendung von JavaScript zum Animieren kann zu Problemen führen. JavaScript-basierte Animationen können, insbesondere wenn sie nicht optimiert sind, der CPU viel abverlangen. Während JavaScript mehr Kontrolle über Animationen bietet, kann es zu Leistungsproblemen führen, wenn die Animationen komplex oder nicht effizient codiert sind.
Komplexe bemalte Bereiche
Komplexe bemalte Bereiche in Animationen können ein weiterer Übeltäter sein. Wenn große Bereiche während einer Animation häufig neu gestrichen werden müssen, stellt dies eine erhebliche Belastung für das System dar. Dies gilt insbesondere für komplexe Grafiken oder hochauflösende Bilder, die sich schnell ändern.
Ineffiziente Grafiken oder Medien
Eine weitere häufige Ursache ist die ineffiziente Verwendung von Grafiken oder Medien in Animationen. Hochauflösende Bilder, Videos oder Grafiken, die nicht für die Webnutzung optimiert sind, können Animationen verlangsamen. Der Browser hat größere Schwierigkeiten, diese schweren Elemente darzustellen, insbesondere wenn sie Teil einer animierten Sequenz sind.
Übermäßiger Einsatz von Schatten und Filtern
Schließlich kann die übermäßige Verwendung von Schatten und Filtern in CSS zu nicht zusammengesetzten Animationen führen. Diese Effekte sind zwar optisch ansprechend, aber ressourcenintensiv. Ihre Anwendung auf sich bewegende Elemente kann sich erheblich auf die Leistung auswirken, da sie eine Menge zusätzlicher Verarbeitung durch den Browser erfordern.
So vermeiden Sie nicht zusammengesetzte Animationen
Nicht zusammengesetzte Animationen können die Leistung Ihrer Website erheblich beeinträchtigen und zu einer trägen Benutzererfahrung führen. Der Schlüssel zur Lösung dieses Problems liegt in der Optimierung der Handhabung von Animationen.
Hier finden Sie die schrittweise Vorgehensweise zur Behebung dieses Problems. Bevor ich zur Behebung übergehe, zeige ich Ihnen, wie der Website-Score mit diesem Fehler aussieht:
- Als wir uns der Diagnose näherten, fanden wir den Fehler „Nicht zusammengesetzte Animationen vermeiden“.
Hier sind die Schritte, die Sie befolgen müssen, um dieses Problem zu beheben.
- Gehen Sie zu Ihrem WordPress-Dashboard
- Wählen Sie „Darstellung“ > „Anpassen“.
- Möglicherweise finden Sie einen CSS-Code im Abschnitt „Zusätzliches CSS“. Es besteht eine hohe Wahrscheinlichkeit, dass dieser Code keine optimierten CSS-Animationen verwendet, wodurch dieser Fehler auftritt.
- Wenn Sie Entwickler sind, wissen Sie bereits, dass dieser Code nicht optimiert ist. Und hier sind die Änderungen, die Wunder für Ihre Website bewirken würden.
Änderung 1: Hinzufügen der Will-Change-Eigenschaft
Bei dieser Änderung geht es darum, den Browser über bevorstehende Animationsänderungen zu informieren, was zur Optimierung der Rendering-Leistung beitragen kann.
.my-animation width: 100px; Höhe: 100px; Hintergrundfarbe: rot; Position: absolut; Willensänderung: transformieren, undurchsichtig; /* Zeile hinzugefügt */ Animation: complexMove 5s linear infinite; /* Rest der Keyframes bleiben unverändert */
Änderung 2: Reduzierung der Animationskomplexität
Hier wurde die Maßstabstransformation bei 50 % von Maßstab(2) auf Maßstab(1,5) geändert. Dies reduziert die Komplexität und Intensität der Animation.
.my-animation /* … andere Eigenschaften … */ will-change: transform, opacity; /* Vorausgesetzt, dass Änderung 1 beibehalten wird */ Animation: complexMove 5s linear infinite; @keyframes complexMove /* … 0 % und 100 % Keyframes … */ 50 % transform: TranslateX(300%) rotate(180deg) Scale(1.5); /* Modifizierte Zeile */ opacity: 0.5; /* … 100 % Keyframe … */
So würde Ihr endgültiger Code aussehen:
.my-animation width: 100px; Höhe: 100px; Hintergrundfarbe: rot; Position: absolut; Willensänderung: Transformation, Undurchsichtigkeit; /* Den Browser über bevorstehende Änderungen informieren */ Animation: complexMove 5s linear infinite; @keyframes complexMove 0 %, 100 % transform: TranslateX(0) rotate(0) Scale(1); Deckkraft: 1; 50 % transform: translatorX(300 %) rotate(180deg) scale(1.5); /* Vereinfachte Skala für reduzierte Komplexität */ Deckkraft: 0,5;
- Entfernen Sie einfach den vorherigen Code, kopieren Sie diesen neuen Code und fügen Sie ihn in Ihr zusätzliches CSS ein. Dadurch wird sich die Animation nicht ändern, aber dieser Fehler wird mit Sicherheit behoben.
- Sie sehen, dass der Fehler nicht mehr besteht.
- Und das Gute daran ist, dass Sie mit dem optimierten Code den Leistungswert steigern können. Zu Beginn dieses Abschnitts haben wir gesehen, dass die Leistungspunktzahl 77 betrug.
- Hier ist der verbesserte Leistungswert:
Daher müssen Sie einige allgemeine Tipps beachten, um diesen Fehler zu beheben:
Tipp 1: CSS-Animationen optimieren
Anstatt Eigenschaften wie Höhe, Breite oder Links zu animieren, was ressourcenintensiv sein kann, verwenden Sie
verwandeln
Und
Opazität. Diese Eigenschaften werden GPU-beschleunigt und können von Browsern effizienter verarbeitet werden.
Hier ist der Beispielcode vor und nach der Optimierung:
Vor der Optimierung:
.animate-left position: relative; Animation: moveLeft 2s linear unendlich; @keyframes moveLeft from left: 0; zu links: 100px;
Nach der Optimierung:
.animate-left position: relative; Animation: moveLeft 2s linear unendlich; @keyframes moveLeft from transform: translatorX(0); zu transform: translatorX(100px);
Tipp 2: Nutzen Sie die Leistungsfähigkeit der CSS-Eigenschaft „Will-Change“.
Benutzen Sie die wird sich verändern Eigenschaft, um den Browser über Elemente zu informieren, die sich in naher Zukunft ändern werden. Dadurch kann sich der Browser auf die Änderung vorbereiten und optimieren.
So verwenden Sie die will-change-Eigenschaft:
- Fügen Sie die folgende Zeile in Ihren Code ein;
Willensänderung: Transformation, Undurchsichtigkeit; /* Zeile hinzugefügt */
Tipp 3: Animationen auf die GPU verlagern
Das Auslagern von Animationen auf die GPU (Graphics Processing Unit) ist eine Technik zur Optimierung von Webanimationen, sodass sie flüssiger werden und die CPU (Central Processing Unit) weniger belasten.
Dieser Ansatz ist besonders effektiv bei der Lösung von Problemen mit nicht zusammengesetzten Animationen, da er die Fähigkeit der GPU nutzt, grafische Aufgaben effizienter zu bewältigen.
Sie können Animationen mithilfe der Transform- und Opacity-Eigenschaften für Animationen auf die GPU verlagern, da diese effizienter sind als Animationseigenschaften wie „width“, „height“, „top“ oder „left“.
Sie können Transformations- und Opazitätseigenschaften anstelle von links und rechts verwenden. Hier ist ein Beispiel:
Nicht optimierter Code:
@keyframes moveLeft from left: 0; zu links: 100px;
Optimierter Code:
@keyframes moveLeft from transform: translatorX(0); zu transform: translatorX(100px);
Tipp 4: Effiziente Bibliotheken und Tools nutzen
Die Einbindung effizienter Bibliotheken wie GreenSock Animation Platform (GSAP) oder Velocity.js kann bei der Lösung nicht zusammengesetzter Animationsfehler äußerst effektiv sein.
Diese Bibliotheken sind auf Leistung optimiert und bieten flüssigere und effizientere Animationen als Standard-CSS oder JavaScript.
Um die GSAP-Bibliothek einzubinden, befolgen Sie diese Schritte:
- Suchen Sie den CDN-Link für GSAP.
- Öffnen Sie Ihre HTML-Datei dort, wo Sie GSAP verwenden möchten.
- Sie müssen den CDN-Link innerhalb eines