DEV Community

Lucas Rocha
Lucas Rocha

Posted on

🛑 Chega de Pulos na Tela! Guia Prático para Eliminar o CLS (Cumulative Layout Shift) (Parte 3 de 3 sobre Core Web Vitals)

I. Introdução: A Chateação dos Deslocamentos Visuais Inesperados

"Já passou pela situação de estar lendo algo e a página 'dar um tranco'? Isso é CLS. Evite isso, buscando uma vivência online melhor."

II. Entendendo o CLS: Por Que as Páginas se 'Movem' Sozinhas?

"Falta de dimensões em imagens, anúncios que demoram a aparecer, troca de fontes, conteúdo dinâmico em cima: os culpados mais comuns."

III. Como Avaliar e Encontrar Onde Está o Problema

"Use a métrica CLS no Lighthouse e no PageSpeed Insights. Acompanhe os resultados em tempo real."

IV. Soluções Simples para Acabar Com o CLS:

  1. Dimensões Certas: A Solução Para Imagens e Vídeos Firmes

"Sempre coloque width e height ou empregue aspect-ratio."

HTML

<img src="gato.jpg" alt="Gato" width="600" height="400">
<div style="width: 100%; aspect-ratio: 16 / 9;"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Prepare o Terreno: Minimizando Deslocamentos de Anúncios, Embeds e Iframes

"Use espaços reservados com tamanhos pré-definidos."

HTML

<div id="ad-placeholder" style="width: 300px; height: 250px;"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Fontes Sem Surpresas: Melhorando o Desempenho do Carregamento

"Use font-display (swap, optional, fallback) e pré-carregue as fontes mais importantes (<link rel="preload">)."

CSS

@font-face { font-family: 'Fonte'; src: url('fonte.woff2'); font-display: swap; }
<link rel="preload" href="fonte.woff2" as="font" type="font/woff2" crossorigin>
Enter fullscreen mode Exit fullscreen mode
  1. Sem Imprevistos no Topo: Evitando Conteúdo Dinâmico que Empurra o Resto

"Reserve um espaço ou coloque o conteúdo novo abaixo da área visível."

HTML

<header style="height: 60px;"></header>
<div style="padding-top: 60px;"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Animações Leves, Layout Imóvel:

"Use transform e opacity nas animações, não propriedades que afetam o layout."

CSS

.elemento { transform: translateX(0); transition: transform 0.3s; }
Enter fullscreen mode Exit fullscreen mode

V. CLS e UX: Estabilidade Visual é Fundamental

"Uma experiência online confiável e acessível para todos."

VI. Conclusão: Acabe Com os "Trancos" na Sua Página!

"Priorize que a página não fique se movendo sozinha. Deixe suas ideias nos comentários!"

Links e Materiais de Apoio:

Sugestão de Imagem Para a Capa: Uma imagem mostrando organização (ex: peças alinhadas) ou a eliminação de "pulos".

Tags: webdev, frontend, performance, optimization, cls, corewebvitals, ux, css, html

Top comments (0)