Se usó la API de Cloud Translation para traducir esta página.

Prácticas recomendadas para carruseles

Optimiza los carruseles para mejorar el rendimiento y la usabilidad.

Katie Hempenius

Un carrusel es un componente de UX que muestra contenido de manera similar a una presentación de diapositivas. Los carruseles pueden reproducirse automáticamente o se puede navegar de forma manual por los usuarios. Aunque los carruseles se pueden usar en otros lugares, se utilizan 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 carruseles.

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 grandes elementos multimedia. Los elementos grandes pueden afectar el rendimiento sin importar si se muestran en un carrusel o en otro lugar.

LCP (Procesamiento de imagen con contenido más grande)

Los carruseles grandes en 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 el LCP. En estas situaciones, optimizar el carrusel puede mejorar significativamente el LCP. Para obtener una explicación detallada de cómo funciona la medición LCP en páginas que contienen carruseles, consulta la sección Medición LCP para carruseles.
INP (interacción al siguiente procesamiento de imagen)

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, deberías considerar reemplazar tus herramientas de carrusel.
CLS (Cambio de diseño acumulado)

Una cantidad sorprendente de carruseles usa animaciones no compuestas y con bloqueos que pueden contribuir a CLS. En las páginas con carruseles de reproducción automática, esto tiene el potencial de 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, evita usar animaciones no compuestas en tu carrusel (por ejemplo, durante las transiciones de diapositivas).

Prácticas recomendadas para mejorar el rendimiento

Cómo cargar contenido de carrusel con HTML

El contenido del carrusel se debe cargar con el lenguaje de marcado HTML de la página para que el navegador lo detecte al comienzo del proceso de carga de la página. Es probable que el uso de JavaScript para iniciar la carga de contenido de carrusel sea el mayor error de rendimiento que se debe evitar cuando se usan carruseles. Esto retrasa la carga de las imágenes y puede afectar negativamente al LCP.

Sí

<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 una optimización avanzada del carrusel, considera cargar la primera diapositiva de forma estática y, luego, mejorarla de forma progresiva para que incluya controles de navegación y contenido adicional. Esta técnica se aplica más a los entornos en los que tienes atención prolongada de un usuario, lo que le brinda tiempo para cargar el contenido adicional. En entornos como las páginas principales, en los que los usuarios pueden quedarse solo un segundo o dos, cargar una sola imagen puede ser igualmente eficaz.

Cómo evitar los cambios de diseño

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

Transiciones de diapositiva: Por lo general, los cambios de diseño que ocurren durante las transiciones de diapositivas se deben 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 de 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 crear un carrusel básico.
Controles de navegación: Mover o agregar o quitar controles de navegación de carrusel del DOM puede provocar cambios en el diseño según cómo se implementen. Los carruseles que muestran este comportamiento suelen hacerlo en respuesta al desplazamiento del usuario.

Estos son algunos de los puntos comunes de confusión en lo que respecta a la medición de CLS para carruseles:

Carruseles de 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 es de reproducción automática, estos cambios de diseño suelen ocurrir dentro de los 500 ms de una interacción del usuario y, por lo tanto, no se registran para el Cambio de diseño acumulado (CLS). Sin embargo, en el caso de los carruseles de reproducción automática, no solo estos cambios de diseño pueden contar para el CLS, sino que también pueden repetirse indefinidamente. 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 a los usuarios utilizar el desplazamiento para navegar por las diapositivas de carrusel. Si la posición inicial de un elemento cambia, pero su 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 ocurran en el mismo fotograma.

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 anteriores, es posible que puedas mejorar el rendimiento si cambias a herramientas más nuevas. Las herramientas más nuevas tienden a usar APIs más eficientes y es menos probable que requieran dependencias adicionales, como jQuery.

Sin embargo, según el tipo de carrusel que estés compilando, es posible que no necesites JavaScript. La nueva API de Scroll Snap permite implementar transiciones similares a un carrusel con solo HTML y CSS.

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

Optimice el contenido del carrusel

Los carruseles suelen contener algunas de las imágenes más grandes de un sitio, por lo que puede valer la pena asegurarte 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 LCP en relación con los carruseles. Aunque los carruseles se tratan de la misma manera que a cualquier otro elemento de UX durante el cálculo de LCP, la mecánica de calcular el LCP para carruseles de reproducción automática es un punto común de confusión.

Medición LCP para carruseles

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

