Core Web Vitals: Meça e Melhore o Desempenho Web
Você construiu um site rápido, mas os usuários ainda reclamam de carregamento lento ou interações travadas. Os mecanismos de busca também podem te classificar mais abaixo devido a Core Web Vitals ruins. Essas métricas—Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS)—impactam diretamente a experiência do usuário e o SEO. Neste guia, mostraremos como medi-las e melhorá-las com passos práticos.
O que são Core Web Vitals?
Core Web Vitals são um conjunto de métricas definidas pelo Google para quantificar aspectos-chave da experiência do usuário: carregamento, interatividade e estabilidade visual. Elas são:
- Largest Contentful Paint (LCP): Mede o desempenho de carregamento. Deve ocorrer dentro de 2,5 segundos após o início da página.
- First Input Delay (FID): Mede a interatividade. Deve ser inferior a 100 milissegundos.
- Cumulative Layout Shift (CLS): Mede a estabilidade visual. Deve ser inferior a 0,1.
Essas métricas fazem parte dos sinais de Page Experience do Google e podem afetar seu ranking de busca.
Como medir as Core Web Vitals
Você pode medir as Core Web Vitals em laboratório (teste sintético) ou em campo (monitoramento de usuários reais). Ambos têm seu lugar.
Ferramentas de laboratório
- Lighthouse: Integrado ao Chrome DevTools, ele audita o desempenho e fornece pontuações para LCP, CLS e total blocking time (TBT, um proxy para FID).
- PageSpeed Insights: Combina dados de laboratório e de campo do Chrome User Experience Report (CrUX).
- WebPageTest: Oferece testes avançados com locais e dispositivos personalizados.
Ferramentas de campo
- Chrome User Experience Report (CrUX): Fornece dados agregados de usuários reais para milhões de sites.
- Biblioteca web-vitals: Uma biblioteca JavaScript para capturar métricas de usuários reais e enviar para sua análise.
- Search Console: Mostra o status das Core Web Vitals do seu site com base nos dados do CrUX.
Comece com ferramentas de laboratório para depuração e depois valide com dados de campo para garantir o desempenho no mundo real.
Melhorando o Largest Contentful Paint (LCP)
O LCP mede quando o maior elemento de conteúdo (geralmente uma imagem hero ou título) se torna visível. Para melhorar o LCP:
- Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e sirva imagens responsivas com
srcset. - Pré-carregue recursos críticos: Use
<link rel="preload">para imagens, fontes e folhas de estilo principais. - Reduza o tempo de resposta do servidor: Use um CDN, ative o cache e otimize o desempenho do backend.
- Elimine recursos que bloqueiam a renderização: Faça inline de CSS crítico, adie JavaScript não crítico e evite arquivos CSS grandes.
- Use uma rede de entrega de conteúdo (CDN): Sirva ativos de locais mais próximos dos usuários.
Para otimização de imagens, experimente nosso Compressor de Imagens para reduzir o tamanho dos arquivos sem perder qualidade.
Melhorando o First Input Delay (FID)
O FID mede o tempo desde quando um usuário interage pela primeira vez com sua página até quando o navegador pode responder. Para melhorar o FID:
- Minimize a execução de JavaScript: Divida tarefas longas, use code splitting e adie scripts não críticos.
- Otimize scripts de terceiros: Carregue-os de forma assíncrona ou adie-os até depois do conteúdo crítico.
- Use um web worker: Transfira cálculos pesados para uma thread de worker.
- Reduza o trabalho na thread principal: Evite scripts síncronos grandes e tamanho excessivo do DOM.
Ferramentas como a métrica TBT do Lighthouse podem ajudar a identificar tarefas longas.
Melhorando o Cumulative Layout Shift (CLS)
O CLS mede deslocamentos inesperados de layout durante o carregamento da página. Para melhorar o CLS:
- Sempre inclua atributos width e height em imagens e vídeos: Isso reserva espaço e evita deslocamentos.
- Reserve espaço para anúncios e incorporações: Use CSS
aspect-ratioou dimensões fixas. - Evite inserir conteúdo acima do conteúdo existente: Exceto em resposta à interação do usuário.
- Use transformações CSS para animações: Em vez de propriedades que acionam layout.
- Pré-carregue fontes: Use
font-display: swape pré-carregue para evitar deslocamentos de texto invisível.
Comparação dos limites das Core Web Vitals
| Métrica | Bom | Precisa melhorar | Ruim |
|---|---|---|---|
| LCP | ≤ 2,5s | 2,5s – 4,0s | > 4,0s |
| FID | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Fluxo de trabalho prático de otimização
Siga esta abordagem passo a passo para melhorar as Core Web Vitals:
- Meça: Execute o Lighthouse e verifique o Search Console para dados de campo.
- Identifique problemas: Foque na métrica com a pior pontuação.
- Aplique correções: Use as dicas acima para LCP, FID ou CLS.
- Teste novamente: Reexecute as auditorias para confirmar as melhorias.
- Monitore: Use a biblioteca web-vitals para acompanhar métricas de usuários reais ao longo do tempo.
Lembre-se de que o desempenho é contínuo. Audite seu site regularmente à medida que adiciona recursos.
FAQ
O que são Core Web Vitals?
Core Web Vitals são três métricas—LCP, FID e CLS—que medem carregamento, interatividade e estabilidade visual. Elas são usadas pelo Google como sinais de ranking.
Com que frequência devo verificar as Core Web Vitals?
Verifique após grandes mudanças e pelo menos mensalmente. Use dados de laboratório e de campo para detectar regressões.
Posso melhorar as Core Web Vitals sem um desenvolvedor?
Algumas correções, como compressão de imagens e adição de dimensões a imagens, podem ser feitas por editores de conteúdo. Outras podem exigir ajuda de um desenvolvedor.
Pronto para otimizar suas imagens para um melhor LCP? Experimente nosso Compressor de Imagens gratuito para reduzir o tamanho dos arquivos e acelerar seu site.