Práticas recomendadas para carrosséis

Otimize os carrosséis para melhorar a performance e a usabilidade.

Katie Hempenius

Um carrossel é um componente de UX que mostra conteúdo como um slideshow. Os carrosséis podem ser "reproduzidos automaticamente" ou navegados manualmente pelos usuários. Embora os carrosséis possam ser usados em outros lugares, eles são usados com mais frequência para mostrar imagens, produtos e promoções nas páginas iniciais.

Neste artigo, abordamos a performance e as práticas recomendadas de UX para carrosséis.

Desempenho

Um carrossel bem implementado, por si só, precisa ter um impacto mínimo ou nenhum na performance. No entanto, os carrosséis geralmente contêm recursos de mídia grandes. Recursos grandes podem afetar a performance, independentemente de serem exibidos em um carrossel ou em outro lugar.

• LCP (maior exibição de conteúdo)

  Os carrosséis grandes acima da dobra geralmente contêm o elemento LCP da página e, portanto, podem ter um impacto significativo no LCP. Nesses cenários, otimizar o carrossel pode melhorar significativamente o LCP. Para uma explicação detalhada de como a medição de LCP funciona em páginas com carrosséis, consulte a seção Medição de LCP para carrosséis.

• Interaction to Next Paint (INP)

  Os carrosséis têm requisitos mínimos de JavaScript e, portanto, não devem afetar a capacidade de resposta da página. Se você descobrir que o carrossel do seu site tem scripts de longa duração, considere substituir as ferramentas do carrossel.

• CLS (Cumulative Layout Shift)

  Um número surpreendente de carrosséis usam animações instáveis e não compostas que podem contribuir para a CLS. Em páginas com carrossséis de reprodução automática, isso pode causar CLS infinito. Esse tipo de CLS normalmente não é aparente para o olho humano, o que facilita a identificação do problema. Para evitar esse problema, evite usar animações não compostas no carrossel (por exemplo, durante transições de slides).

Práticas recomendadas de desempenho

Carregar o conteúdo do carrossel usando HTML

O conteúdo do carrossel precisa ser carregado pela marcação HTML da página para que seja detectável pelo navegador no início do processo de carregamento da página. Usar JavaScript para iniciar o carregamento do conteúdo do carrossel é provavelmente o maior erro de desempenho que você precisa evitar ao usar carrosséis. Isso atrasa o carregamento de imagens e pode afetar negativamente o 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 otimizar o carrossel de forma avançada, considere carregar o primeiro slide de forma estática e, em seguida, melhore-o progressivamente para incluir controles de navegação e conteúdo adicional. Essa técnica é mais aplicável a ambientes em que você tem a atenção prolongada do usuário. Isso dá tempo para que o conteúdo extra seja carregado. Em ambientes como páginas iniciais, em que os usuários podem ficar apenas por um ou dois segundos, carregar apenas uma imagem pode ser igualmente eficaz.

Evite mudanças no layout

As transições de slides e os controles de navegação são as duas fontes mais comuns de mudanças de layout em carrosséis:

• Transições de slides:as mudanças de layout que ocorrem durante as transições de slides geralmente são causadas pela atualização das propriedades de indução de layout dos elementos DOM. Exemplos de algumas dessas propriedades incluem: left, top, width e marginTop. Para evitar mudanças de layout, use a propriedade transform do CSS para fazer a transição desses elementos. Esta demonstração mostra como usar transform para criar um carrossel básico.

• Controles de navegação:mover ou adicionar/remover controles de navegação de carrossel do DOM pode causar mudanças no layout, dependendo de como essas mudanças são implementadas. Os carrosséis que apresentam esse comportamento geralmente o fazem em resposta ao passar do cursor do usuário.

Estes são alguns dos pontos comuns de confusão em relação à medição de CLS para carrinhos:

• Carretéis de reprodução automática:as transições de slides são a origem mais comum de mudanças de layout relacionadas a carrosséis. Em um carrossel sem reprodução automática, essas mudanças de layout normalmente ocorrem em até 500 ms após uma interação do usuário e não são contabilizadas para a mudança cumulativa de layout (CLS, na sigla em inglês). No entanto, para carrosséis de autoplay, essas mudanças de layout podem contar para o CLS e também podem se repetir indefinidamente. Portanto, é particularmente importante verificar se um carrossel de reprodução automática não é uma fonte de mudanças de layout.

• Rolar:alguns carrosséis permitem que os usuários usem a rolagem para navegar pelos slides. Se a posição inicial de um elemento mudar, mas o deslocamento de rolagem (ou seja, scrollLeft ou scrollTop) mudar na mesma quantidade (mas na direção oposta), isso não será considerado uma mudança de layout, desde que ocorra no mesmo frame.

