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:

  • Artigo web.dev sobre CLS
  • Guia do Google para melhorar o CLS
  • DocumentaĆ§Ć£o MDN sobre aspect-ratio
  • DocumentaĆ§Ć£o MDN sobre font-display
  • InformaƧƵes sobre <link rel="preload">
  • InformaƧƵes sobre a propriedade CSS transform
  • InformaƧƵes sobre a propriedade CSS opacity

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)