O CLS e o INP são Core Web Vitals que medem aspetos da experiência do utilizador diferentes da velocidade.
O CLS mede a estabilidade visual. Há uma mudança de layout quando o conteúdo se mexe depois de carregar. O utilizador lê um artigo. Carrega um anúncio. O artigo desce. O utilizador perde o sítio. O CLS quantifica o incómodo.
O INP mede a capacidade de resposta. O utilizador clica num botão. O sistema responde. Quanto tempo demora a resposta? O INP quantifica o atraso na resposta.
Cumulative Layout Shift (CLS) em detalhe
O que causa o CLS
Anúncios que carregam e ocupam espaço. Conteúdos incorporados que carregam e ocupam espaço. Imagens que carregam sem altura definida. Tipos de letra que mudam e o texto que se reorganiza. Conteúdo injetado por JavaScript.
Exemplo real
O layout da página é estável. O utilizador começa a ler. Carrega um anúncio. O anúncio tem trezentos píxeis de altura. O conteúdo abaixo do anúncio desce trezentos píxeis. O utilizador perde o sítio. Frustrante.
Medição
O CLS mede-se como percentagem da janela de visualização que se deslocou. Se a janela tiver mil píxeis de altura e o conteúdo se deslocar trezentos píxeis, o CLS é de zero vírgula três. O objetivo é abaixo de zero vírgula um (uma deslocação de dez por cento é aceitável, uma de trinta por cento não é).
Otimizar o CLS
Estratégia um: reservar espaço
Reserva espaço para anúncios, conteúdos incorporados e imagens. Diz ao motor de layout: o anúncio vai ocupar trezentos píxeis. Reserva o espaço. O anúncio carrega para o espaço reservado. Sem deslocação.
Estratégia dois: injetar no fundo
Evita injetar conteúdo no meio da página. Injeta no fundo (o conteúdo abaixo já está fora da janela de visualização). Ou injeta num cabeçalho fixo (o utilizador espera que o cabeçalho mude).
Estratégia três: evitar mudanças de tipo de letra
Evita mudar o tipo de letra a meio do carregamento da página. As mudanças de tipo de letra fazem o texto reorganizar-se. Todo o texto com esse tipo de letra desloca-se. Usa `font-display: optional` ou `font-display: swap` para minimizar a deslocação.
Estratégia quatro: definir a altura das imagens
Usa uma altura fixa nas imagens. A imagem carrega. A altura está definida. A imagem preenche o espaço reservado. Sem deslocação.
Exemplo real: otimização do CLS numa página de produto de loja online
CLS de partida: zero vírgula vinte e cinco (mau).
Análise
As imagens do produto carregam sem altura definida. As imagens deslocam o conteúdo. Contribui com zero vírgula dez de CLS. O anúncio abaixo do produto carrega depois da página. O anúncio ocupa espaço. O conteúdo desloca-se. Contribui com zero vírgula doze de CLS. As avaliações dos utilizadores carregam a partir de uma API. São injetadas na página. O conteúdo desloca-se. Contribui com zero vírgula três de CLS.
Otimização
Definir a altura das imagens no HTML. As imagens preenchem o espaço reservado. Contribuição para o CLS: zero. Reservar espaço para o anúncio. O anúncio carrega para o espaço reservado. Contribuição para o CLS: zero. Carregar com lazy loading as avaliações dos utilizadores abaixo da dobra. Não injetar acima da dobra. Contribuição para o CLS: zero (a deslocação acontece abaixo da janela de visualização).
Novo CLS: zero vírgula zero cinco (bom).
Interaction to Next Paint (INP) em detalhe
O que o INP mede
O INP mede a capacidade de resposta. O utilizador clica num botão. O sistema processa o clique. Atualiza o estado. Desenha a alteração. Mostra-a no ecrã. O INP é o tempo entre o clique e o primeiro desenho da atualização visual.
Exemplo real
O utilizador clica no botão Adicionar ao carrinho. O sistema verifica o stock. Atualiza o contador do carrinho. Mostra a nova contagem no ecrã. Se o INP for de cem milissegundos, o utilizador vê o contador do carrinho atualizar de imediato. Se o INP for de um segundo, o contador atualiza um segundo depois. A página parece lenta a reagir.
Medição
O INP mede-se em milissegundos. Um objetivo abaixo de duzentos milissegundos é bom.
Otimizar o INP
Estratégia um: reduzir o tempo de execução do JavaScript
O JavaScript longo bloqueia o desenho. Divide uma tarefa longa em tarefas mais pequenas. Usa async, defer ou Web Workers para cálculos pesados.
Estratégia dois: otimizar os tratadores de eventos
Os tratadores de eventos devem fazer o mínimo de trabalho. Passa o trabalho pesado para segundo plano.
Estratégia três: otimizar o CSS
Um CSS pesado pode atrasar o desenho. Usa CSS containment para dizer ao navegador: este elemento é autónomo, não recalcules os estilos da página inteira quando ele mudar.
Estratégia quatro: usar uma técnica de desenho mais rápida
As atualizações de CSS são mais rápidas do que as atualizações do DOM por JavaScript. Usa transformações CSS em vez de posicionamento com left/top. Usa a opacidade CSS em vez de mudanças de visibilidade.
Exemplo real: capacidade de resposta na interação com um formulário
INP de partida: quatrocentos milissegundos (mau).
Análise
O formulário tem JavaScript de validação. O utilizador escreve num campo. A validação corre. A validação é síncrona. Bloqueia a atualização do campo. O campo só se atualiza quando a validação termina. A página parece lenta a reagir.
Otimização
Passar a validação para segundo plano (Web Worker ou setTimeout). O campo atualiza-se de imediato. A validação acontece em segundo plano. Usar CSS containment no formulário. Dizer ao navegador: o formulário é autónomo, não recalcules os estilos da página inteira. Usar a transformação CSS para a animação em vez de posicionamento por JavaScript.
Novo INP: cento e cinquenta milissegundos (bom).
CLS e INP em conjunto
O CLS faz a página parecer instável. O INP faz a página parecer lenta a reagir. Juntos afetam a perceção de qualidade do utilizador.
Uma página com bom LCP mas mau CLS (rápida mas aos saltos) é frustrante. O utilizador culpa a lentidão, mesmo sendo um problema de estabilidade.
Uma página com bom LCP e bom CLS mas mau INP (rápida e estável mas lenta a responder) parece avariada. Os botões não respondem aos cliques.
Os três Core Web Vitals contam para uma boa experiência do utilizador.
Perguntas frequentes
Como detetamos problemas de CLS?
Usa as DevTools do Chrome. Clica com o botão direito na página. Inspecionar. Separador Desempenho. Grava o carregamento da página. As DevTools mostram as mudanças de layout durante o carregamento. Consulta também o PageSpeed Insights. O Lighthouse identifica problemas de CLS. Consulta ainda o relatório de Core Web Vitals do Search Console. Mostra as páginas com mau CLS. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Devemos reservar espaço para todos os anúncios ou só para os críticos?
Reserva espaço para os anúncios acima da dobra (os que carregam de imediato). Não reserves espaço para os anúncios abaixo da dobra (os que carregam depois de fazer scroll). Os anúncios abaixo da dobra podem deslocar o conteúdo abaixo da dobra, mas o utilizador não vê a deslocação.
Como otimizamos o INP em aplicações complexas com muito JavaScript?
Passa o cálculo pesado para Web Workers. Um Web Worker corre numa thread separada. Não bloqueia a thread principal. A thread principal continua a responder ao utilizador. Usa também React Suspense ou frameworks semelhantes que adiam o cálculo pesado até a interação estar tratada.
O CLS é mais importante em telemóvel ou em computador?
Mais importante em telemóvel. O ecrã do telemóvel é mais pequeno. As mudanças de layout são mais visíveis. O utilizador de telemóvel tem mais probabilidade de notar a deslocação e ficar frustrado. Dá prioridade à otimização do CLS em telemóvel.
Um bom CLS e um bom INP compensam um mau LCP?
Não. Se a página demora cinco segundos a carregar, o utilizador já está frustrado antes de o CLS e o INP importarem. O utilizador sai antes de interagir. Um carregamento rápido (bom LCP) é pré-requisito de uma boa experiência. Um bom CLS e um bom INP melhoram a experiência de uma página rápida, não de uma lenta.
Como medimos e acompanhamos as melhorias de CLS e INP?
Ponto de partida: mede antes da otimização. Aplica a otimização. Nova medição: mede depois. Usa a biblioteca Web Vitals (biblioteca JavaScript que mede os Core Web Vitals) para acompanhar com monitorização de utilizadores reais. Configura alertas: se o CLS ou o INP piorar, o alerta avisa a equipa.