O que é Cumulative Layout Shift (CLS) e como corrigi-lo

O que é Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) representa a parte de 'estabilidade visual' das Core Web Vitals. O Cumulative Layout Shift (CLS) mede os movimentos da página à medida que o conteúdo é renderizado ou novo conteúdo é mostrado na página. Calcula uma pontuação com base em quanto da página se move inesperadamente e quão longe se move. Estas mudanças de conteúdo são muito irritantes, fazendo-o perder o seu lugar num artigo que começou a ler ou, pior ainda, fazendo-o clicar no botão errado!

Importância do CLS no desempenho web e user experience

Cumulative Layout Shift (CLS) está ligado tanto ao desempenho web como à user experience porque impacta diretamente quão estável e previsível uma página web parece durante o carregamento. Eis porque é importante:

• UX, engagement e perceção da marca:  Mudanças de layout inesperadas interrompem o fluxo do utilizador, tornando mais difícil encontrar informação, clicar em botões e interagir com a página como pretendido. Esta frustração pode levar a experiências negativas onde os utilizadores abandonam o website completamente.
  A user experience de um website reflete a marca por trás dele. Mudanças de layout frequentes podem dar a impressão de um website mal desenhado ou mantido, interromper o engagement do utilizador, levando a menor interação e potencialmente taxas de rejeição mais altas.
  
• Acessibilidade: As mudanças de layout podem ser particularmente disruptivas para utilizadores com deficiências que dependem de tecnologias assistivas ou leitores de ecrã. Um layout estável garante que todos possam navegar e interagir com o website de forma eficaz.
  
• SEO e Posicionamento nos Motores de Busca: As Core Web Vitals são um fator de posicionamento pequeno mas significativo no Google. O Google, juntamente com outros motores de busca, prioriza websites que oferecem uma boa user experience. O CLS é uma das métricas Core Web Vitals que o Google considera ao posicionar websites. Otimizar para CLS pode dar ao seu website uma vantagem competitiva nos resultados de pesquisa.
  

Como é medido o CLS?

O CLS de uma página pode ser medido com a Layout Instability API. O seguinte é uma utilização simples desta API

Calcular o CLS

O CLS é facilmente calculado usando uma fórmula simples, mas elegante:

CLS = sum(impact-fraction * distance-fraction)

A fração de impacto mede quanto do conteúdo visível da página mudou de posição. A fração de distância mede quão longe o conteúdo se moveu. Se, por exemplo, 50% da página (quanto) mudou 25% (quão longe) do viewport da página. A pontuação CLS = 0,50 * 0,25 = 0,125

Mudanças de layout esperadas VS inesperadas

Nem todas as mudanças de layout são más, apenas as que não se esperam. Quando clica num link 'carregar mais itens', por exemplo, esperaria que mais itens aparecessem na página e que o conteúdo da página mudasse.

É por isso que apenas mudanças de layout inesperadas causarão uma contribuição para o CLS. Por exemplo, se um utilizador clica num botão e em resposta novo conteúdo é adicionado à página (por exemplo, um menu dropdown), a mudança de layout será excluída do CLS. Para ser preciso:
Mudanças de layout que ocorram dentro de 500 milissegundos após interação do utilizador serão excluídas dos cálculos

Sessões de mudança de layout

Quando o CLS foi introduzido pela primeira vez, alguns sites foram injustamente penalizados com uma má pontuação de CLS. Por exemplo, uma página que implementa scroll infinito teria o impacto do conteúdo recém-adicionado somado à pontuação total de CLS para cada novo scroll. É por isso que o CLS é agora calculado em sessões. Cada sessão tem uma duração de 5 segundos. A sessão com a maior pontuação de CLS tornar-se-á a pontuação final de CLS.
Se, por exemplo, durante os primeiros 5 segundos a pontuação de CLS for 0,095, depois na sessão de 5 segundos seguinte o CLS for 0,15 e na última sessão a pontuação de CLS for 0. A pontuação final de CLS será a mais alta das três: 0,15.

Um lembrete rápido: CLS e as Core Web Vitals!

Cumulative Layout Shift (CLS) é uma métrica importante, centrada no utilizador, para medir a estabilidade visual. O Cumulative Layout Shift (CLS) faz parte das Core Web Vitals juntamente com o First Contentful Paint, o Largest Contentful Paint e o First Input Delay.

Como medir problemas de CLS

1. Usar o Lighthouse para encontrar Cumulative Layout Shifts

O método mais fácil para encontrar mudanças de layout é usando o Lighthouse no seu próprio navegador Chrome. Basta executar uma auditoria do Lighthouse clicando com o botão direito em qualquer lugar da página. Depois selecione inspecionar elemento, selecione o separador Lighthouse na consola agora aberta e execute a auditoria

Os resultados da auditoria mostrarão a pontuação de Cumulative Layout Shift (CLS). Deslize para baixo até Diagnósticos e expanda a informação de Cumulative Layout Shift para ver quais nós estão a causar a mudança de layout.

Para ser honesto, nunca uso realmente este método. A falta de detalhes sobre a distância exata da mudança de layout torna estes resultados mais difíceis de interpretar

