Prácticas recomendadas para carruseles

Optimiza los carruseles para mejorar el rendimiento y la usabilidad.

Katie Hempenius
Katie Hempenius
X

Un carrusel es un componente de UX que muestra contenido de forma similar a una presentación de diapositivas. Los usuarios pueden activar la reproducción automática de los carruseles o navegar por ellos de forma manual. Aunque los carruseles se pueden usar en otros lugares, se usan con mayor frecuencia para mostrar imágenes, productos y promociones en las páginas principales.

En este artículo, se analizan las prácticas recomendadas de rendimiento y UX para los carruseles.

Imagen que muestra un carrusel

Rendimiento

Un carrusel bien implementado, en sí mismo, debería tener un impacto mínimo o nulo en el rendimiento. Sin embargo, los carruseles suelen contener recursos multimedia grandes. Los recursos grandes pueden afectar el rendimiento, independientemente de si se muestran en un carrusel o en otro lugar.

  • LCP (procesamiento de imagen con contenido más grande)

    Los carruseles grandes de la mitad superior de la página suelen contener el elemento LCP de la página y, por lo tanto, pueden tener un impacto significativo en la LCP. En estos casos, optimizar el carrusel puede mejorar significativamente el LCP. Para obtener una explicación detallada de cómo funciona la medición de LCP en las páginas que contienen carruseles, consulta la sección Medición de LCP para carruseles.

  • INP (Interaction to Next Paint)

    Los carruseles tienen requisitos mínimos de JavaScript y, por lo tanto, no deberían afectar la capacidad de respuesta de la página. Si descubres que el carrusel de tu sitio tiene secuencias de comandos de larga duración, considera reemplazar las herramientas del carrusel.

  • CLS (Cambio de diseño acumulado)

    Una cantidad sorprendente de carruseles usan animaciones entrecortadas y no compuestas que pueden contribuir al CLS. En las páginas con carruseles que se reproducen automáticamente, esto puede causar un CLS infinito. Por lo general, este tipo de CLS no es evidente para el ojo humano, lo que hace que el problema sea fácil de pasar por alto. Para evitar este problema, no uses animaciones no compuestas en tu carrusel (por ejemplo, durante las transiciones de diapositivas).

Prácticas recomendadas para el rendimiento

Carga el contenido del carrusel con HTML

El contenido del carrusel debe cargarse a través del lenguaje de marcado HTML de la página para que el navegador pueda detectarlo al principio del proceso de carga de la página. Usar JavaScript para iniciar la carga del contenido del carrusel es probablemente el error de rendimiento más grande que se debe evitar cuando se usan carruseles. Esto retrasa la carga de imágenes y puede afectar negativamente el LCP.

Qué debes hacer
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
Qué no debes hacer
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

Para la optimización avanzada del carrusel, considera cargar la primera diapositiva de forma estática y, luego, mejorarla de forma progresiva para incluir controles de navegación y contenido adicional. Esta técnica es más aplicable a los entornos en los que tienes la atención prolongada de un usuario, lo que le da tiempo al contenido adicional para cargarse. En entornos como las páginas principales, en los que los usuarios pueden permanecer solo un segundo o dos, cargar una sola imagen puede ser igualmente eficaz.

Evita los cambios de diseño

Las transiciones de diapositivas y los controles de navegación son las dos fuentes más comunes de cambios de diseño en los carruseles:

  • Transiciones de diapositivas: Los cambios de diseño que se producen durante las transiciones de diapositivas suelen deberse a la actualización de las propiedades que inducen el diseño de los elementos del DOM. Algunos ejemplos de estas propiedades son: left, top, width y marginTop. Para evitar cambios en el diseño, usa la propiedad transform de CSS para realizar la transición de estos elementos. En esta demostración, se muestra cómo usar transform para compilar un carrusel básico.

  • Controles de navegación: Mover o agregar o quitar controles de navegación del carrusel del DOM puede causar cambios de diseño según cómo se implementen estos cambios. Los carruseles que exhiben este comportamiento suelen hacerlo en respuesta al desplazamiento del mouse del usuario.

Estos son algunos de los puntos de confusión comunes en relación con la medición de la CLS para los carruseles:

  • Carruseles con reproducción automática: Las transiciones de diapositivas son la fuente más común de cambios de diseño relacionados con el carrusel. En un carrusel que no se reproduce automáticamente, estos cambios de diseño suelen ocurrir en un plazo de 500 ms después de una interacción del usuario y, por lo tanto, no se tienen en cuenta en el cambio de diseño acumulativo (CLS). Sin embargo, en el caso de los carruseles de reproducción automática, estos cambios de diseño no solo pueden contabilizarse en el CLS, sino que también se pueden repetir de forma indefinida. Por lo tanto, es particularmente importante verificar que un carrusel de reproducción automática no sea una fuente de cambios de diseño.

  • Desplazamiento: Algunos carruseles permiten que los usuarios usen el desplazamiento para navegar por las diapositivas del carrusel. Si la posición inicial de un elemento cambia, pero su desplazamiento de desplazamiento (es decir, scrollLeft o scrollTop) cambia en la misma cantidad (pero en la dirección opuesta), esto no se considera un cambio de diseño, siempre que ocurra en el mismo marco.

