LayerSlider für TYPO3

LayerSlider lädt 400 KB JavaScript für etwas, das mit 20 KB CSS lösbar ist

LayerSlider war zwischen 2012 und 2018 einer der beliebtesten Premium-Slider für TYPO3 und WordPress. Animierte Banner mit Parallax-Effekten, Texteinblendungen, Übergängen und Video-Hintergründen. Das Ergebnis sah auf der Startseite beeindruckend aus. Das Problem: LayerSlider lädt eine JavaScript-Library von 300 bis 400 KB (minifiziert), benötigt jQuery als Abhängigkeit (weitere 90 KB) und erzeugt 15 bis 30 HTTP-Requests für Bilder, Fonts und Konfigurationsdateien. Auf einer ansonsten optimierten Website verdoppelt LayerSlider die Ladezeit der Startseite.

Google PageSpeed Insights bestraft das gnadenlos. Ein Largest Contentful Paint (LCP) von über 4 Sekunden durch den Slider allein bedeutet einen Score-Verlust von 20 bis 40 Punkten. Seit Google die Core Web Vitals als Ranking-Faktor nutzt (2021), ist ein schlechter LCP ein messbarer SEO-Nachteil.

Typische Einsatzszenarien

Bestandswebsites mit animierten Hero-Bannern. Unternehmenswebsites aus den Jahren 2014 bis 2019, bei denen der Startseiten-Slider 3 bis 5 animierte Folien zeigt. Typischer Inhalt: Produktfotos mit animiertem Text-Overlay (“Jetzt entdecken”), Parallax-Scrolleffekte, Autoplay mit Fade-Transition. Der Slider wurde einmal eingerichtet und seitdem kaum geändert, verursacht aber bei jedem Seitenaufruf den vollen Performance-Overhead.

Landingpages mit Produkt-Slideshows. Marketing-Teams nutzen LayerSlider für Produkt-Präsentationen: Mehrere Bilder mit Overlay-Text und CTA-Buttons in einer automatisch durchlaufenden Slideshow. Die Conversion-Daten zeigen typischerweise, dass 80 % der Nutzer nur die erste Folie sehen. Der Slider ist also eine teure Darstellung für ein einziges Bild.

Event-Seiten mit Countdown-Animationen. LayerSlider kann Timer, Pop-ups und Scroll-getriggerte Animationen darstellen. Für Konferenzseiten oder Produktlaunches wurden solche Features genutzt. Heute gibt es dafür leichtgewichtige CSS-Lösungen ohne JavaScript-Overhead.

Technische Architektur

LayerSlider ist ein kommerzielles Plugin (Lizenz ca. 25 USD einmalig für WordPress, TYPO3-Variante über CodeCanyon oder Drittanbieter). Die TYPO3-Integration läuft als Extension, die eine eigene Tabelle für Slider-Konfigurationen anlegt. Jeder Slider besteht aus Slides, jede Slide aus Layern (Text, Bild, Video, Shape, Button), und jeder Layer hat Animationseinstellungen (Timing, Easing, Effekt).

Die Frontend-Ausgabe lädt die LayerSlider-Kernbibliothek (kreaturamedia.js), jQuery (falls nicht global vorhanden), optionale Plugins (Parallax, Popup, Timeline) und die Slider-Konfiguration als JSON. Die Bilder werden als img-Tags mit data-Attributen für Lazy Loading eingebunden, aber viele Konfigurationen laden alle Bilder sofort (Autoplay startet den zweiten Slide nach 3 Sekunden, also muss Slide 2 schon geladen sein).

Die Animationsengine nutzt RequestAnimationFrame und CSS3-Transforms für die Darstellung. Auf modernen Browsern ist die Darstellung flüssig, aber die Parse-Zeit für das grosse JavaScript-Bundle bleibt. Auf Mobilgeräten (Mid-Range-Smartphones) dauert das Parsen allein 200 bis 500 ms, bevor die erste Animation startet.

Häufige Probleme und Lösungen

Core Web Vitals fallen nach Slider-Einbau. LCP steigt von 1,5 auf 4+ Sekunden, weil der Slider das grösste sichtbare Element ist und erst nach dem JavaScript-Parse rendern kann. Lösung: LayerSlider durch einen statischen Hero mit CSS-Animation ersetzen. Das Hero-Bild lädt als normales img-Tag (sofort im HTML, kein JavaScript nötig), Text-Overlays werden per CSS positioniert. Ergebnis: LCP unter 2 Sekunden.

LayerSlider-Lizenz läuft aus, Updates fehlen. Die TYPO3-Variante von LayerSlider wird nicht über das TER verteilt und hat keinen automatischen Update-Mechanismus. Sicherheits-Patches müssen manuell eingespielt werden. LayerSlider hatte in der Vergangenheit kritische Sicherheitslücken (CVE-2014-0159 in der WordPress-Version). Lösung: Nicht patchen, sondern migrieren.

Slider-Inhalte sind nicht indexierbar. Text in LayerSlider-Layern wird als data-Attribut oder per JavaScript eingefügt. Google kann den Text lesen (JavaScript-Rendering), aber die Zuordnung zum Seitenkontext ist schwach. Bild-Alternativtexte fehlen oft komplett. Lösung: Den relevanten Text und die CTAs direkt im HTML der Seite platzieren, nicht im Slider.

Migration und Versions-Kompatibilität

LayerSlider hat keine offizielle TYPO3 v12 oder v13-Kompatibilität. Die letzte TYPO3-kompatible Version unterstützt v10, mit Community-Patches teilweise v11. Für v12+ gibt es keinen Upgrade-Pfad. Das ist für viele Projekte der Auslöser, den Slider endgültig abzulösen.

Gosign migriert LayerSlider auf eine von drei Alternativen, je nach Anforderung. Swiper (Open Source, 40 KB minifiziert, kein jQuery, Touch-native) für Bild-Slider mit einfachen Übergängen. Splide (Open Source, 30 KB minifiziert, kein jQuery, volle ARIA-Unterstützung) für barrierefreie Slider. Oder ein reiner CSS/HTML-Hero ohne Slider-Library, wenn ohnehin nur ein Bild mit Text-Overlay gebraucht wird.

Die Migration dauert je nach Slider-Komplexität 0,5 bis 2 Tage pro Slider. Bei einer typischen Website mit 1 Startseiten-Slider und 3 Unterseiten-Slidern ist das Projekt in einer Woche abgeschlossen, inklusive responsiver Anpassung und Performance-Test.

Der messbare Effekt einer Slider-Migration: Eine Website, die von LayerSlider auf einen statischen Hero mit CSS-Animation umgestellt wird, verbessert ihren Google PageSpeed Score typischerweise um 15 bis 35 Punkte. Der LCP fällt von 3 bis 5 Sekunden auf unter 2 Sekunden. Der Total Blocking Time (TBT) sinkt um 200 bis 500 ms, weil das grosse JavaScript-Bundle entfällt. Für Unternehmen, die über Google Ads Traffic auf die Startseite leiten, bedeutet das direkt bessere Quality Scores und niedrigere Klickpreise.

Gosign führt vor jeder Slider-Migration einen Performance-Benchmark durch: PageSpeed Score, LCP, CLS und TBT werden vorher und nachher gemessen. Die Ergebnisse dokumentieren den ROI der Migration und helfen bei der Argumentation gegenüber Stakeholdern, die am gewohnten Slider-Design festhalten wollen.