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 "reproducir automáticamente" o que los usuarios naveguen de forma manual. Aunque los carruseles se pueden utilizar en otro lugar, se usan con mayor frecuencia para mostrar imágenes, productos y promociones en las páginas de inicio.

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

Rendimiento

Un carrusel bien implementado, por sí mismo, debe tener muy poco o ningún elemento en el rendimiento. Sin embargo, los carruseles suelen contener grandes recursos multimedia. Los recursos grandes pueden afectar el rendimiento independientemente de si se muestran en un carrusel o en otro lugar.

• LCP (Largest Contentful Paint)

  Los carruseles grandes en la mitad superior de la página a menudo contienen el elemento LCP de la página. por lo tanto, puede tener un impacto significativo en el LCP. En estas situaciones, La optimización del carrusel puede mejorar significativamente el LCP. Para obtener un análisis explicación de cómo funciona la medición de LCP en páginas que contienen carruseles consulta la medición de LCP para carruseles. sección.

• INP (Interacción con la siguiente pintura)

  Los carruseles tienen requisitos mínimos de JavaScript y, por lo tanto, no deben 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 las herramientas de carrusel.

• CLS (Cambio de diseño acumulado)

  Un número sorprendente de carruseles utilizan animaciones con bloqueos y no compuestas que puede contribuir a CLS. En las páginas con carruseles de reproducción automática, incluye la opción potencial de provocar una CLS infinita. 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 esto, Evita usar animaciones no compuestas. en tu carrusel (por ejemplo, durante las transiciones de diapositivas).

Prácticas recomendadas para el rendimiento

Cómo cargar contenido de carrusel con HTML

El contenido de carrusel debe cargarse mediante el lenguaje de marcado HTML de la página para que se sea detectable para el navegador al principio del proceso de carga de la página. Uso de JavaScript para iniciar la carga del contenido del carrusel es probablemente el único error de rendimiento que se debe evitar al usar carruseles. Esto retrasa la carga de imágenes y puede afectar negativamente el LCP.

<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>

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 progresivamente para incluir controles de navegación y contenido. Esta técnica es más aplicable en entornos en los que tienes atención prolongada del usuario, lo que hace que el contenido adicional se cargue. En entornos como páginas de inicio, donde los usuarios solo se quedan Segundo, 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 Cambios de diseño en carruseles:

• Transiciones de diapositiva: Los cambios de diseño que ocurren durante las transiciones de diapositivas se generalmente se debe a la actualización de las propiedades de los elementos del DOM que inducen el diseño. Algunos ejemplos de estas propiedades son left, top, width y marginTop Para evitar los cambios de diseño, usa la CSS transform para hacer la transición de estos elementos. Esta En la demostración, se muestra cómo usar transform para lo siguiente: crear un carrusel básico.

• Controles de navegación: Mover o agregar o quitar la navegación de carrusel del DOM pueden provocar cambios de diseño según cómo los recursos de Google Cloud. Los carruseles que muestran este comportamiento generalmente lo hacen respuesta al desplazamiento del usuario.

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

• Reproducción automática de carruseles: Las transiciones de deslizamiento son la fuente más común de cambios de diseño relacionados con el carrusel. En un carrusel sin reproducción automática, estos cambios de diseño normalmente ocurren dentro de los 500 ms de una interacción del usuario y, por lo tanto, no cuentan hacia el Cambio de diseño acumulado (CLS). Sin embargo, para los carruseles de reproducción automática, estos cambios de diseño hacia CLS, pero también pueden repetirse indefinidamente. Por lo tanto, es particularmente útil importante verificar que un carrusel de reproducción automática no sea una fuente de diseño cambios.

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

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

Usa tecnología moderna

Muchos sitios usan bibliotecas de JavaScript de terceros para lo siguiente: implementar carruseles. Si actualmente usas herramientas de carrusel antiguas, es posible que mejorar el rendimiento cambiando a herramientas más recientes. Las herramientas más nuevas suelen usan APIs más eficientes y tienen menos probabilidades de requerir dependencias adicionales como jQuery.

Sin embargo, en función del tipo de carrusel que crees, es posible que no necesites JavaScript. El nuevo desplazamiento API de Snap hace posible implementar transiciones tipo carrusel con solo HTML y o CSS.

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

• Cómo compilar un componente de Historias (web.dev)
• Diseño web de nueva generación: ajuste de desplazamiento (web.dev)
• Carrusel solo para CSS (trucos de CSS)
• Cómo crear un carrusel solo para CSS (trucos de CSS)

Cómo optimizar el contenido de carrusel

Los carruseles a menudo contienen algunas de las imágenes más grandes de un sitio, así que vale la pena para asegurarse de que estén completamente optimizadas. Elección de la estrategia formato de imagen y nivel de compresión, mediante una CDN de imagen uso de srcset para publicar varias imágenes versiones son todas las 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 LCP en relación con los carruseles. Si bien los carruseles se tratan de la misma manera que a cualquier otro elemento de UX durante el LCP. cálculo, la mecánica de calcular el LCP de los carruseles de reproducción automática es punto común de confusión.

Medición de LCP para carruseles

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

