News Endlich ist die neue Website da!

Optimierung im Frontend: Warum wir neue Technologien für unsere Website einsetzen

Willkommen auf unserer neuen Website! Wir haben viel Zeit und Energie investiert, um sie nicht nur optisch ansprechend zu gestalten, sondern auch technisch auf dem neuesten Stand zu bringen. Dabei haben wir uns besonders auf die Optimierung des Frontends konzentriert, also dem Teil der Website, mit dem du als Benutzer direkt interagierst.

Doch was bedeutet das konkret? Hier möchten wir euch einen Einblick geben, warum wir uns für bestimmte Technologien entschieden haben und wie sie die Benutzererfahrung verbessern.

1. Effiziente Animationen mit CSS Scroll-Driven Animations

Traditionell werden viele Animationen auf Websites mit sogenannten „3rd Party Libraries“ umgesetzt. Das sind externe JavaScript-Bibliotheken, die zusätzliche Funktionen bieten, um Animationen zu gestalten. Zwar sind diese Bibliotheken nützlich, sie bringen jedoch oft viel unnötigen Code mit, der die Ladezeit und die Performance der Website beeinträchtigen kann.

Wir setzen stattdessen auf native CSS Scroll-Driven Animations. Das bedeutet, dass Animationen direkt vom Scrollen der Seite gesteuert werden, ohne dass zusätzliche Bibliotheken geladen werden müssen. Das hat zwei große Vorteile:

• Bessere Performance: Da der Code direkt im Browser läuft und keine externe Bibliothek benötigt wird, wird die Website schneller geladen und läuft flüssiger.
• Geringerer Ressourcenverbrauch: Die native Lösung verbraucht weniger Rechenleistung und sorgt dafür, dass die Animationen auch auf älteren Geräten oder schwächeren Internetverbindungen gut funktionieren.

2. JavaScript-Animationen: Warum wir requestAnimationFrame nutzen

Bei Animationen in JavaScript gibt es verschiedene Methoden, um diese zu steuern. Früher wurde oft die Funktion setInterval verwendet, die in regelmäßigen Abständen eine bestimmte Aktion ausführt. Das Problem: setInterval läuft unabhängig von der Bildwiederholrate deines Bildschirms und kann dadurch ungenau oder ruckelig wirken.

Wir nutzen stattdessen requestAnimationFrame. Diese Funktion passt sich dynamisch der Bildwiederholrate des Bildschirms an. Der Browser selbst entscheidet, wann die Animation aktualisiert wird, um die beste und flüssigste Darstellung zu gewährleisten. Das Ergebnis:

• Flüssige Animationen: requestAnimationFrame sorgt dafür, dass Animationen genau dann aktualisiert werden, wenn es nötig ist, ohne den Prozessor unnötig zu belasten.
• Effizientere Nutzung der Hardware: Dadurch wird die Rechenleistung deines Geräts optimiert und die Animationen laufen flüssiger, was besonders auf mobilen Geräten wichtig ist.

3. CSS-Transform: Warum wir 3D-Transformationen nutzen

Wenn es um das Verschieben, Vergrößern oder Drehen von Elementen auf einer Website geht, kommt oft die CSS-Eigenschaft transform ins Spiel. Es gibt zwei Varianten: die normale 2D-Transformation und die erweiterte 3D-Transformation.

Wir setzen bewusst auf 3D-Transformationen. Auch wenn die Animation selbst vielleicht nicht dreidimensional aussieht, bietet diese Methode einen großen Vorteil:

• Bessere Performance auf modernen Geräten: 3D-Transformationen nutzen die Grafikkarte des Geräts für die Berechnung, was die Animation schneller und flüssiger macht.
• Geringere Belastung des Prozessors: Da die Grafikkarte (GPU) für 3D-Transformationen genutzt wird, wird der Hauptprozessor (CPU) entlastet. Das sorgt für eine reibungslosere Benutzererfahrung, selbst bei komplexeren Animationen.

4. Respekt vor den Nutzerpräferenzen

Nicht jeder mag Animationen, und manche Benutzer schalten sie in ihrem Browser bewusst aus, um Ablenkungen zu vermeiden oder um die Performance zu verbessern. Wir respektieren diese Präferenz. Wenn dein Browser eingestellt ist, Animationen zu deaktivieren, erkennt unsere Website das und zeigt dir nur statische Inhalte an – ohne Bewegung oder Effekte.

Diese Rücksichtnahme ist uns besonders wichtig, da wir möchten, dass sich jeder Nutzer auf unserer Website wohlfühlt.

5. Browser-Support: Was passiert, wenn dein Browser eine Funktion nicht unterstützt?

Eine berechtigte Frage ist natürlich: Was passiert, wenn der Browser, den du verwendest, diese Technologien nicht unterstützt?

Glücklicherweise werden die von uns verwendeten Technologien von den meisten modernen Browsern wie Google Chrome, Firefox, Safari und Microsoft Edge sehr gut unterstützt. Falls du jedoch einen älteren Browser verwendest, der eine dieser Funktionen nicht unterstützt, haben wir vorgesorgt:

• Fallback-Lösungen: Wir haben alternative Ansätze integriert, die sicherstellen, dass unsere Website auch in älteren Browsern gut funktioniert – wenn auch ohne die neuesten Animationseffekte.
• Progressive Enhancement: Unser Ansatz bedeutet, dass die grundlegende Funktionalität der Website immer gewährleistet ist. Wenn dein Browser modernere Technologien unterstützt, erhältst du ein verbessertes Erlebnis. Falls nicht, bekommst du dennoch eine funktionale und schnelle Website.

Fazit: Schneller, flüssiger, benutzerfreundlicher

Unsere Entscheidung, auf moderne Webtechnologien zu setzen, dient einem klaren Ziel: Eine flüssige und schnelle Website, die die Benutzererfahrung in den Vordergrund stellt. Durch den Einsatz von CSS Scroll-Driven Animations, requestAnimationFrame und 3D-Transformationen sorgen wir dafür, dass unsere Seite reibungslos läuft – unabhängig davon, welches Gerät oder welche Verbindung du nutzt.

Und das Wichtigste: Deine Präferenzen zählen. Wenn du keine Animationen möchtest, respektieren wir das und passen die Seite entsprechend an.

Wir hoffen, dass du beim Surfen auf unserer neuen Website den Unterschied spürst!