Práticas recomendadas para carrosséis

Otimize os carrosséis para desempenho e usabilidade.

Katie Hempenius

Um carrossel é um componente de UX que exibe conteúdo de maneira semelhante a uma apresentação de slides. Os carrosséis podem ser "reprodução automática" ou ser navegados manualmente pelos usuários. Embora os carrosséis possam ser usados em outros lugares, eles são usados com mais frequência para exibir imagens, produtos e promoções nas páginas iniciais.

Este artigo discute as práticas recomendadas de desempenho e UX para carrosséis.

Desempenho

Um carrossel bem implementado, por si só, deve ter pouco ou nenhum impacto sobre o desempenho. 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.

• Maior exibição de conteúdo (LCP, na sigla em inglês)

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

• INP (Interação com a próxima exibição)

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

• CLS (Mudança de layout cumulativa)

  Um número surpreendente de carrosséis usa animações instáveis e não compostas que podem contribuir para a CLS. Em páginas com carrosséis de reprodução automática, isso tem o potencial de causar CLS infinita. Esse tipo de CLS normalmente não é aparente para o olho humano, o que torna o problema fácil de ignorar. Para evitar esse problema, evite o uso de animações não compostas no carrossel (por exemplo, durante as 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 possa ser detectado pelo navegador no início do processo de carregamento. O uso do JavaScript para iniciar o carregamento do conteúdo do carrossel é provavelmente o maior erro de desempenho a ser evitado ao usar carrosséis. Isso atrasa o carregamento da imagem e pode afetar negativamente a 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 otimização avançada do carrossel, carregue o primeiro slide estaticamente e aprimore-o progressivamente para incluir controles de navegação e outros conteúdos. Essa técnica é mais aplicável a ambientes em que você tem a atenção prolongada do usuário, o que proporciona mais tempo para carregar o conteúdo. Em ambientes como as páginas iniciais, em que os usuários ficam ativos por um segundo ou dois, carregar apenas uma imagem pode ser igualmente eficaz.

Evitar mudanças de 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 slide: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 (link em inglês) 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 de layout, dependendo de como essas mudanças são implementadas. Os carrosséis que exibem esse comportamento normalmente o fazem em resposta ao cursor do usuário.

Estes são alguns dos pontos comuns de confusão relacionados à medição de CLS para carrosséis:

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

• Rolagem:alguns carrosséis permitem que os usuários usem a rolagem para navegar pelos slides de carrossel. 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 ocorram no mesmo frame.

Para saber mais sobre mudanças de layout, consulte Depurar mudanças de layout.

Use tecnologia moderna

Muitos sites usam bibliotecas JavaScript de terceiros para implementar carrosséis. Se você usa as ferramentas de carrossel mais antigas, pode melhorar o desempenho mudando para as 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 precise de JavaScript. A nova API Scroll Snap possibilita a implementação de transições semelhantes a carrossel usando apenas HTML e CSS.

Aqui estão alguns recursos úteis sobre como usar scroll-snap:

• Como criar um componente de Histórias (web.dev)
• Estilo da Web de última geração: ajuste de rolagem (web.dev)
• Carrossel somente para o CSS (truques do CSS)
• Como criar um carrossel somente de CSS (truques de CSS)

Otimizar o conteúdo do carrossel

Os carrosséis geralmente contêm algumas das maiores imagens de um site, por isso, pode valer a pena garantir que essas imagens sejam totalmente otimizadas. Escolher o formato de imagem e o nível de compactação certos, usar uma CDN de imagem e usar srcset para exibir várias versões da 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 da LCP no que se refere aos carrosséis. Embora os carrosséis sejam tratados da mesma maneira que qualquer outro elemento de UX durante o cálculo da LCP, a mecânica do cálculo da LCP para a reprodução automática de carrosséis é um ponto de confusão comum.

Medição de LCP para carrosséis

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

• A LCP considera os elementos da página conforme eles são pintados no frame. Novos candidatos para o elemento LCP não são mais considerados quando o usuário interage (toca, rola ou pressiona a tecla) com a página. Assim, qualquer slide em um carrossel de reprodução automática pode ser o elemento final da LCP, enquanto em um carrossel estático apenas o primeiro slide seria um possível candidato à LCP.
• Se duas imagens do mesmo tamanho forem renderizadas, a primeira imagem será considerada o elemento LCP. O elemento da LCP só é atualizado quando o candidato à LCP é maior que o elemento da LCP atual. Assim, se todos os elementos do carrossel tiverem o mesmo tamanho, a LCP precisará ser a primeira imagem exibida.
• Ao avaliar candidatos a LCP, a LCP considera o "tamanho visível ou o tamanho intrínseco, o que for menor". Assim, se um carrossel de reprodução automática mostrar imagens em um tamanho consistente, mas tiver imagens de tamanhos intrínsecos variados que são menores que o tamanho da tela, o elemento da LCP poderá mudar à medida que novos slides forem mostrados. 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 a LCP baixa, 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 de 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 possíveis maiores exibições de conteúdo. Antes do Chrome 88, essas imagens eram excluídas da consideração. Para sites que usam carrosséis de reprodução automática, essa mudança de definição 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, cada vez que um novo slide era apresentado, a remoção do elemento anterior acionava uma atualização da LCP. Essa mudança afeta apenas a reprodução automática de carrosséis por definição. As maiores exibições de conteúdo só podem ocorrer antes que o usuário interaja com a página pela primeira vez.

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 janela de visualização. Isso significa que o carregamento da imagem tem menos probabilidade de ser perceptível para o usuário, mas à custa de mais downloads. Use a demonstração do 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 de produto que você precisa ter em mente ao implementar carrosséis. Os carrosséis devem promover 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

Oferecer controles de navegação em destaque

Os controles de navegação de 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 contra um fundo escuro pode ser difícil de ver em um fundo claro.

Indicar progresso da navegação

Os controles de navegação de carrossel precisam 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 até um slide específico e a compreensão de qual conteúdo já foi visualizado. Em algumas situações, mostrar uma prévia do próximo conteúdo, como um trecho do próximo slide ou uma lista de miniaturas, também pode ser útil e aumentar o engajamento.

Suporte a gestos em dispositivos móveis

Em dispositivos móveis, além dos controles de navegação tradicionais, como botões na tela, é preciso oferecer suporte a gestos de deslizar.

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 ao qual os slides do carrossel estão vinculados precisa ser acessível de 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 afastar os olhos de conteúdos mais importantes. Além disso, como os usuários geralmente associam animações a anúncios, eles ignoram os carrosséis de reprodução automática.

Portanto, é raro que a reprodução automática seja uma boa escolha. Se o conteúdo for importante, não usar a reprodução automática maximizará sua exposição. Se o conteúdo do carrossel não for importante, o uso da reprodução automática prejudicará o conteúdo mais importante. Além disso, a reprodução automática de carrosséis pode ser difícil de ler (e irritante também). As pessoas leem em velocidades diferentes, então é raro que um carrossel faça transições consistentes no momento "certo" para diferentes usuários.

Idealmente, a navegação dos slides deve ser direcionada ao usuário utilizando controles de navegação. Se você precisar usar a reprodução automática, ela deverá ser desativada quando o usuário passar o cursor sobre ele. Além disso, a taxa de transição de slides precisa considerar o conteúdo do slide: quanto mais texto um slide contiver, mais tempo ele deverá ser exibido na tela.

Mantenha textos e imagens separados

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

Ser breve

Você tem apenas uma fração de segundo para chamar a atenção de um usuário. Com textos breves e diretos, aumentam as chances de a mensagem ser transmitida.

Práticas recomendadas do produto

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

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

• Os carrosséis, especialmente se contiverem promoções ou avançar automaticamente, são facilmente confundidos com anúncios dos usuários. Os usuários tendem a ignorar os anúncios, um fenômeno conhecido como cegueira de banners.
• Os carrosséis são frequentemente usados para acalmar vários departamentos e evitar tomar decisões sobre as prioridades dos negócios. Como resultado, os carrosséis podem facilmente se transformar em um lixo de conteúdo ineficaz.

Teste suas suposições.

O impacto comercial dos carrosséis, especialmente aqueles em páginas iniciais, precisa ser avaliado e testado. As taxas de cliques do carrossel podem ajudar a determinar se um carrossel e o conteúdo dele são eficazes.

Seja relevante

Os carrosséis funcionam melhor quando têm conteúdo interessante e relevante apresentado com um contexto claro. Se o conteúdo não envolver o usuário fora de um carrossel, colocá-lo em um carrossel não fará com que ele tenha um desempenho melhor. Se você precisa usar um carrossel, priorize o conteúdo e verifique se cada slide é suficientemente relevante para que um usuário clique no próximo slide.