Para obtener más información sobre los cambios de diseño, consulta Cómo depurar cambios de diseño.

Usa tecnología moderna

Muchos sitios usan bibliotecas de JavaScript de terceros para implementar carruseles. Si actualmente usas herramientas de carrusel más antiguas, es posible que logres mejorar el rendimiento si cambias a herramientas más recientes. Las herramientas más nuevas suelen usar APIs más eficientes y es menos probable que requieran dependencias adicionales, como jQuery.

Sin embargo, según el tipo de carrusel que crees, es posible que no necesites JavaScript en absoluto. La nueva API de Scroll Snap permite implementar transiciones similares a las de carrusel solo con HTML y CSS.

Estos son algunos recursos sobre el uso de scroll-snap que podrían resultarte útiles:

Optimiza el contenido del carrusel

Los carruseles suelen contener algunas de las imágenes más grandes de un sitio, por lo que puede ser conveniente que te asegures de que estas imágenes estén completamente optimizadas. Elegir el formato de imagen y el nivel de compresión correctos, usar una CDN de imágenes y usar srcset para entregar varias versiones de imágenes son técnicas que pueden reducir el tamaño de transferencia de las imágenes.

Medición del rendimiento

En esta sección, se analiza la medición de la LCP en relación con los carruseles. Aunque los carruseles no se tratan de manera diferente a ningún otro elemento de la UX durante el cálculo de la LCP, la mecánica para calcular la LCP de los carruseles con reproducción automática es un punto de confusión común.

Medición de LCP para los carruseles

Estos son los puntos clave para comprender cómo funciona el cálculo de la LCP para los carruseles:

  • La LCP considera los elementos de la página a medida que se pintan en el marco. Los candidatos nuevos para el elemento LCP ya no se consideran una vez que el usuario interactúa (presiona, desplaza o presiona teclas) con la página. Por lo tanto, cualquier diapositiva en un carrusel con reproducción automática tiene el potencial de ser el elemento LCP final, mientras que en un carrusel estático, solo la primera diapositiva sería un candidato potencial para la LCP.
  • Si se renderizan dos imágenes del mismo tamaño, la primera se considerará el elemento LCP. El elemento LCP solo se actualiza cuando el candidato a LCP es más grande que el elemento LCP actual. Por lo tanto, si todos los elementos del carrusel tienen el mismo tamaño, el elemento LCP debe ser la primera imagen que se muestre.
  • Cuando se evalúan los candidatos de LCP, se considera el "tamaño visible o el tamaño intrínseco, lo que sea menor". Por lo tanto, si un carrusel que se reproduce automáticamente muestra imágenes de un tamaño coherente, pero contiene imágenes de tamaños intrínsecos variables que son más pequeñas que el tamaño de la pantalla, el elemento LCP puede cambiar a medida que se muestran diapositivas nuevas. En este caso, si todas las imágenes se muestran en el mismo tamaño, la imagen con el tamaño intrínseco más grande se considerará el elemento LCP. Para mantener el LCP bajo, debes asegurarte de que todos los elementos de un carrusel con reproducción automática tenga el mismo tamaño intrínseco.

Cambios en el cálculo de la LCP para los carruseles en Chrome 88

A partir de Chrome 88, las imágenes que se quitan más tarde del DOM se consideran como posibles pinturas con contenido más grandes. Antes de Chrome 88, estas imágenes se excluían de la consideración. En el caso de los sitios que usan carruseles con reproducción automática, este cambio de definición tendrá un impacto neutral o positivo en las puntuaciones de la LCP.

Este cambio se realizó en respuesta a la observación de que muchos sitios implementan transiciones de carrusel quitando la imagen que se mostraba anteriormente del árbol DOM. Antes de Chrome 88, cada vez que se presentaba una diapositiva nueva, la eliminación del elemento anterior activaba una actualización de la LCP. Este cambio solo afecta a los carruseles con reproducción automática. Por definición, las posibles cargas de contenido más grandes solo pueden ocurrir antes de que un usuario interactúe por primera vez con la página.

Cambios en los umbrales en Chrome 121

Chrome 121 cambió el comportamiento de las imágenes de desplazamiento horizontal, como los carruseles. Ahora usan los mismos umbrales que el desplazamiento vertical. Esto significa que, en el caso de uso del carrusel, las imágenes se cargarán antes de que sean visibles en la ventana de visualización. Esto significa que es menos probable que el usuario note la carga de imágenes, pero a costa de más descargas. Usa la demostración de carga diferida horizontal para comparar el comportamiento en Chrome, Safari y Firefox.

Otras consideraciones

