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

O que é Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) represents the 'visual stability' part of the Core Web Vitals . The Cumulative Layout Shift (CLS) measures the movements of the page as content renders or new content is shown on the page. It calculates a score based on how much of the page is unexpectedly moving about and how far it moves. These shifts of content are very annoying, making you lose your place in an article you’ve started reading or, worse still, making you click on the wrong button!

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 por que é importante:

• UX, engagement e perceção da marca:  Mudanças de layout inesperadas perturbam o fluxo do utilizador, dificultando encontrar informações, clicar em botões e interagir com a página conforme pretendido. Esta frustração pode levar a experiências negativas em que os utilizadores abandonam o site completamente.
  A user experience de um site reflete-se na marca por trás dele. Mudanças de layout frequentes podem dar a impressão de um site mal desenhado ou mantido, perturbam 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 perturbadoras 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 site de forma eficaz.
  
• SEO e Classificação nos Motores de Busca: Os Core Web Vitals são um fator de classificação pequeno mas significativo no Google. O Google, juntamente com outros motores de busca, prioriza sites que oferecem uma boa user experience. O CLS é uma das métricas Core Web Vitals que o Google considera ao classificar sites. Otimizar para CLS pode dar ao seu site 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. A seguir apresenta-se um uso 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 que se deslocou. A fração de distância mede a que distância o conteúdo se deslocou. Se, por exemplo, 50% da página (quanto) se deslocou 25% (a que distância) do viewport da página. A pontuação de 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 se deslocasse.

É por isso que apenas mudanças de layout inesperadas contribuem 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:
As mudanças de layout que ocorrem dentro de 500 milissegundos após input 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 pontuação de CLS fraca. 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 será a pontuação final de CLS.
Se, por exemplo, durante os primeiros 5 segundos a pontuação de CLS é 0,095, depois nas sessões seguintes de 5 segundos o CLS é 0,15 e para a última sessão a pontuação de CLS é 0. A pontuação final de CLS será a mais alta das três: 0,15.

Uma nota rápida: CLS e os 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 dos 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 é usar o Lighthouse no seu próprio browser Chrome. Basta executar uma auditoria Lighthouse clicando com o botão direito em qualquer lugar da página. Depois selecione inspecionar elemento, selecione a aba 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 muito 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

The CLS Visualizer é uma extensão Chrome escrita por mim. Com um simples 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 dá uma excelente visão geral visual do Cumulative Layout Shift.

3. Usar a aba Performance do Chrome para encontrar CLS

De longe, a melhor forma de depurar uma mudança de layout é através da aba Performance do Chrome. Para abrir a aba Performance, navegue até qualquer página no Chrome e use esta combinação de atalhos:
- Press Ctrl-Shift-I (Open Dev Tools)
- Press Ctrl-Shift-E (Start profiling and reload page)

Agora inspecione a linha do tempo quadro a quadro passando o rato sobre a linha do tempo no topo e procure mudanças de layout (as mudanças de layout também são coloridas a vermelho na secção Experience da aba 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 os Core Web Vitals. Ferramentas RUM como Core/Dash podem decompor os Cumulative Layout Shifts em segmentos como browser, elemento, tipo de navegação, URL específico ou tipo de página. Isto ajudará a identificar e corrigir páginas com fraco 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 foi 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 até definindo a aspect-ratio como propriedade de estilo.

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 é geralmente renderizada com uma fonte fallback. O tamanho desta fonte fallback pode diferir da fonte final. Neste exemplo, a fonte fallback é ligeiramente mais pequena do que a webfont final.

Existem muitos métodos para 'corrigir' a mudança de layout causada por web fonts. Baseiam-se em 2 técnicas:

1. Fazer a fonte fallback corresponder mais à webfont. A forma mais eficaz é sobrepondo os @font-face descriptors

A segunda forma é acelerar as web-fonts. Isto torna-as disponíveis para o browser antes de 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

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

Garantir que as Interações do Utilizador são Concluídas Dentro de 500ms

Problemas de CLS causados por AJAX

AJAX permite que as 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 será 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 acaba por ocupar 40 ou 60& do ecrã, o CLS (50% - 40% = 10% fração de distância) é ainda muito menor do 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 frequentemente carregam (muito) mais tarde na página. Isto torna os Cumulative Layout Shifts causados por anúncios especialmente irritantes. Quando vários anúncios estão a carregar no viewport visível, a 'página simplesmente não para quieta'. 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>