LayerSlider dla TYPO3

LayerSlider ładuje 400 KB JavaScript dla czegoś, co da się rozwiązać 20 KB CSS

LayerSlider był między 2012 a 2018 jednym z najpopularniejszych premium sliderów dla TYPO3 i WordPress. Animowane banery z efektami paralaksy, wstawianiem tekstu, przejściami i tłem wideo. Wynik wyglądał na stronie głównej imponująco. Problem: LayerSlider ładuje bibliotekę JavaScript o rozmiarze 300 do 400 KB (zminimalizowana), wymaga jQuery jako zależności (kolejne 90 KB) i generuje od 15 do 30 żądań HTTP dla obrazów, fontów i plików konfiguracyjnych. Na zoptymalizowanej stronie LayerSlider podwaja czas ładowania strony głównej.

Google PageSpeed Insights karze to bezlitośnie. Largest Contentful Paint (LCP) powyżej 4 sekund spowodowany samym sliderem oznacza utratę 20 do 40 punktów score. Odkąd Google używa Core Web Vitals jako czynnika rankingowego (2021), słabe LCP to mierzalna wada SEO.

Typowe scenariusze zastosowań

Istniejące strony z animowanymi banerami hero. Strony firmowe z lat 2014 do 2019, na których slider strony głównej pokazuje 3 do 5 animowanych slajdów. Typowa treść: zdjęcia produktów z animowanym tekstem overlay (“Odkryj teraz”), efekty przewijania paralaksy, autoplay z przejściem fade. Slider został skonfigurowany raz i od tego czasu prawie nie zmieniany, ale przy każdym wywołaniu strony generuje pełny overhead wydajnościowy.

Landing page z prezentacjami produktów. Zespoły marketingowe używają LayerSlider do prezentacji produktów: wiele obrazów z tekstem overlay i przyciskami CTA w automatycznie przesuwanej prezentacji. Dane konwersji typowo pokazują, że 80% użytkowników widzi tylko pierwszy slajd. Slider to więc kosztowna prezentacja dla jednego obrazu.

Strony eventowe z animacjami odliczania. LayerSlider może wyświetlać timery, popupy i animacje wyzwalane przez scroll. Dziś istnieją do tego lekkie rozwiązania CSS bez overhead JavaScript.

Architektura techniczna

LayerSlider to komercyjny plugin (licencja ok. 25 USD jednorazowo dla WordPress, wariant TYPO3 przez CodeCanyon lub dostawców trzecich). Integracja TYPO3 działa jako rozszerzenie z własną tabelą dla konfiguracji sliderów. Każdy slider składa się ze slajdów, każdy slajd z warstw (tekst, obraz, wideo, kształt, przycisk), a każda warstwa ma ustawienia animacji.

Wyjście frontendowe ładuje bibliotekę rdzeniową LayerSlider (kreaturamedia.js), jQuery (jeśli nie jest dostępne globalnie), opcjonalne pluginy (Parallax, Popup, Timeline) i konfigurację slidera jako JSON. Silnik animacji korzysta z RequestAnimationFrame i CSS3-Transforms. Na nowoczesnych przeglądarkach prezentacja jest płynna, ale czas parsowania dużego bundla JavaScript pozostaje. Na urządzeniach mobilnych (smartfony średniej klasy) samo parsowanie trwa 200 do 500 ms.

Częste problemy i rozwiązania

Core Web Vitals spadają po wbudowaniu slidera. LCP rośnie z 1,5 do ponad 4 sekund, bo slider jest największym widocznym elementem i może renderować dopiero po sparsowaniu JavaScript. Rozwiązanie: zastąpienie LayerSlider statycznym hero z animacją CSS. Obraz hero ładuje się jako normalny tag img (od razu w HTML, bez JavaScript), tekst overlay jest pozycjonowany przez CSS. Wynik: LCP poniżej 2 sekund.

Licencja LayerSlider wygasa, brak aktualizacji. Wariant TYPO3 LayerSlider nie jest dystrybuowany przez TER i nie ma automatycznego mechanizmu aktualizacji. Poprawki bezpieczeństwa muszą być instalowane ręcznie. LayerSlider miał w przeszłości krytyczne luki bezpieczeństwa. Rozwiązanie: nie łatać, lecz migrować.

Treści slidera nie są indeksowalne. Tekst w warstwach LayerSlider jest wstawiany jako atrybut data lub przez JavaScript. Google może odczytać tekst (renderowanie JavaScript), ale przypisanie do kontekstu strony jest słabe. Rozwiązanie: umieszczenie istotnego tekstu i CTA bezpośrednio w HTML strony, nie w sliderze.

Migracja i kompatybilność wersji

LayerSlider nie ma oficjalnej kompatybilności z TYPO3 v12 ani v13. Ostatnia kompatybilna wersja TYPO3 wspiera v10, z poprawkami społecznościowymi częściowo v11. Dla v12+ nie ma ścieżki aktualizacji. Dla wielu projektów to jest impuls do ostatecznego zastąpienia slidera.

Gosign migruje LayerSlider na jedną z trzech alternatyw, w zależności od wymagań. Swiper (open source, 40 KB zminimalizowany, bez jQuery, natywny dotyk) do sliderów obrazów z prostymi przejściami. Splide (open source, 30 KB zminimalizowany, bez jQuery, pełne wsparcie ARIA) do dostępnych sliderów. Lub czysty CSS/HTML hero bez biblioteki slidera, gdy potrzebny jest tylko jeden obraz z tekstem overlay.

Mierzalny efekt migracji slidera: strona przełączona z LayerSlider na statyczny hero z animacją CSS poprawia swój Google PageSpeed Score typowo o 15 do 35 punktów. LCP spada z 3 do 5 sekund na poniżej 2 sekund. Total Blocking Time (TBT) maleje o 200 do 500 ms, bo duży bundle JavaScript odpada.