Esta página foi traduzida pela API Cloud Translation.

Práticas recomendadas para carrosséis

Otimize o desempenho e a usabilidade dos carrosséis.

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 "reprodução automática" ou ser navegado manualmente pelos usuários. Embora os carrosséis possam ser usados em outros lugares, eles são mais frequentemente usados para exibir imagens, produtos e promoções em 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 no desempenho. No entanto, os carrosséis geralmente contêm grandes recursos de mídia. Recursos grandes podem afetar a performance, não importa se são exibidos ou não um carrossel ou outro lugar.

LCP (Maior exibição de conteúdo)

Carrosséis grandes acima da dobra geralmente contêm o elemento LCP da página e portanto, pode ter um impacto significativo na LCP. Nesses cenários, otimizar o carrossel pode melhorar significativamente a LCP. Para uma análise aprofundada de como a medição de LCP funciona em páginas que contêm carrosséis, consulte a medição de LCP para carrosséis nesta seção.
INP (Interação com a próxima exibição)

Os carrosséis têm requisitos mínimos de JavaScript e, portanto, não podem 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) (link em inglês)

Um número surpreendente de carrosséis usa animações instáveis e não compostas que podem contribuir com a CLS. Em páginas com carrosséis de reprodução automática, ele tem a potencial de causar CLS infinito. Esse tipo de CLS normalmente não é aparente para o olho humano, o que torna o problema fácil de ignorar. Para evitar isso, 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 conteúdo do carrossel usando HTML

O conteúdo do carrossel deve ser carregado por meio da marcação HTML da página detectáveis pelo navegador no início do processo de carregamento da página. Usar o JavaScript para iniciar o carregamento do conteúdo do carrossel é provavelmente o maior de desempenho para evitar ao usar carrosséis. Isso atrasa o carregamento da imagem e podem afetar negativamente a LCP.

O que fazer

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

O que não fazer

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, considere carregar estaticamente o primeiro slide, e aprimorá-lo progressivamente para incluir controles de navegação e outros conteúdo. Essa técnica é mais aplicável a ambientes em que você tem atenção prolongada do usuário. Isso dá tempo para o conteúdo adicional ser carregado. Em ambientes como páginas iniciais, onde os usuários podem ficar apenas por um segundo ou Além disso, carregar uma única imagem pode ter a mesma eficácia.

Evitar trocas de layout

Transições de slides e 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 são geralmente causado pela atualização das propriedades que induzem o layout dos elementos DOM. Exemplos de algumas dessas propriedades incluem: left, top, width e marginTop. Para evitar mudanças de layout, use o CSS transform para fazer a transição desses elementos. Isso demonstração mostra como usar transform para e criar um carrossel básico.
Controles de navegação:mover ou adicionar/remover a navegação do carrossel controles do DOM podem causar mudanças de layout dependendo de como essas mudanças sejam implementadas. Carrosséis que exibem esse comportamento normalmente o fazem em quando o usuário passa o cursor sobre ele.

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

Carrosséis automaticamente:as transições de slides são a fonte mais comum de mudanças de layout relacionadas ao carrossel. Em um carrossel sem reprodução automática, essas mudanças de layout normalmente ocorrem nos 500 ms de uma interação do usuário e, portanto, não são contabilizados em direção à Cumulative Layout Shift (CLS) (link em inglês). No entanto, para carrosséis de reprodução automática, não só essas mudanças de layout podem contar em direção à CLS, mas elas também podem se repetir indefinidamente. Assim, é particularmente importante verificar se um carrossel de reprodução automática não é uma fonte de layout muda.
Rolagem:alguns carrosséis permitem que os usuários usem a rolagem para navegar. slides em carrossel. Se a posição inicial de um elemento mudar, mas o deslocamento de rolagem dele (ou seja, scrollLeft ou scrollTop). muda na mesma proporção (mas na direção oposta), isso não é é considerada uma troca de layout, desde que ocorram no mesmo frame.

Para mais informações sobre trocas de layout, consulte Depurar layout muda.

Use tecnologia moderna

Muitos sites usam bibliotecas JavaScript de terceiros para implementar carrosséis. Se você usa ferramentas de carrossel mais antigas, pode a melhorar o desempenho mudando para ferramentas mais recentes. As ferramentas mais novas tendem a usam APIs mais eficientes e têm menos probabilidade de exigir outras dependências como jQuery.

No entanto, dependendo do tipo de carrossel que você está criando, pode não ser necessário JavaScript. A nova função de API Snap possibilita a implementação de transições do tipo carrossel usando apenas HTML e CSS.

Veja alguns recursos úteis sobre o uso de scroll-snap:

Otimize o conteúdo do carrossel

Os carrosséis geralmente contêm algumas das maiores imagens de um site, por isso pode valer a pena para garantir que as imagens estejam totalmente otimizadas. Como escolher o conteúdo certo formato de imagem e nível de compactação, usando uma CDN de imagem e usando srcset para exibir várias imagens versões 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 de LCP relacionada a carrosséis. Embora os carrosséis são tratados da mesma forma que qualquer outro elemento de UX durante a LCP cálculo, a mecânica de calcular o LCP para a reprodução automática de carrosséis é uma um ponto comum de confusão.

Medição de LCP para carrosséis

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

A LCP considera os elementos da página conforme eles são pintados no frame. Novos candidatos para o elemento da LCP não são mais considerados quando o usuário interage (toques na tela, rolagens ou pressionamentos de tecla) com a página. Assim, qualquer slide em uma reprodução automática carrossel tem o potencial de ser o elemento final da LCP, enquanto que, em um carrossel, apenas o primeiro slide seria um possível candidato à LCP.
Se duas imagens do mesmo tamanho forem renderizadas, a primeira será considerada elemento da LCP. O elemento da LCP só é atualizado quando o candidato à LCP é maior do que o elemento LCP atual. Assim, se todos os elementos do carrossel estiverem do mesmo tamanho, o elemento da LCP precisa ser a primeira imagem exibida.
Ao avaliar candidatos à LCP, a LCP considera o "tamanho visível ou o tamanho intrínseco, o que for menor". Assim, se uma reprodução automática o carrossel exibe imagens em um tamanho consistente, mas contém imagens de variáveis intrínsecas tamanhos menores que o tamanho da tela, o elemento da LCP poderá mudar conforme slides são exibidos. Nesse caso, se todas as imagens forem exibidas no mesmo a imagem com o maior tamanho intrínseco será considerada a LCP . Para manter a LCP baixa, verifique se todos os itens em uma reprodução automática carrossel têm o mesmo tamanho intrínseco.

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

A partir do Google Chrome 88, imagens removidas posteriormente do DOM são consideradas as maiores tintas satisfatórias. Antes do Chrome 88, essas imagens eram excluídas da consideração. Para sites que usam carrosséis com reprodução automática, essa definição muda impacto neutro ou positivo nas pontuações de LCP.

Essa alteração foi feita em resposta à observação que muitos sites implementam transições de carrossel removendo a exibida da árvore do DOM. Antes do Chrome 88, sempre que uma nova slide foi apresentado, a remoção do elemento anterior acionaria uma LCP atualizar. Essa alteração só afeta os carrosséis com reprodução automática por definição, maiores Contentful Paints só podem ocorrer antes de um usuário interagir pela primeira vez com o 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 de carrossel, as imagens serão carregadas antes de serem visíveis na janela de visualização. Isso significa que o carregamento da imagem tem menos probabilidade de ser perceptível ao usuário, mas ao custo de mais downloads. Use a demonstração do carregamento lento horizontal para comparar o comportamento no Chrome, no Safari e no Firefox.

Outras considerações

Esta seção discute UX e práticas recomendadas de produto que você deve ter em mente ao implementar os carrosséis. Os carrosséis devem aprimorar suas metas de negócios e apresente 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 do carrossel precisam ser fáceis de clicar e altamente visíveis. Isso é algo que raramente é feito. A maioria dos carrosséis tem controles de navegação que são pequenas e sutis. Tenha em mente que uma única cor ou estilo o controle de navegação raramente funcionará em todas as situações. Por exemplo, uma seta claramente visível em um fundo escuro pode ser difícil de enxergar 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 por eles. Essas informações facilitam para o usuário navegar até um slide específico e entender qual conteúdo já foi visualizado. Em algumas situações, fornecer uma prévia dos próximos conteúdo, seja 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 gestos de deslizar tradicionais, controles de navegação (como botões na tela).

Fornecer caminhos de navegação alternativos

Como é improvável que a maioria dos usuários se envolva com todo o conteúdo do carrossel, a o conteúdo ao qual os slides do carrossel vinculam deve ser acessível a partir de outros elementos de navegação caminhos de rede.

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: a reprodução as animações costumam distrair os usuários e afastar os olhos de content; simultaneamente, como os usuários costumam associar animações a anúncios, eles ignorará os carrosséis reproduzidos automaticamente.

Dessa forma, é raro que a reprodução automática seja uma boa escolha. Se o conteúdo for importante, o uso da reprodução automática maximiza a exposição. se o conteúdo do carrossel não é importante, a reprodução automática desviará o conteúdo do conteúdo mais importante. Além disso, a reprodução automática de carrosséis pode ser difícil de ler (e também irritante). As pessoas leem em velocidades diferentes, então é raro que um carrossel faça transições a posição "certa" em diferentes períodos.

O ideal é que a navegação por slides seja direcionada ao usuário por meio de controles de navegação. Se use a reprodução automática, que deve ser desativada quando o usuário passa o cursor. Além disso, a taxa de transição de slides deve levar em conta o conteúdo do slide - quanto mais texto que um slide contiver, mais tempo deverá ser exibido na tela.

Manter texto e imagens separados

O conteúdo de texto do carrossel geralmente é incorporado o arquivo de imagem correspondente, em vez exibidos separadamente com a marcação HTML. Essa abordagem é ruim acessibilidade, localização e compactação. Isso também incentiva abordagem única para a criação de recursos. No entanto, a mesma imagem e o mesmo texto a formatação raramente é igualmente legível em formatos para desktop e celular.

ser conciso,

Você tem apenas uma fração de segundo para chamar a atenção do usuário. Curto, uma cópia direta aumentará a probabilidade de sua mensagem ser transmitida.

Práticas recomendadas de produtos

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

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

Carrosséis, principalmente se tiverem promoções ou avançarem automaticamente são facilmente confundidos para publicidade dos usuários. Os usuários tendem a ignorar os anúncios, um fenômeno conhecido como banner cegueira.
Os carrosséis são frequentemente usados para agradar vários departamentos e evitar fazer decisões empresariais sobre prioridades de negócios. Como resultado, os carrosséis podem facilmente virar em um depósito de conteúdo ineficaz.

Teste suas suposições.

O impacto comercial dos carrosséis, especialmente aqueles nas páginas iniciais, deve ser serão avaliadas e testadas. As taxas de cliques de carrossel ajudam a determinar se um carrossel e seu conteúdo é eficaz.

Seja relevante

Os carrosséis funcionam melhor quando contêm conteúdo interessante e relevante que é apresentadas com um contexto claro. Se o conteúdo não envolver um usuário fora de um carrossel: colocá-lo em um carrossel não fará com que ele tenha um melhor desempenho. Se você precisar use um carrossel, priorize o conteúdo e garanta que cada slide seja suficiente relevantes que um usuário iria querer clicar para acessar o próximo slide.