El LCP tiene en cuenta los elementos de 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, se desplaza o presiona teclas) con la página. Por lo tanto, cualquier diapositiva en un carrusel de 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 una posible candidata para el LCP.
Si se renderizan dos imágenes de igual tamaño, la primera se considerará como el elemento LCP. El elemento LCP solo se actualiza cuando el candidato de LCP es mayor 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, el LCP considera el "tamaño visible o intrínseco, el que sea menor". Por lo tanto, si un carrusel de reproducción automática muestra imágenes con un tamaño coherente, pero contiene imágenes de tamaños intrínsecos diversos que son más pequeños 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 con el mismo tamaño, la imagen con el tamaño intrínseco más grande se considerará como elemento de LCP. Para mantener un LCP bajo, debes asegurarte de que todos los elementos de un carrusel de reproducción automática tengan el mismo tamaño intrínseco.

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

A partir de Chrome 88, las imágenes que más tarde se quitan 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 de reproducción automática, este cambio en la definición tendrá un impacto neutral o positivo en las puntuaciones del LCP.

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

Cambios en los umbrales de Chrome 121

Chrome 121 cambió el comportamiento de las imágenes de desplazamiento horizontal, como los carruseles. Estas ahora usan los mismos umbrales que el desplazamiento vertical. Esto significa que, para el caso de uso de carrusel, las imágenes se cargarán antes de que sean visibles en el viewport. Esto significa que es menos probable que la carga de la imagen sea visible para el usuario, pero a costa de una mayor cantidad de descargas. Utiliza la demostración de la carga diferida horizontal para comparar el comportamiento en Chrome con el de Safari y Firefox.

Otras consideraciones

En esta sección, se analizan las prácticas recomendadas para la UX y el producto que debes tener en cuenta a la hora de implementar carruseles. Los carruseles deben avanzar en tus objetivos comerciales y presentar contenido de manera que sea fácil de navegar y leer.

Prácticas recomendadas para la navegación

Cómo proporcionar controles de navegación destacados

Los controles de navegación del carrusel deben ser fáciles de hacer clic y deben ser muy visibles. Esto es algo que rara vez se hace bien; la mayoría de los carruseles tienen controles de navegación 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, podría resultar difícil ver una flecha que es claramente visible sobre un fondo oscuro sobre un fondo claro.

Cómo indicar 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. Con esta información, es más fácil para el usuario navegar a una diapositiva en particular y comprender qué contenido ya vio. En algunas situaciones, ofrecer una vista previa del próximo contenido, ya sea un extracto de la siguiente diapositiva o una lista de miniaturas, también puede ser útil y aumentar la participación.

Compatibilidad con gestos de dispositivos móviles

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

Cómo proporcionar rutas de navegación alternativas

Como 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 de 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 tienden a distraer a los usuarios y alejar la vista del contenido más importante. Al mismo tiempo, como los usuarios a menudo asocian las animaciones con los anuncios, ignoran los carruseles que se reproducen automáticamente.

Por lo tanto, no es común 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 restará valor del contenido más importante. Además, los carruseles de 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 una transición coherente en el momento "adecuado" para los diferentes usuarios.

Lo ideal sería que la navegación por diapositivas esté dirigida al usuario a través de controles de navegación. Si debes usar la reproducción automática, esta se debe inhabilitar cuando el usuario coloca el cursor sobre ella. Además, la tasa de transición debe tener en cuenta el contenido de las diapositivas, ya que cuanto más texto contenga una diapositiva, más tiempo debería aparecer en la pantalla.

Mantén el texto y las imágenes separados

El contenido de texto del carrusel a menudo se "integra" en el archivo de imagen correspondiente, en lugar de mostrarse por separado mediante el lenguaje de marcado HTML. Este enfoque es deficiente para la accesibilidad, la localización y las tasas de compresión. También fomenta un enfoque único para la creación de recursos. Sin embargo, el mismo formato de imagen y de texto rara vez se puede leer de la misma manera en los formatos para computadoras de escritorio y dispositivos móviles.

Sé breve.

Solo tienes una fracción de segundo para captar la atención de un usuario. Un texto breve que vaya al grano aumentará las probabilidades de que se transmita tu mensaje.

Prácticas recomendadas para los productos

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

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

Los carruseles, en especial si contienen promociones o avances automáticos, se confunden fácilmente con los anuncios de los usuarios. Los usuarios tienden a ignorar los anuncios, un fenómeno conocido como ceguera a banners.
Los carruseles se utilizan a menudo para plasmar 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 empresarial de los carruseles, en particular los de las páginas principales. Las tasas de clics del carrusel pueden ayudarte a determinar si un carrusel y su contenido son eficaces.

Sea relevante.

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