Otimização de Desempenho Web: Core Web Vitals e Melhoria de Velocidade

O que são os Core Web Vitals?

Core Web Vitals são três métricas-chave definidas pelo Google para medir a experiência do usuário: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint).

LCP mede o tempo de carregamento do maior elemento de conteúdo da página (geralmente uma imagem hero ou título). Deve ser inferior a 2,5 segundos. Um LCP lento faz os usuários abandonarem a página.

CLS mede as mudanças de layout inesperadas durante o carregamento. Mudanças causadas por imagens ou anúncios carregados tardiamente frustram os usuários. Deve ser inferior a 0,1.

INP mede o tempo de resposta às interações do usuário (cliques, pressionamentos de tecla). Deve ser inferior a 200 milissegundos. Um INP lento torna o site inutilizável.

Bons Core Web Vitals ajudam, mas não garantem posições altas nos resultados de busca.

Otimização de LCP

Carregue rapidamente o maior elemento de conteúdo. A imagem hero ou o título principal geralmente é o elemento LCP. Priorize seu carregamento.

Não adie o carregamento da imagem LCP. Reserve lazy loading para imagens fora da visualização inicial.

Reduza o tempo de resposta do servidor (TTFB). Use CDN (Content Delivery Network), otimize consultas de banco de dados, implemente cache de página.

async e defer aplicam-se a JavaScript; CSS não crítico precisa de outra estratégia de carregamento.

Precarregue recursos críticos com a diretiva preload: <link rel="preload" as="image" href="hero.webp">. Isso ajuda o navegador a descobrir recursos mais cedo.

Otimização de CLS

Adicione atributos width e height aos elementos de imagem e vídeo. Isso permite ao navegador reservar espaço e evitar mudança de layout.

Reserve contêineres de tamanho fixo para anúncios e embeds. Anúncios carregados tardiamente deslocam o layout da página e aumentam o CLS.

Otimize fontes web: use font-display: swap, precarregue fontes críticas. Minimize problemas de FOUT e FOIT.

Elementos sem espaço reservado inseridos acima do conteúdo podem deslocar o layout.

Use transform e opacity em animações CSS. Essas propriedades não acionam layout e não contribuem para o CLS.

Otimização de INP

Reduza o tempo de execução de JavaScript. Divida tarefas longas em pedaços menores. Tarefas com mais de 50ms afetam negativamente o INP.

Otimize event handlers. Escreva handlers que respondam rapidamente a cliques e pressionamentos de tecla. Mova cálculos pesados para Web Workers.

Scripts pesados de terceiros podem aumentar INP. Remova os desnecessários e meça novamente.

Adie operações pesadas com requestIdleCallback e setTimeout. Mova trabalho não crítico para segundo plano durante interações do usuário.

Em frameworks como React/Vue, evite re-renders desnecessários. Ignore cálculos desnecessários com useMemo, useCallback e memo.

Otimização Geral de Velocidade

Use HTTP/2 ou HTTP/3. Permitem processamento paralelo de múltiplas requisições e compressão de headers. Provedores de hosting modernos suportam por padrão.

Habilite compressão Gzip ou Brotli. Recursos baseados em texto (HTML, CSS, JS) reduzem 60-80%. Habilite na configuração do servidor.

Armazene em cache assets estáticos. Configure durações de cache do navegador e CDN com headers Cache-Control. Use TTL longos para assets imutáveis.

Incorpore CSS crítico inline, carregue o resto de forma assíncrona. Incorpore o CSS necessário para conteúdo above-the-fold no topo da página.

Divida JavaScript com code splitting. Carregue apenas o código necessário para cada página. Aplique lazy loading com dynamic import().

Carregue imagens com lazy load. Carregue imagens abaixo do fold apenas quando visíveis. O atributo loading="lazy" é suficiente.

Precarregue recursos com prefetch e preconnect. Estabeleça conexões DNS e TCP antecipadamente com <link rel="preconnect" href="https://fonts.googleapis.com">.

Ferramentas de Medição

Google PageSpeed Insights: Relatório de desempenho baseado em Lighthouse. Fornece pontuações separadas para mobile e desktop. Oferece sugestões de melhoria.

Chrome DevTools Performance tab: Analisa o processo de carregamento da página passo a passo. Mostra tarefas longas, mudanças de layout e tempos de pintura.

A extensão Web Vitals não tem mais suporte. Use Performance no Chrome DevTools.

CrUX (Chrome User Experience Report): Coleta dados de usuários reais. Aparece como relatório de Core Web Vitals no Search Console.

Relatório de Core Web Vitals do Search Console: Classifica suas URLs como 'Bom', 'Precisa melhorar' e 'Ruim'. Mostra quais páginas precisam de otimização.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience