O custo oculto de CLS do seu widget de classificação por estrelas

O que é CLS e por que a classificação por estrelas o causa?

Cumulative Layout Shift mede o quanto o conteúdo visível de uma página se desloca enquanto ela termina de carregar. Sempre que um elemento já visível muda de posição sem que o utilizador o tenha pedido, esse movimento recebe uma pontuação, e as pontuações acumulam-se. Um CLS elevado é aquela página que faz perder o fio do texto ou tocar no sítio errado porque um botão escapou do dedo.

A classificação por estrelas é um infrator clássico. A maioria das aplicações de avaliação carrega a nota por meio de um script que corre após o HTML inicial chegar. Por um instante, a página não tem classificação, o título e o preço ficam mais acima, e então o widget chega e empurra tudo abaixo dele para baixo. Esse empurrão é o deslocamento.

Quanto um widget de avaliações desloca o layout?

Mais do que parece. Uma linha de estrelas parece pequena, mas raramente chega sozinha. A mesma injeção costuma trazer um número de nota, uma contagem de avaliações, uma ligação para "X avaliações" e, às vezes, uma barra de resumo, todos aparecendo de uma vez num bloco que antes tinha zero píxeis de altura.

Pior: esse bloco normalmente aparece perto do topo da página de produto, acima do fold, que é o lugar mais dispendioso para um deslocamento acontecer. Um movimento no final da página, onde ninguém ainda fez scroll, mal é registado. Um movimento no topo, enquanto o cliente está a ler o título e a alcançar o botão de comprar, é o que incomoda as pessoas e recebe mais peso na pontuação.

Por que razão o CLS importa além da experiência visual?

Porque é uma das Core Web Vitals, e as Core Web Vitals influenciam o posicionamento. O Google foi explícito ao afirmar que a experiência de página, CLS incluído, é um fator real, ainda que modesto, na ordenação dos resultados. Não é o diferencial principal que conteúdo e ligações representam, mas é um critério de desempate que não se quer perder num termo de produto competitivo.

O custo para o utilizador é a parte mais fácil de subestimar. Uma página que se remonta visivelmente parece barata e ligeiramente quebrada, e essa impressão chega exatamente nos segundos em que o cliente está a decidir se confia os dados de pagamento.

• Posicionamento: o CLS faz parte do sinal de experiência de página que o Google utiliza.
• Conversão: um layout que salta no momento da decisão de compra corrói a confiança.
• Cliques errados: um layout em movimento faz o cliente tocar no controlo errado.
• Velocidade percebida: uma página estável parece mais rápida do que uma agitada, mesmo com o mesmo tempo de carregamento.

Como evitar que a classificação por estrelas desloque o layout?

Existem duas correções concretas, em níveis de esforço diferentes.

A primeira é reservar o espaço. Se o bloco de classificação vai ter, por exemplo, 28 píxeis de altura, dê ao contentor essa altura desde o início com CSS, antes que o widget chegue, para que as estrelas que carregam depois caiam num espaço que já existia. Nada abaixo se move porque nada precisou de abrir espaço. É simples e funciona com quase qualquer widget, desde que a altura reservada corresponda ao que realmente carrega.

A segunda é renderizar a classificação no HTML do servidor, para que as estrelas estejam presentes na primeira resposta e nenhum script precise de injetar nada. Esta é a correção mais limpa, porque não há corrida para ganhar: o conteúdo simplesmente está lá. Também é mais difícil de implementar se as suas avaliações vivem inteiramente dentro de um widget de terceiros.

• Reserve altura com CSS min-height ou aspect-ratio no contentor de classificação.
• Evite tipos de letra ou imagens dentro da classificação que carreguem tarde e alterem o tamanho.
• Prefira uma classificação renderizada no servidor quando possível, para que não haja injeção.
• Meça com dados reais de campo, não apenas um único teste de laboratório, pois o CLS varia por dispositivo e rede.

Um widget em iframe é melhor ou pior para o CLS?

Um iframe pode conter melhor o deslocamento, porque as suas dimensões são frequentemente fixadas ao nível do elemento pai, o que significa que a caixa não cresce quando o conteúdo chega. Mas essa mesma caixa fixa costuma ser opaca para rastreadores e para motores de resposta, pelo que o texto das avaliações dentro dela tende a não ser lido como parte da página.

Existe uma troca a nomear com clareza. O iframe protege o layout enquanto esconde o conteúdo dos sistemas que leem páginas. Uma classificação renderizada no servidor protege o layout e mantém o texto legível. Se for necessário escolher, a via renderizada no servidor vence nos dois critérios, mas exige mais da configuração.

Corrigir o CLS ajuda as minhas avaliações a aparecerem nas pesquisas?

De forma indireta, e só até certo ponto. Reservar espaço elimina o deslocamento, o que é uma vitória real para a experiência e pequena para o posicionamento, mas reservar uma caixa vazia não torna as palavras dentro das avaliações legíveis para um rastreador ou um motor de resposta. Um espaço reservado que é preenchido por um script ainda esconde o texto das avaliações de qualquer sistema que não execute esse script.

A versão que ajuda em todas as frentes é aquela em que a classificação e as avaliações estão no HTML do servidor: sem deslocamento, e com o texto disponível para pesquisas e IA lerem. A maioria das aplicações de avaliação foi criada para o cliente que está na página e para por aí, no widget, que é a lacuna que o BeyondReviews foi criado para fechar: tornar as avaliações já existentes em conteúdo renderizado, legível e citável, em vez de preso numa caixa que gera CLS e não comunica nada ao rastreador.

O que isto representa na prática

Uma classificação por estrelas que surge após o carregamento é um detalhe visual pequeno com um custo desproporcional: desloca o layout no lugar mais dispendioso da página, empurra uma Core Web Vital na direção errada e corrói a confiança no momento da compra. Reservar o espaço exato elimina o deslocamento de forma simples. Renderizar a classificação no servidor elimina-o de forma adequada e mantém o texto das avaliações legível ao mesmo tempo. Escolha a segunda opção quando possível, e a primeira em todo o lugar onde não for.

Perguntas frequentes