• El LCP considera los elementos de página a medida que se pintan en el marco. Candidatos nuevos para el elemento LCP ya no se consideran una vez que el usuario interactúa (toca, se desplaza o presiona teclas) con la página. Por lo tanto, cualquier diapositiva en un entorno carrusel tiene el potencial de ser el elemento LCP final, mientras que en una solo en el carrusel, la primera diapositiva sería un posible candidato para el LCP.
• Si se renderizan dos imágenes del mismo tamaño, se considerará la primera el elemento de LCP. El elemento LCP solo se actualiza cuando el candidato de LCP es más grande que el elemento LCP actual. Por lo tanto, si todos los elementos del carrusel se del mismo tamaño, el elemento LCP debe ser la primera imagen que se muestre.
• Al evaluar los candidatos de LCP, el LCP considera el "tamaño visible o la tamaño intrínseco, el que sea más pequeño". Por lo tanto, si una carrusel muestra imágenes de un tamaño constante, pero contiene imágenes de variables intrínsecas tamaños que son más pequeñas que el tamaño de visualización, el elemento LCP puede cambiar a medida que diapositivas. En este caso, si todas las imágenes se muestran de la misma manera de la imagen, la imagen con el tamaño intrínseco más grande se considerará como el LCP . Para mantener un LCP bajo, debes asegurarte de que todos los elementos carrusel tienen el mismo tamaño intrínseco.

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

A partir de Chrome 88 Las imágenes que luego se quitan del DOM se consideran como posiblemente más grandes con contenido original. Antes de Chrome 88, estas imágenes se excluían de consideración. En el caso de los sitios que utilizan carruseles de reproducción automática, esta definición cambiará tendrán un impacto neutral o positivo en las puntuaciones de LCP.

Este cambio se realizó en respuesta al observación que muchos sitios implementan transiciones de carrusel al quitar los elementos imagen mostrada del árbol del DOM. Antes de Chrome 88, cada vez que se actualizaba de la diapositiva, la eliminación del elemento anterior activará un LCP actualización. Este cambio solo afecta a los carruseles de reproducción automática, por definición, Los procesamientos de imagen con contenido más grandes solo pueden ocurrir antes de que el usuario interactúe con el .

Cambios en los umbrales de 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, 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 el usuario note la carga de la imagen, pero a costa de más descargas. Usa la demostración de carga diferida horizontal para comparar el comportamiento de Chrome con el de Safari y Firefox.

Otras consideraciones

Esta sección analiza las prácticas recomendadas de UX y productos que debes tener en cuenta tener en cuenta al implementar carruseles. Los carruseles deben promover tus objetivos comerciales y presentar el contenido de forma 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 muy visibles. Este es algo que rara vez se hace bien. La mayoría de los carruseles tienen controles de navegación sean pequeños y sutiles. Ten en cuenta que un solo color o estilo de el control de navegación rara vez funcionará en todas las situaciones. Por ejemplo, una flecha que se ve claramente contra un fondo oscuro puede ser difícil de ver sobre un fondo claro.

Cómo indicar el progreso de la navegación

Los controles de navegación del carrusel deben brindar contexto sobre la cantidad total de diapositivas y el progreso del usuario a través de ellas. Esta información hace que sea más fácil para que el usuario navegue hasta una diapositiva en particular y comprenda qué contenido tiene ya se vieron. En algunos casos, brindar una vista previa de los próximos eventos contenido, ya sea un extracto de la siguiente diapositiva o una lista de miniaturas, ser útiles y aumentar la participación.

Cómo admitir gestos para dispositivos móviles

En dispositivos móviles, los gestos de deslizamiento deberían ser compatibles además de los controles de navegación (como los botones de la 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, el el contenido al que se vinculan las diapositivas de carrusel debe ser accesible desde otras plataformas de navegación. rutas de ataque.

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: en la pantalla las animaciones tienden a distraer a los usuarios y alejar la atención de los usuarios content; al mismo tiempo, como los usuarios suelen asociar animaciones con anuncios, ignorará 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, la reproducción automática perjudicará el contenido más importante. Además, Los carruseles de reproducción automática pueden ser difíciles de leer (y también molestos). Las personas leen a distintas velocidades, por lo que no es común que un carrusel realice una transición constante a los "derechos" tiempo para diferentes usuarios.

Idealmente, la navegación por diapositivas debería estar dirigida al usuario a través de controles de navegación. Si Debes usar la reproducción automática y se debe inhabilitar cuando el usuario coloca el cursor sobre ella. Además, La tasa de transición de las diapositivas debe tener en cuenta su contenido, ya que más texto contiene una diapositiva, por más tiempo se debe mostrar en la pantalla.

Mantener el texto y las imágenes separados

El contenido del texto del carrusel suele estar "integrado" el archivo de imagen correspondiente, en lugar se muestra por separado con el lenguaje de marcado HTML. Este enfoque es malo para las tasas de accesibilidad, localización y compresión. También fomenta un un enfoque uniforme para la creación de recursos. Sin embargo, la misma imagen y texto el formato rara vez se lee igualmente en 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. Breve, Una copia concisa aumentará las probabilidades de que tu mensaje se transmita.

Prácticas recomendadas para los productos

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

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

• Los carruseles, sobre todo si contienen promociones o avanzan automáticamente se confunden fácilmente con los anuncios de los usuarios. Los usuarios tienden a ignorar los anuncios, un fenómeno conocido como banner. ceguera.
• Los carruseles a menudo se usan para acomodar varios departamentos y evitar hacer para tomar decisiones sobre las prioridades de la empresa. Como resultado, los carruseles se pueden convertir fácilmente en un vertedero de contenido ineficaz.

Ponga a prueba sus suposiciones

El impacto comercial de los carruseles, sobre todo los que se encuentran en las páginas principales, debería verse que se evaluaron y probaron. Las tasas de clics de carrusel pueden ayudarte a determinar un carrusel y su contenido es eficaz.

Sea relevante.

Los carruseles funcionan mejor cuando tienen contenido interesante y relevante que es presentarse con un contexto claro. Si el contenido no atraerá a los usuarios fuera de carrusel: colocarlo en un carrusel no mejorará su rendimiento. Si debes usar un carrusel, priorizar el contenido y asegurarse de que cada diapositiva sea lo suficientemente relevantes que el usuario querría hacer clic para ir a la siguiente diapositiva.