Webseiten – Energie sparen bei CSS-Animationen (lazy-anim)

CSS-Animationen gibt es auf vielen Websites

Ob für Slideshows, Schneeflocken oder für Bedienlemente CSS-Animationen sind praktisch und oft schnell erstellt.
Browser wie FireFox oder Chrome haben allerdings eine unschöne Angwohnheit: Fortlaufende Animationen werden auch weitergezeichnet wenn diese aus Viewport (sichtbaren Bereich) sind.
Das bedeutet: unnötiger Energieverbrauch beim Besucher der Seite und ein schlechteres Verhalten beim Scrollen

Machen Sie ihren Website-Besuchern eine Freude, denn der Verbrauch läßt sich senken …

Das Problem

Sobald eine CSS-Animation aus dem Sichtfeld gescrollt ist, wird diese weitergezeichnet.

Ob CSS-Animationen neu gezeichnet werden, können Sie z. B. mit den Entwicklertools von Chrome feststellen.

Das Bild zeigt in den Entwicklertools von Chrome die Leistungsüberwachung. — Leistungsüberwachung mit CSS-Animationen

Wie auf dem Bild zu sehen: Sobald die Seite geladen ist, steigt die Kurve für die Style-Neuberechnugen/s stark an. Diese bleibt fast immer konstant, egal wohin ich die Seite scrolle und ob die CSS-Animation sichtbar ist oder nicht.

Die Lösung: lazy-anim

Ähnlich wie lazy-loading ,,,

Mit etwas JavaScript-Code und Hilfe des IntersectionObserver überwachen wir ob sich eine Animation im Viewport befindet.

Ist dies nicht der Fall, stoppen wir die Animation über animation-play-state: paused.
Kommt die Animation wieder in den Viewport starten wir sie wieder mit animation-iteration-count: infinite

Das ergibt in der Leistungsmessung z. B. folgende Kurve:

Hier sieht man genau wie ich die Seite gescrollt hatte. Sobald keine Animation mehr sichtbar ist, sinkt der Wert für Style-Neuberechnugen/s auf Null. Ebenso die CPU-Last.

Dies können Sie auch in der Leistungskurve des (Windows) Task-Manages feststellen.

Die Software dazu

CSS-Klassen

Hier erstellen wir zwei Klassen, zum einfachen Starten und Stoppen der Animation.


.anim-pause { animation-play-state: paused }
.anim-running {	animation-play-state: running }

HTML

Die entsprechende Animation ist hier einer div zugordnet.


 …
<div; id="1" class="meine-animation lazy-anim"></div>
 …
<div; id="2" class="meine-andere-animation lazy-anim"></div>
 …

JavaScript

Damit die Animation im Viewport läuft bzw. außerhalb davon anhält, brauchen wir etwas JavaScript.
Dieses nutzt den IntersectionObserver um festzustellen ob die Animation sichtbar ist.


/* Observer-Optionen:
threshold: 0.5 = wenn das Element halb sichtbar ist,
wird die Animation gestartet oder pausiert. 1 = komplett sichtbar
*/
const options = {
	root: null,
	rootMargin: "0px",
	threshold: 0.5,
};

const lazyAnims = document.querySelectorAll('.lazy-anim');
const observer = new IntersectionObserver(handleIntersection, options);

/* allle Elemente mit "lazy-anim" bekommen den Observer */
lazyAnims.forEach(anim => observer.observe(anim));

function handleIntersection(entries) {
	entries.map((entry) => {
		entry.target.classList.toggle('anim-pause', !entry.isIntersecting)
		entry.target.classList.toggle('anim-running', entry.isIntersecting)
	});
};

Das Script muss nach dem Laden der Elemente ausgeführt werden.
D. h. es kommt an das Ende der Webseite.

Erweiterung

Damit die Animationen beim Verlassen des Fensters / Tabs ebenfalls anhalten, können Sie noch folgenden Code anfügen:


window.addEventListener('focus', function() {
	var elements = document.querySelectorAll(".lazy-anim");
	elements.forEach(function(element) {
		element.style.removeProperty("animation-play-state");
	});
});

window.addEventListener('blur', function() {
	var elements = document.querySelectorAll(".lazy-anim");
	elements.forEach(function(element) {
		element.style.animationPlayState = "paused";
	});
});

Wird das Fenster / Tab wieder aktiv, laufen die Animationen weiter.

Beispiel-Animation

Sobald Sie die Animation halb aus dem Fenster scrollen oder das Fenster nicht mehr aktiv ist pausiert die Animation.

Zusammenfassung

Mit wenig Code können wir Rechner und Browser-Auslastung durch nicht sichtbare CSS-Animationen auf Null senken.
Das verbessert das Scroll-Verhalten der Seite, spart Energie und ist somit auch ein aktiver Beitrag zum Umweltschutz.