Hero-Slider para TYPO3

El hero slider es la zona más cara de un sitio web TYPO3, medida en tiempo de carga

La zona hero es lo primero que ven los visitantes. Con un slider, también es lo más lento que ven. Un hero slider típico en TYPO3 carga 3-5 imágenes de gran formato (cada una 500 KB-2 MB), una librería JavaScript (jQuery + plugin de slider: 120-200 KB), animaciones CSS y scripts de inicialización. En total son 3-12 MB de datos antes de que el visitante pueda hacer clic en cualquier parte. El Largest Contentful Paint (LCP) en estas configuraciones está rutinariamente por encima de 4 segundos, lo que Google clasifica como “deficiente” y cuesta posicionamiento.

La solución no es un slider mejor, sino o ningún slider o uno radicalmente ligero. Las soluciones solo CSS y las librerías de slider modernas como Swiper logran el mismo efecto visual con una fracción del tiempo de carga.

Escenarios de uso habituales

Páginas de inicio con campañas cambiantes. Marketing quiere colocar prominentemente 3-5 mensajes. El slider rota automáticamente. El problema: estudios muestran consistentemente que solo el 1-2% de los visitantes interactúan más allá de la primera diapositiva. Las restantes se cargan pero no se ven. Un hero estático con un mensaje claro rinde mejor en tests A/B.

Galerías de imágenes en la zona del encabezado. Hoteles, restaurantes y espacios de eventos muestran impresiones como hero slider. Aquí un slider tiene sentido en contenido. La optimización de rendimiento: cargar solo la primera imagen inmediatamente, las restantes mediante lazy loading.

Highlights de producto con animación. Las transiciones CSS (transform, opacity) son más eficientes que las animaciones JavaScript y utilizan la GPU en lugar de la CPU. Un slider solo CSS con scroll-snap-type y transition logra 60 fps en cualquier dispositivo.

Arquitectura técnica

La arquitectura óptima para un hero slider en 2026: Opción 1: solo CSS (0 KB JavaScript). scroll-snap-type: x mandatory en el contenedor, navegación mediante anchor links con scroll-behavior: smooth. Sin JavaScript necesario. Opción 2: Swiper/Splide (29-139 KB JavaScript). Funcionalidad completa de slider con touch, swipe, autoplay, paginación, lazy loading. Opción 3: Hero estático (0 KB JavaScript, 1 imagen). Una imagen, un titular, un CTA. La configuración más rápida y con mayor conversión.

Problemas frecuentes y soluciones

LCP superior a 4 segundos. La imagen hero es el elemento LCP. Solución: cargar la primera imagen con fetchpriority="high" y loading="eager". Las restantes diapositivas con loading="lazy". Formato de imagen WebP/AVIF.

Cumulative Layout Shift (CLS) por slider que carga tarde. El contenedor del slider inicialmente no tiene altura, tras la inicialización JavaScript el layout salta. Solución: fijar la altura del contenedor por CSS (p.ej., aspect-ratio: 16/9).

Autoplay no funciona en dispositivos móviles. iOS Safari bloquea autoplay de vídeos y algunas animaciones CSS por ahorro de energía. Solución: desactivar autoplay en móviles y ofrecer navegación por swipe en su lugar.

Migración y compatibilidad de versiones

La mayoría de extensiones hero slider en el TER están desactualizadas y soportan como máximo TYPO3 v10 o v11. Para v12/v13 se recomienda sin excepción un Custom Content Element en el sitepackage que integre una librería moderna o se base completamente en CSS.

La migración de sliders existentes se realiza en tres pasos: exportar datos de diapositivas, configurar nuevo elemento de contenido con plantilla moderna, y migrar los elementos de contenido existentes mediante SQL al nuevo CType. El esfuerzo: 1-2 días para la configuración técnica.

Gosign recomienda en cada proyecto hero slider primero la pregunta: ¿Realmente necesita el sitio web un slider? En el 70% de los casos, un elemento hero estático rinde mejor. Para el 30% restante, Gosign entrega una solución Swiper o solo CSS que permanece por debajo de 1,5 segundos de LCP.