2. Usar o CLS Visualizer para encontrar Cumulative Layout Shifts

O CLS Visualizer é uma extensão Chrome escrita por mim. Com um único clique de botão, todas as mudanças de layout na página são visualizadas. Esta é a primeira solução a que recorro quando tento determinar uma mudança de layout numa página. É fácil e dará uma excelente visão geral visual do Cumulative Layout Shift.

3. Usar o separador Performance do Chrome para encontrar CLS

De longe, a melhor forma de depurar uma mudança de layout é através do separador Performance do Chrome. Para abrir o separador Performance, navegue até qualquer página no Chrome e use esta combinação de atalhos:
- Pressione Ctrl-Shift-I (Abrir Dev Tools)
- Pressione Ctrl-Shift-E (Iniciar profiling e recarregar página)

Agora inspecione a timeline frame a frame passando o rato sobre a timeline no topo e procure mudanças de layout (as mudanças de layout também estão coloridas a vermelho na secção Experience do separador Performance). 

4. Usar ferramentas RUM como Core/Dash

RUM significa Real User Monitoring e os dados RUM podem fornecer informações valiosas em tempo real sobre as Core Web Vitals. Ferramentas RUM como o Core/Dash podem decompor os Cumulative Layout Shifts em segmentos como navegador, elemento, tipo de navegação, URL específico ou tipo de página. Isto ajudará a identificar e corrigir páginas com mau desempenho e elementos problemáticos

Causas comuns de Cumulative Layout Shift e como corrigi-las

A origem de todas as mudanças de layout é basicamente a mesma. Em algum momento, um elemento que estava colocado acima de outro elemento ocupou mais ou menos espaço do que antes. Isto deve-se tipicamente a uma ou mais destas causas:

• Imagens, iFrames ou vídeos
• Anúncios
• Conteúdo injetado
• Animações
• Interações lentas
• Web fonts

CLS causado por imagens, vídeos e iFrames

Mudanças de layout causadas por imagens, vídeos ou iFrames são sempre causadas por dimensões em falta. Mais comummente, isto acontece porque a altura e largura do elemento não estão definidas no HTML. Um padrão comum e de boa prática é definir a largura intrínseca da imagem no HTML e usar estilos para escalar automaticamente e conter a imagem no seu contentor pai.

<img src="img.jpg" >
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Note que as dimensões também podem ser definidas como uma propriedade de estilo ou mesmo definindo a propriedade de estilo aspect-ratio .

CLS causado por webfonts

Uma mudança de layout cumulativa pode ser causada por webfonts. WebFonts são fontes que não estão instaladas no seu computador local ou telemóvel, mas são descarregadas da internet. Enquanto a web font ainda não foi descarregada, a página é normalmente renderizada com uma fonte de fallback. O tamanho desta fonte de fallback pode diferir da fonte final. Neste exemplo, a fonte de fallback é ligeiramente menor que a webfont final.

Existem muitos métodos para 'corrigir' a mudança de layout causada por web fonts. São baseados em 2 técnicas:

1. Fazer a fonte de fallback corresponder mais de perto à webfont. A forma mais eficaz é sobrescrevendo os descritores @font-face

A segunda forma é acelerar as web fonts. Isto vai torná-las disponíveis para o navegador antes de este começar a renderizar. Uma forma comum de o fazer é pré-carregar as suas web fonts críticas, 

Problemas de CLS causados por interações lentas do utilizador

No exemplo abaixo, o botão carregar mais claramente desencadeia uma mudança de layout. No entanto, a mudança de layout não será adicionada às métricas de CLS. Isto porque esta mudança de layout é intencional

Um navegador saberá isto porque os elementos agora visíveis têm um atributo chamado 'hadRecentInput'. Quando este está definido como true E a mudança de layout acontece dentro de 500 ms do evento de interação (o clique no botão), a mudança de layout não será reportada pelo navegador.

Garanta que as Interações do Utilizador se Completam Dentro de 500ms

Problemas de CLS causados por AJAX

AJAX permite que páginas web sejam atualizadas de forma assíncrona, trocando dados com um servidor web nos bastidores. Obviamente, injetar novo conteúdo em qualquer página web pode levar a uma mudança de layout massiva. É por isso que é sensato reservar o espaço que é usado para o novo conteúdo. Obviamente não sabe a altura do novo conteúdo antecipadamente, mas o que pode fazer é uma estimativa informada.

Por exemplo, se o conteúdo AJAX médio ocupa 50% do ecrã, é sensato reservar esses 50%. Quando o novo conteúdo acabar por ocupar 40 ou 60% do ecrã, o CLS (50% - 40% = 10% fração de distância) ainda é muito menor que 50% de fração de distância.

Aqui está um exemplo de como fazer isto:

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Corrigir problemas de CLS causados por anúncios

Os anúncios carregam frequentemente (muito) mais tarde na página. Isto torna os Cumulative Layout Shifts causados por anúncios especialmente irritantes. Quando múltiplos anúncios estão a carregar no viewport visível, a 'página simplesmente não fica parada'. Para corrigir isto, reserve também o espaço para os anúncios, especialmente os anúncios no viewport visível.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>