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 camadas (texto, imagem, vídeo, forma, botão), 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), plugins opcionais e a configuração do slider como JSON. 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 não é distribuída pelo TER e não tem mecanismo de atualização automático. LayerSlider teve no passado vulnerabilidades críticas de segurança. Solução: não fazer patch, migrar.

Conteúdos do slider não são indexáveis. Texto em camadas LayerSlider é inserido como atributo data ou via JavaScript. O Google pode ler o texto (renderização JavaScript), 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 compatível com TYPO3 suporta v10, com patches da comunidade parcialmente v11. 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, 40 KB minificado, 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.