Blitzschnelle Lottie-Animationen im Web

1. Home
2. Publikationen
3. Blitzschnelle Lottie-Animationen im Web

Best Practices für die technische Umsetzung von leistungsstarken Animationen im Web

Der Einsatz von hoch-performanten Web-Animationen ist kein einfaches Unterfangen in Zeiten von immer wichtiger werdenden Performance-Faktoren von Websites, damit diese sowohl im stationären Web wie auch mobil schnell von Besuchern konsumiert werden können und dabei eine flüssige Experience bieten. Ganz zu schweigen von wichtigen Ranking-Signalen für Suchmaschinen, welche allseits bekannt die Rankings in Suchmaschinen beeinflussen.

Lottie (Github) ist eine Technologie die ursprünglich von AirBnB entwickelt wurde und für iOS, Android, React Native und das Web (HTML) alles mitbringt, um in Adobe After Effects erstellte Animationen einfach auf diesen Plattformen auszuspielen.

Auch wenn die bereitgestellten Tutorials von AirBnB (oder LottieFiles) im ersten Schritt alle sehr einfach klingen, liegen die Herausforderungen im Detail, insbesondere wenn das Ziel die Einbindung von schnell ladenden, leistungsstarken und flüssig anmutenden Animationen ist.

Der Einfluss von Lottie-Animationen auf Website-Performance

Die Einbindung von Lottie-Animationen im Web bringt mehrere performance-relevante Faktoren mit sich, welche berücksichtigt und bestmöglich adressiert werden sollten.

Die Dateigröße der Animations-Files (Lottie JSON)

Der mit Sicherheit ausschlaggebendste Faktor ist die Dateigröße der eigentlichen Lottie-Animation, welche in der Regel beim Seitenaufruf durch den Browser vom Server geladen werden muss. Schwierigkeit ist dabei, dass insbesondere wenn Animationen im sichtbaren Bereich der Website liegen, ein asynchrones (nachgelagertes) Laden keine Option ist, da der Nutzer die Animation erst zeitversetzt angezeigt bekommt.

Der Einfluss von Lottie-Animationen auf den DOM der Website

Wenn mittels Lottie auf der Website Animationen gerendert werden, entstehen dabei hunderte bis teilweise tausende neue DOM-Elemente, welche eine erhebliche Belastung für den Browser und alle nachgelagerten Abläufe mit sich bringen.

Auch Google’s PageSpeed Insights bemängeln dabei eine exzessive Nutzung von DOM-Elementen an.

Reduktion der Dateigröße von Lottie JSON-Files

Mit den folgenden Optimierungen kann die Dateigröße von Lottie-Animationen (zumindest ein wenig) reduziert werden:

• Unnötige Verschachtelung von Animations-Ebenen vermeiden
• Skalierungseffekte (oder andere Effekte, welche in CSS übersetzt werden), sollten auf die oberste Ebene
• Wiederverwendung von Elementen (wenn möglich Duplizierung vermeiden bzw. reduzieren)

Mit den oben beschriebenen Maßnahmen lassen sich trotz mühsamer Optimierung der Animationen jedoch meist nur 5 bis 15% der Dateigröße von Lottie-Animation reduzieren. Das Ergebnis sind nach wie vor zu langsam ladende Animationen und negative Ergebnisse bei den Google PageSpeed Insights (z.B. eine hohe JavaScript Execution-Time oder eben die exzessive Nutzung von DOM-Elementen).

Bevor nun direkt auf angebotene Paid-Lösungen wie LottieFiles (zur Optimierung bzw. der Reduktion der bestehenden Lottie-Animationsdateien) zurückgegriffen wird, empfehlen wir die Umstellung von Lottie JSON-Datein auf das moderne dotLottie-Format.

dotLottie für flüssige und hoch-performante Animationen im Web

Unsere Entwickler waren fasziniert, beim ersten Einsatz von dotLottie und der doch recht einfachen Umstellung von lottie-web auf dotlottie-web. Sämtliche Animationsdateien wurden mit Hilfe des kostenlos verfügbraren dotLottie-Converters um teilweise bis zu 90% ihrer ursprünglichen Dateigröße reduziert, das alles ohne den geringsten Qualitätsverlust.

Mit der Umstellung unserer Standard Lottie JSON-Formate zu den optimierten und komprimierten DotLottie-Formaten (mit der Dateiendung .lottie anstatt .json) konnten wir eine signifikante Optimierung der Ladezeit und User Experience auf unseren wichtigen Landing-Pages erzielen.

Kompatibilität von dotLottie zu anderen Libraries

Erwähnenswert ist auch, dass dotLottie eine ausreichende Kompatibilität mit anderen Lottie-Bibliotheken aufweist und z.B. problemlos mit der nützlichen Interaktionsbibliothek (Lottie-Interactivity) verwendet werden kann, um flüssige Animationen basierend auf der Scroll-Aktivität des Benutzers zu realisieren.