Para mais informações sobre mudanças de layout, consulte Depurar mudanças de layout.

Usar tecnologia moderna

Muitos sites usam bibliotecas JavaScript de terceiros para implementar carrosséis. Se você usa ferramentas de carrossel mais antigas, talvez seja possível melhorar o desempenho ao mudar para ferramentas mais recentes. Ferramentas mais recentes tendem a usar APIs mais eficientes e têm menos probabilidade de exigir dependências adicionais, como o jQuery.

No entanto, dependendo do tipo de carrossel que você está criando, talvez não seja necessário usar JavaScript. A nova API Scroll Snap permite implementar transições semelhantes a carrosséis usando apenas HTML e CSS.

Confira alguns recursos sobre o uso de scroll-snap que podem ser úteis:

• Como criar um componente do Stories (web.dev)
• Estilos da Web de última geração: ajuste de rolagem (web.dev)
• Carrossel somente com CSS (CSS Tricks)
• Como criar um carrossel somente com CSS (CSS Tricks)

Otimizar o conteúdo do carrossel

Os carrosséis geralmente contêm algumas das imagens maiores de um site. Por isso, vale a pena otimizar essas imagens. Escolher o formato e o nível de compactação de imagem certos, usar um CDN de imagem e usar srcset para exibir várias versões de imagem são técnicas que podem reduzir o tamanho da transferência de imagens.

Medição da performance

Esta seção discute a medição do LCP em relação aos carrosséis. Embora os carrosséis não sejam tratados de forma diferente de qualquer outro elemento de UX durante o cálculo do LCP, a mecânica de cálculo do LCP para carrosséis de reprodução automática é um ponto comum de confusão.

Medição de LCP para carrosséis

Estes são os pontos principais para entender como o cálculo do LCP funciona para carrosséis:

• A LCP considera os elementos da página conforme eles são pintados no frame. Os novos candidatos para o elemento LCP não são mais considerados quando o usuário interage (toca, rola ou pressiona teclas) com a página. Assim, qualquer slide em um carrossel de reprodução automática tem o potencial de ser o elemento LCP final, enquanto em um carrossel estático, apenas o primeiro slide seria um candidato potencial de LCP.
• Se duas imagens de tamanhos iguais forem renderizadas, a primeira imagem será considerada o elemento LCP. O elemento da LCP só é atualizado quando o candidato é maior que o elemento atual. Portanto, se todos os elementos do carrossel tiverem o mesmo tamanho, o elemento LCP será a primeira imagem exibida.
• Ao avaliar candidatos de LCP, o LCP considera o "tamanho visível ou o tamanho intrínseco, o que for menor". Portanto, se um carrossel em reprodução automática mostrar imagens em um tamanho consistente, mas tiver imagens de tamanhos intrínsecos variados menores que o tamanho da tela, o elemento LCP poderá mudar à medida que novos slides forem exibidos. Nesse caso, se todas as imagens forem exibidas no mesmo tamanho, a imagem com o maior tamanho intrínseco será considerada o elemento LCP. Para manter o LCP baixo, verifique se todos os itens em um carrossel de reprodução automática têm o mesmo tamanho intrínseco.

Mudanças no cálculo do LCP para carrosséis no Chrome 88

A partir do Chrome 88, as imagens que são removidas posteriormente do DOM são consideradas como as maiores possíveis. Antes do Chrome 88, essas imagens eram excluídas da consideração. Para sites que usam carrosséis com reprodução automática, essa mudança de definição vai ter um impacto neutro ou positivo nas pontuações de LCP.

Essa mudança foi feita em resposta à observação de que muitos sites implementam transições de carrossel removendo a imagem exibida anteriormente da árvore DOM. Antes do Chrome 88, toda vez que um novo slide era apresentado, a remoção do elemento anterior acionava uma atualização do LCP. Essa mudança afeta apenas carrosséis de reprodução automática. Por definição, as pinturas com maior conteúdo em potencial só podem ocorrer antes que um usuário interaja pela primeira vez com a página.

Mudanças nos limites no Chrome 121

O Chrome 121 mudou o comportamento de imagens de rolagem horizontal, como carrosséis. Agora, eles usam os mesmos limites da rolagem vertical. Isso significa que, para o caso de uso do carrossel, as imagens serão carregadas antes de ficarem visíveis na viewport. Isso significa que o carregamento de imagens é menos perceptível para o usuário, mas com o custo de mais downloads. Use a demonstração de carregamento lento horizontal para comparar o comportamento no Chrome com o Safari e o Firefox.

Outras considerações

Esta seção discute as práticas recomendadas de UX e produto que você precisa considerar ao implementar carrosséis. Os carrosséis precisam avançar nas suas metas de negócios e apresentar o conteúdo de uma maneira fácil de navegar e ler.

