CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) é uma métrica Core Web Vital que mede a estabilidade visual de uma página durante o carregamento. Em vez de medir velocidade ou capacidade de resposta, o CLS foca em se o conteúdo visível se move inesperadamente durante e após o processo de carregamento. Toda vez que um elemento muda de posição sem interação do usuário, o navegador registra a distância e o tamanho do deslocamento. Essas pontuações individuais são agrupadas em janelas de sessão, e a maior janela de sessão se torna a pontuação CLS da página. Uma pontuação de 0,1 ou menos é considerada boa, de 0,1 a 0,25 precisa de melhoria, e acima de 0,25 é ruim.

Mudanças inesperadas no layout degradam diretamente a experiência do usuário. Um leitor prestes a tocar um botão pode acidentalmente clicar no elemento errado quando o conteúdo pula. Um visualizador percorrendo um documento pode perder completamente seu lugar. Essas frustrações aumentam as [taxas de rejeição](/glossary/bounce-rate) e reduzem o tempo na página. O Google usa o CLS como um dos três [Core Web Vitals](/glossary/core-web-vitals) em seu algoritmo de classificação, então páginas com baixa estabilidade visual enfrentam penalidades tanto de engajamento quanto de SEO. Para editores digitais que incorporam conteúdo interativo como flipbooks, controlar o CLS é especialmente importante porque embeds de terceiros são uma das fontes mais comuns de mudanças de layout.

O visualizador do FlipLink é projetado para minimizar o CLS reservando dimensões fixas para o contêiner do [flipbook](/glossary/flipbook) antes que o conteúdo da página seja totalmente carregado. Imagens e elementos interativos são renderizados dentro de espaços pré-alocados para que o layout não mude conforme os ativos chegam. O renderizador de flipbook [Three.js](/glossary/three-js) e o visualizador de documentos [PDF.js](/glossary/pdf-js) ambos inicializam com um quadro estável, prevenindo que a animação de virada de página cause saltos no layout. O código de [incorporação responsiva](/features/sharing-and-distribution) que o FlipLink gera usa contêineres de proporção de aspecto que reivindicam imediatamente o espaço correto na página hospedeira. Este design beneficia tanto o visualizador incorporado em seu site quanto a publicação hospedada em go.fliplink.me.

O CLS é medido usando dois componentes para cada deslocamento: **impact fraction** (a porcentagem do [viewport](/glossary/viewport) afetada) e **distance fraction** (quanto o elemento se moveu em relação ao viewport). A pontuação de layout shift para um único quadro é igual a impact fraction multiplicada por distance fraction. Deslocamentos que acontecem dentro de 500 milissegundos após uma entrada do usuário (como um clique ou toque) são excluídos porque o usuário espera movimento em resposta à sua ação. Chrome DevTools, Lighthouse, PageSpeed Insights e a biblioteca JavaScript Web Vitals todos reportam CLS. Dados de campo do Chrome User Experience Report (CrUX) fornecem pontuações CLS reais coletadas de visitantes reais.

O CLS usa uma abordagem de **janela de sessão** para calcular a pontuação final. Uma janela de sessão é um grupo de layout shifts que ocorrem dentro de um segundo um do outro, com uma duração máxima de janela de cinco segundos. A pontuação CLS da página é a maior janela de sessão individual, não a soma de todos os deslocamentos. Este método foi atualizado em 2021 para refletir melhor páginas de longa duração e aplicações de página única onde o conteúdo carrega progressivamente. Causas comuns de CLS alto incluem imagens sem atributos de largura e altura, anúncios ou banners injetados dinamicamente, fontes web que provocam um flash de texto sem estilo (FOUT) e embeds de terceiros que carregam de forma assíncrona sem espaço reservado.

**"CLS só importa durante o carregamento inicial da página."** O CLS rastreia deslocamentos durante todo o ciclo de vida da página, incluindo aqueles provocados por imagens com carregamento preguiçoso, conteúdo de rolagem infinita ou elementos inseridos dinamicamente. Aplicações de página única que trocam conteúdo durante a navegação podem acumular CLS se as transições não forem tratadas com cuidado. **"O objetivo é uma pontuação CLS de 0."** Embora zero seja ideal, uma pontuação de 0,1 ou menos é considerada boa. Perseguir o zero absoluto pode levar à superengenharia. O alvo prático é manter os deslocamentos imperceptíveis para os usuários. **"CLS mede a velocidade de carregamento de uma página."** CLS não tem nada a ver com velocidade. Uma página pode carregar em menos de um segundo e ainda ter um CLS terrível se os elementos pularem durante a renderização. A velocidade é medida pelo [LCP](/glossary/lcp) e outras métricas de tempo, não pelo CLS.