LayerSlider para TYPO3

LayerSlider carrega 400 KB de JavaScript para algo que se resolve com 20 KB de CSS

LayerSlider foi entre 2012 e 2018 um dos sliders premium mais populares para TYPO3 e WordPress. Banners animados com efeitos parallax, inserções de texto, transições e fundos de vídeo. O resultado na página inicial parecia impressionante. O problema: LayerSlider carrega uma biblioteca JavaScript de 300 a 400 KB (minificada), requer jQuery como dependência (mais 90 KB) e gera 15 a 30 requisições HTTP para imagens, fontes e arquivos de configuração. Em um site otimizado, LayerSlider dobra o tempo de carregamento da página inicial.

Google PageSpeed Insights penaliza isso severamente. Um Largest Contentful Paint (LCP) acima de 4 segundos causado apenas pelo slider significa perda de 20 a 40 pontos no score. Desde que o Google usa Core Web Vitals como fator de ranking (2021), um LCP ruim é uma desvantagem mensurável de SEO.

Cenários típicos de uso

Sites existentes com hero banners animados. Sites corporativos dos anos 2014 a 2019, onde o slider da página inicial exibe 3 a 5 slides animados. Conteúdo típico: fotos de produto com texto overlay animado, efeitos parallax de scroll, autoplay com transição fade. O slider foi configurado uma vez e raramente alterado desde então, mas causa todo o overhead de performance a cada carregamento.

Landing pages com apresentações de produto. Equipes de marketing usam LayerSlider para apresentações de produto: múltiplas imagens com texto overlay e botões CTA em uma slideshow automática. Dados de conversão mostram tipicamente que 80% dos usuários veem apenas o primeiro slide. O slider é uma representação cara de uma única imagem.

Páginas de eventos com animações de countdown. LayerSlider pode exibir timers, pop-ups e animações acionadas por scroll. Para páginas de conferências ou lançamentos de produto, tais recursos eram utilizados. Hoje existem soluções CSS leves para isso sem overhead de JavaScript.

Arquitetura técnica

LayerSlider é um plugin comercial. A integração TYPO3 funciona como extensão que cria uma tabela própria para configurações de slider. Cada slider consiste em slides, cada slide em uma imagem de fundo e, na versão completa, em camadas (texto, título, imagem ou HTML), e cada camada tem configurações de animação.

A saída no frontend carrega a biblioteca core LayerSlider, jQuery (se não disponível globalmente), GreenSock, a biblioteca de transições e um script de inicialização que lê a configuração do slider de atributos data. O motor de animação usa RequestAnimationFrame e CSS3 Transforms. Em navegadores modernos, a exibição é fluida, mas o tempo de parse do grande bundle JavaScript permanece. Em smartphones de médio porte, o parse sozinho leva 200 a 500 ms antes da primeira animação iniciar.

Problemas frequentes e soluções

Core Web Vitals caem após instalação do slider. LCP sobe de 1,5 para mais de 4 segundos, porque o slider é o maior elemento visível e só pode renderizar após o parse do JavaScript. Solução: substituir LayerSlider por um hero estático com animação CSS. A imagem hero carrega como tag img normal (imediatamente no HTML, sem JavaScript necessário), overlays de texto são posicionados via CSS. Resultado: LCP abaixo de 2 segundos.

Licença do LayerSlider expira, atualizações faltam. A variante TYPO3 do LayerSlider só está no TER como versão gratuita 5.6.2 de 2017, e o plugin jQuery da Kreatura é enviado manualmente. LayerSlider teve no passado vulnerabilidades críticas de segurança. Solução: não fazer patch, migrar.

Conteúdos do slider trazem pouco valor de SEO. Na extensão TYPO3, o texto das camadas do LayerSlider fica no HTML da página, e atributos data controlam a animação. O Google pode ler o texto, mas a associação com o contexto da página é fraca. Solução: colocar texto relevante e CTAs diretamente no HTML da página, não no slider.

Migração e compatibilidade de versões

LayerSlider não tem compatibilidade oficial com TYPO3 v12 ou v13. A última versão no TER, 5.6.2, suporta TYPO3 6.2 a 8.5. Para v12+ não existe caminho de upgrade. Isso é para muitos projetos o gatilho para substituir definitivamente o slider.

A Gosign migra LayerSlider para uma de três alternativas: Swiper (open source, 67 KB minificado sem módulos, sem jQuery, touch-native) para sliders de imagem com transições simples. Splide (open source, 30 KB minificado, sem jQuery, suporte ARIA completo) para sliders acessíveis. Ou um hero puro CSS/HTML sem biblioteca de slider, quando apenas uma imagem com texto overlay é necessária.

A migração leva entre 0,5 e 2 dias por slider. O efeito mensurável: um site que migra de LayerSlider para hero estático com animação CSS melhora tipicamente o Google PageSpeed Score em 15 a 35 pontos. O LCP cai de 3 a 5 segundos para menos de 2 segundos. Para empresas que direcionam tráfego via Google Ads para a página inicial, isso significa diretamente melhores Quality Scores e custos por clique mais baixos.