Práticas recomendadas de navegação

Fornecer controles de navegação em destaque

Os controles de navegação do carrossel precisam ser fáceis de clicar e altamente visíveis. Isso é algo que raramente é feito bem. A maioria dos carrosséis tem controles de navegação pequenos e sutis. Lembre-se de que uma única cor ou estilo de controle de navegação raramente funciona em todas as situações. Por exemplo, uma seta que é claramente visível em um fundo escuro pode ser difícil de ver em um fundo claro.

Indicar o progresso da navegação

Os controles de navegação do carrossel devem fornecer contexto sobre o número total de slides e o progresso do usuário neles. Essas informações facilitam a navegação do usuário para um slide específico e a compreensão de qual conteúdo já foi visualizado. Em algumas situações, mostrar uma prévia do conteúdo que está por vir, seja um trecho do próximo slide ou uma lista de miniaturas, também pode ser útil e aumentar o engajamento.

Suporte a gestos para dispositivos móveis

Em dispositivos móveis, os gestos de deslizar precisam ser compatíveis com os controles de navegação tradicionais (como botões na tela).

Fornecer caminhos de navegação alternativos

Como é improvável que a maioria dos usuários interaja com todo o conteúdo do carrossel, o conteúdo vinculado aos slides do carrossel precisa ser acessível por outros caminhos de navegação.

Práticas recomendadas de legibilidade

Não usar a reprodução automática

O uso da reprodução automática cria dois problemas quase paradoxais: as animações na tela tendem a distrair os usuários e desviar a atenção deles de conteúdo mais importante. Ao mesmo tempo, como os usuários costumam associar animações a anúncios, eles ignoram carrosséis que são reproduzidos automaticamente.

Por isso, a reprodução automática raramente é uma boa escolha. Se o conteúdo for importante, não usar a reprodução automática vai maximizar a exposição dele. Se o conteúdo do carrossel não for importante, o uso da reprodução automática vai prejudicar o conteúdo mais importante. Além disso, os carrosséis de reprodução automática podem ser difíceis de ler (e irritantes). As pessoas leem em velocidades diferentes. Por isso, é raro que um carrossel faça a transição de forma consistente no momento "certo" para usuários diferentes.

O ideal é que a navegação por slides seja direcionada pelo usuário por meio de controles de navegação. Se você precisar usar a reprodução automática, ela precisa ser desativada quando o usuário passar o cursor. Além disso, a taxa de transição de slides precisa levar em consideração o conteúdo do slide. Quanto mais texto um slide tiver, mais tempo ele vai aparecer na tela.

Mantenha texto e imagens separados

O conteúdo de texto do carrossel geralmente é "incorporado" ao arquivo de imagem correspondente, em vez de ser mostrado separadamente usando a marcação HTML. Essa abordagem é ruim para taxas de acessibilidade, localização e compactação. Ele também incentiva uma abordagem única para a criação de recursos. No entanto, a mesma formatação de imagem e texto raramente é legível de forma igual em formatos para computador e dispositivos móveis.

Use um texto conciso.

Você tem apenas uma fração de segundo para chamar a atenção de um usuário. Uma cópia curta e direta aumenta as chances de sua mensagem ser transmitida.

Práticas recomendadas para produtos

Os carrosséis funcionam bem em situações em que usar espaço vertical extra para exibir mais conteúdo não é uma opção. Os carrosséis nas páginas de produtos são geralmente um bom exemplo desse caso de uso.

No entanto, os carrosséis nem sempre são usados de maneira eficaz.

• Os carrosséis, principalmente se contêm promoções ou avançam automaticamente, são facilmente confundidos com anúncios pelos usuários. Os usuários tendem a ignorar anúncios, um fenômeno conhecido como cegueira de banner.
• Os carrosséis são usados com frequência para acalmar vários departamentos e evitar decisões sobre prioridades de negócios. Como resultado, os carrosséis podem facilmente se tornar um depósito de conteúdo ineficaz.

Teste suas suposições.

O impacto nos negócios dos carrosséis, principalmente aqueles nas páginas iniciais, precisa ser avaliado e testado. As taxas de cliques no carrossel podem ajudar a determinar se um carrossel e o conteúdo dele são eficazes.

Seja relevante

Os carrosséis funcionam melhor quando contêm conteúdo interessante e relevante apresentado com um contexto claro. Se o conteúdo não engajar um usuário fora de um carrossel, colocá-lo em um carrossel não vai melhorar a performance. Se você precisar usar um carrossel, priorize o conteúdo e garanta que cada slide seja suficientemente relevante para que o usuário queira clicar no slide seguinte.