En esta sección, se analizan las prácticas recomendadas de UX y del producto que debes tener en cuenta cuando implementes los carruseles. Los carruseles deben avanzar en tus objetivos comerciales y presentar el contenido de una manera que sea fácil de navegar y leer.

Proporciona controles de navegación destacados

Los controles de navegación del carrusel deben ser fáciles de hacer clic y muy visibles. Esto es algo que rara vez se hace bien: la mayoría de los carruseles tienen controles de navegación que son pequeños y sutiles. Ten en cuenta que un solo color o estilo de control de navegación rara vez funcionará en todas las situaciones. Por ejemplo, una flecha que se ve claramente sobre un fondo oscuro puede ser difícil de ver sobre un fondo claro.

Indica el progreso de la navegación

Los controles de navegación del carrusel deben proporcionar contexto sobre la cantidad total de diapositivas y el progreso del usuario a través de ellas. Esta información facilita al usuario navegar a una diapositiva en particular y comprender qué contenido ya se vio. En algunas situaciones, proporcionar una vista previa del contenido que se mostrará a continuación (ya sea un extracto de la siguiente diapositiva o una lista de miniaturas) también puede ser útil y aumentar la participación.

Cómo admitir gestos de dispositivos móviles

En dispositivos móviles, se deben admitir los gestos de deslizamiento, además de los controles de navegación tradicionales (como los botones en pantalla).

Proporciona rutas de navegación alternativas

Dado que es poco probable que la mayoría de los usuarios interactúen con todo el contenido del carrusel, se debe poder acceder al contenido al que se vinculan las diapositivas del carrusel desde otras rutas de navegación.

Prácticas recomendadas para la legibilidad

No usar la reproducción automática

El uso de la reproducción automática crea dos problemas casi paradójicos: las animaciones en pantalla suelen distraer a los usuarios y alejar la vista del contenido más importante. Al mismo tiempo, como los usuarios suelen asociar las animaciones con los anuncios, ignorarán los carruseles que se reproducen automáticamente.

Por lo tanto, es raro que la reproducción automática sea una buena opción. Si el contenido es importante, no usar la reproducción automática maximizará su exposición. Si el contenido del carrusel no es importante, el uso de la reproducción automática perjudicará el contenido más importante. Además, los carruseles con reproducción automática pueden ser difíciles de leer (y molestos). Las personas leen a diferentes velocidades, por lo que es raro que un carrusel realice transiciones de forma coherente en el momento "correcto" para diferentes usuarios.

Lo ideal es que la navegación deslizante sea dirigida por el usuario a través de controles de navegación. Si debes usar la reproducción automática, esta debe estar inhabilitada cuando el usuario coloca el cursor sobre ella. Además, la velocidad de transición de diapositivas debe tener en cuenta el contenido de la diapositiva: cuanto más texto contenga una diapositiva, más tiempo debe mostrarse en pantalla.

Mantén el texto y las imágenes separados

El contenido de texto del carrusel suele estar “integrado” en el archivo de imagen correspondiente, en lugar de mostrarse por separado con el lenguaje de marcado HTML. Este enfoque es malo para la accesibilidad, la localización y las tasas de compresión. También fomenta un enfoque uniforme para la creación de recursos. Sin embargo, el mismo formato de imagen y texto rara vez es igualmente legible en los formatos para computadoras y dispositivos móviles.

Sé breve.

Solo tienes una fracción de segundo para captar la atención de un usuario. Un texto breve y directo aumentará las probabilidades de que se comprenda tu mensaje.

Prácticas recomendadas para productos

Los carruseles funcionan bien en situaciones en las que no es una opción usar espacio vertical adicional para mostrar contenido adicional. Los carruseles en las páginas de productos suelen ser un buen ejemplo de este caso de uso.

Sin embargo, los carruseles no siempre se usan de manera eficaz.

  • Los usuarios suelen confundir los carruseles, en especial si contienen promociones o avanzan automáticamente, con anuncios. Los usuarios suelen ignorar los anuncios, un fenómeno conocido como ceguera a los banners.
  • Los carruseles suelen usarse para apaciguar a varios departamentos y evitar tomar decisiones sobre las prioridades de la empresa. Como resultado, los carruseles pueden convertirse fácilmente en un vertedero de contenido ineficaz.

Ponga a prueba sus suposiciones

Se debe evaluar y probar el impacto comercial de los carruseles, en particular los que se encuentran en las páginas principales. Las tasas de clics de los carruseles pueden ayudarte a determinar si un carrusel y su contenido son eficaces.

Sea relevante.

Los carruseles funcionan mejor cuando contienen contenido interesante y relevante que se presenta con un contexto claro. Si el contenido no atrae a un usuario fuera de un carrusel, colocarlo en uno no mejorará su rendimiento. Si debes usar un carrusel, prioriza el contenido y asegúrate de que cada diapositiva sea lo suficientemente relevante como para que un usuario quiera hacer clic en la siguiente.