La página empieza con un espacio vacío pequeño; después el slider se inicializa y empuja hacia abajo todo el contenido. También puede ocurrir que la primera diapositiva aparezca con una altura y cambie cuando llegan la imagen, el texto o los controles.
El salto de diseño suele ser un problema de geometría. Hay que reservar el espacio correcto antes de que JavaScript mejore el componente y conseguir que la primera diapositiva sea válida sin esperar a la biblioteca del carrusel.
Identificar qué se mueve y en qué momento
Graba una traza de rendimiento con las regiones de layout shift activadas. Observa una carga móvil en frío y anota si el movimiento empieza al llegar una imagen, una fuente, JavaScript o un cambio de consentimiento.
Inspecciona el contenedor antes y después de inicializarse. Compara altura, clases y estilos inline. Algunas bibliotecas comienzan con todas las diapositivas apiladas y luego aplican posición absoluta; otras calculan la altura a partir de una imagen que no declara dimensiones.
No atribuyas el desplazamiento al slider solo porque está encima del contenido que se mueve. La traza debe revelar qué elemento cambió realmente de tamaño.
Reservar la proporción del contenido visual
Declara dimensiones intrínsecas y proporciona un contenedor estable:
.hero-slider {
aspect-ratio: 16 / 7;
overflow: hidden;
}
.hero-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}Elige la proporción según el diseño real. Una relación fija de escritorio puede generar en móvil un recorte demasiado bajo, por lo que quizá necesites proporciones responsive mediante media queries.
La etiqueta HTML de la imagen también debe incluir atributos width y height correctos. Así el navegador calcula la proporción antes de terminar de descargar el archivo y de aplicar el CSS.
Hacer útil la primera diapositiva sin JavaScript
Renderiza la primera diapositiva como HTML visible normal. Oculta las siguientes mediante el CSS base sin colapsar el contenedor. Cuando la biblioteca se inicialice podrá añadir controles, clonaciones y transiciones sobre una base estable.
Si la primera imagen solo existe dentro de una configuración JSON o JavaScript la asigna como fondo, el navegador no puede reservarla ni pintarla pronto. Llevar la primera imagen y el encabezado al marcado generado por el servidor suele mejorar la estabilidad y la resistencia a errores.
No apliques lazy load a la primera diapositiva si aparece en el primer viewport. Las posteriores sí pueden esperar hasta que sean necesarias.
Estabilizar textos y fuentes
Un pie o titular puede aumentar la altura cuando llega una fuente personalizada o una traducción ocupa otra línea. Diseña una zona capaz de alojar el contenido esperado en vez de calcular una altura rígida a partir del texto inglés de escritorio.
Prueba inglés, español y catalán en anchos móviles. Mantén los títulos como texto real y no coloques el único mensaje dentro de una imagen. Si el texto se superpone sobre la fotografía, reserva su región y revisa el contraste en cada diapositiva.
Cambiar font-display puede evitar texto invisible, pero no garantiza que el salto desaparezca: una métrica distinta de la fuente de sustitución todavía puede alterar los saltos de línea.
Reservar el espacio de los controles
Flechas, puntos o miniaturas que llegan tarde pueden ampliar el componente. Coloca los controles superpuestos dentro de la caja reservada o asigna desde el CSS inicial el espacio que ocuparán al final.
Las fuentes de iconos provocan cambios tardíos con frecuencia. Un SVG inline pequeño suele ser más predecible, siempre que el botón conserve etiqueta accesible y foco visible.
No elimines los controles únicamente para mejorar la métrica. Si el carrusel contiene información relevante, el visitante debe poder pausarlo o navegar por ella.
Evitar alturas variables en reproducción automática
Diapositivas con proporciones o textos muy diferentes desplazan el contenido inferior en cada transición. Usa una geometría común, recorta las imágenes de forma deliberada o coloca los textos fuera de la zona cuya altura cambia.
El autoplay también puede crear problemas de uso. Respeta la preferencia de movimiento reducido y ofrece pausa cuando el contenido avanza automáticamente. Si cada diapositiva necesita una altura distinta para resultar comprensible, una disposición vertical puede ser mejor que un carrusel.
Verificar carga e interacción
Limpia la caché de página y los recursos generados implicados, y repite cargas frías en varios anchos. Confirma que la altura inicial reservada coincide con la final, la primera imagen se solicita pronto y las siguientes no se descargan sin necesidad.
Usa flechas, puntos, gesto táctil y teclado. Vigila nuevos saltos en la primera transición, al cambiar la orientación y con textos traducidos. Compara el CLS, pero revisa también la grabación: un único movimiento grande puede ser mucho más molesto que varios mínimos.
Si un constructor inyecta alturas inline, el CSS del slider llega de forma asíncrona o el componente cambia según la plantilla, una revisión técnica debe estabilizar la estructura de origen y no limitarse a esconder el síntoma.