O que são os Core Web Vitals (CWV)?

O que são os Core Web Vitals (CWV)?

Os Core Web Vitals (CWV) são um conjunto de três métricas de performance na web. O mecanismo de pesquisa do Google mede essas três métricas para ajudar a determinar quais sites serão exibidos depois que um usuário realizar uma pesquisa. Embora o tempo de carregamento da página tenha sido uma parte importante da otimização de mecanismos de pesquisa (SEO), o Google se concentrou especificamente nos CWVs como parte de seus algoritmos de classificação desde meados de 2021.

Os CWVs são:

1. Largest Contentful Paint (LCP), que mede a velocidade de carregamento
2. First Input Delay (FID), que mede a interatividade
3. Cumulative Layout Shift (CLS), que mede a estabilidade visual

Como os Core Web Vitals afetam a SEO?

Todos os mecanismos de pesquisa usam bots, chamados web crawlers ou web spiders, para analisar sites. Estes bots determinam o conteúdo de cada site e ajudam a determinar quando esse site deve ser exibido em resposta a uma consulta de pesquisa. A performance na web é um dos aspectos de um site que os bots do Google verificam.

Não se sabe exatamente o quanto LCP, FID e CLS afetam a SEO, uma vez que o Google mantém grande parte de seus algoritmos de classificação em segredo. Mas os CWVs têm um grande impacto na SEO. O Google anunciou a incorporação dos CWVs em seu algoritmo em junho de 2021. E muitos observadores do setor realizaram estudos de caso demonstrando melhorias ou perdas nas classificações de pesquisa com base nas alterações nos CWVs de um site.

Como isso funciona na realidade? Suponha que o Google tenha que escolher entre colocar o site A e o site B no topo dos resultados da consulta "O que é ARPANET?" Tanto o site A quanto o site B têm forte reputação de fornecer fatos sobre a história da internet e ambos fornecem informações igualmente detalhadas sobre o assunto da ARPANET. Tudo o mais sendo igual, se o site A carregar e responder mais rápido e saltar menos para carregar do que o site B, o algoritmo do Google provavelmente decidirá mostrar o site A no topo dos resultados de pesquisa — mesmo que os sites forneçam uma qualidade de informações semelhante.

(As classificações dos mecanismo de pesquisa são mais complexas do que as apresentadas neste exemplo e dezenas de fatores afetam onde um site aparecerá na busca).

Por que o Google leva em conta a performance na web?

Os mecanismos de busca, como o Google, querem fornecer aos pesquisadores as informações mais relevantes o mais rápido possível. Os atrasos no tempo de carregamento tendem a frustrar os usuários — ao contrário, páginas de carregamento rápido aumentam as chances de retorno dos usuários. Embora o Google tenha hoje a grande maioria do mercado de pesquisas em língua inglesa, uma experiência do usuário ruim pode fazer com que os pesquisadores recorram a outras fontes de informação.

Por razões similares, outros mecanismos de pesquisa como DuckDuckGo e Bing podem levar em conta também a performance na web — embora, como no Google, não se saiba ao certo como funcionam seus algoritmos de classificação de páginas.

O que é Largest Contentful Paint (LCP)?

O LCP mede o tempo que leva para carregar a maior parte de uma página web, que geralmente é uma imagem ou um bloco de texto.

O LCP não mede quanto tempo leva para carregar uma página web inteira, mas fornece uma boa referência para indicar a rapidez com que uma página web está carregando. E normalmente o maior elemento em uma página web é seu conteúdo principal, portanto, o tempo em que ela carrega é muitas vezes bem alinhado com o tempo em que o usuário percebe que a página foi carregada.

Os especialistas sugerem que o LCP deve levar no máximo 2,5 segundos. Entretanto, quanto mais rápido, melhor.

O que é o FID (First Input Delay)?

FID é uma medida do tempo entre a primeira tentativa de interação de um usuário com uma página web e quando ela responde. Em outras palavras, o FID quantifica quando uma pessoa pode clicar na tela pela primeira vez e fazer algo acontecer. O ideal é que o FID de uma página web seja de 100 milissegundos ou menos.

Suponha que o Alan visite uma página web intitulada "Como engraxar seus sapatos". Ele vê um carrossel de fotos de produtos para limpeza de sapatos no topo da página e clica na seta para a direita para navegar para a próxima foto. O FID é o tempo decorrido desde o clique na seta até o carregamento da próxima foto.

O FID não mede quanto tempo leva para que o evento solicitado realmente ocorra — quanto tempo leva para o navegador do Alan terminar de carregar a próxima foto. Ele mede apenas o tempo entre a solicitação e quando a solicitação começa a ser atendida.

O que é Cumulative Layout Shift (CLS)?

O CLS mede o quanto uma página web "salta" à medida que é carregada. Especificamente, ele mede a maior "explosão" de mudanças no layout da página.

Uma mudança de layout ocorre quando o conteúdo da página se move para cima, para baixo ou em qualquer outra direção de onde apareceu originalmente. No contexto dessa métrica, uma explosão é um grupo de mudanças de layout onde todas acontecem com um segundo de diferença entre uma e outra. Uma explosão pode ter até cinco segundos de duração e conter qualquer número de mudanças de layout.

Imagine que depois que o Alan carrega a página "Como polir seus sapatos", ele tenta clicar na seta para a direita para ver a próxima imagem no carrossel. No entanto, o carrossel de imagens de repente se move mais para baixo na página e Alan acaba clicando no texto que carrega acima do carrossel. A página web mudou porque não carregou tudo ao mesmo tempo e o Alan fica confuso.

Provavelmente, essa página web tem uma pontuação CLS ruim. Ela claramente se moveu um pouco, deslocando o carrossel de fotos para baixo em dezenas ou centenas de pixels.

Como o CLS é medido

O Google calcula as pontuações de CLS com a seguinte equação:

fração de impacto * fração de distância = pontuação da mudança de layout

• A fração de impacto é a porcentagem da tela que muda quando ocorre uma mudança de layout.
• A fração de distância mede a distância que um elemento se move na tela, também como uma porcentagem da tela.

Se uma página web for carregada em uma tela com 400 pixels de altura e 200 desses pixels mudarem quando um novo elemento for carregado, a fração de impacto será 200/400, ou 50%. Se o novo elemento moveu outro elemento para baixo em 50 pixels, a fração de distância é 50/400, ou 12,5%.

Para calcular a pontuação de mudança de layout, pegue essas duas porcentagens, escreva como decimais e depois multiplique:

0,50 * 0,125 = 0,0625

Se esta for a maior quantidade de movimento que a página web tem, a pontuação CLS da página web é 0,0625.

Embora, o ideal seja que uma página web não mude quando for carregada, essa ainda é uma pontuação aceitável. Os especialistas recomendam que as páginas web tenham uma pontuação CLS de 0,10 ou menos.

Como os desenvolvedores podem otimizar sites para essas três métricas?

Como melhorar o LCP

• Usar uma rede de distribuição de conteúdo (CDN): as CDNs armazenam conteúdo em cache em locais em todo o mundo para que o conteúdo chegue aos usuários mais rapidamente.
• Otimizar as imagens: as imagens costumam ser o maior elemento de uma página. Reduzir o tamanho dos arquivos de imagens pode ajudar a acelerar o tempo de carregamento de uma imagem.

Como aprimorar o FID

• Reduzir o tamanho das funções JavaScript: páginas web dinâmicas com muito código podem causar atrasos de entrada porque o navegador precisa esperar que todo o código seja carregado antes de poder executá-lo. A minificação de JavaScript pode ajudar esse processo a ser mais rápido.
• Criar páginas web estáticas: as páginas web HTML estáticas carregam muito mais rápido do que as páginas dinâmicas, especialmente quando distribuídas via CDN. Saiba mais sobre geradores de sites estáticos ou sobre o Jamstack, uma filosofia de desenvolvimento que enfatiza o conteúdo estático.

Como melhorar o CLS

• Minimizar elementos de páginas de terceiros: elementos de terceiros em uma página são carregados a partir de locais separados em comparação com o restante da página. Por isso, eles podem carregar em um tempo ligeiramente diferente, alterando o layout da página à medida que são carregados. Minimizar o uso desses elementos de terceiros reduz o número de mudanças de layout resultantes.
• Reservar espaço para conteúdo incorporado: muitos elementos de terceiros, como anúncios, são essenciais para a funcionalidade ou modelo de negócios de um site e não podem ser eliminados. Os desenvolvedores podem reservar espaço na página web para que esses elementos sejam carregados antes que o navegador busque o elemento real.
• Garantir que as imagens sejam carregadas no tamanho ideal: este é um processo ligeiramente diferente da otimização de imagens em geral. Computadores desktop, tablets e smartphones precisam de imagens em tamanhos ligeiramente diferentes porque suas telas variam em tamanho. Se um navegador carregar primeiro a imagem grande otimizada para desktop e, em seguida, precisar obter a imagem otimizada para dispositivo móvel porque o dispositivo em uso é um smartphone, isso pode fazer com que o conteúdo da página salte quando a imagem de tamanho diferente for carregada.
• Incluir altura e largura para imagens e vídeo: as propriedades de altura e largura informam aos navegadores o tamanho de uma imagem para que eles possam reservar esse espaço antes que a imagem ou o vídeo sejam carregados. Nosso artigo sobre vídeo HTML5 tem mais informações sobre como fazer isso para vídeos.
• Usar caixas de proporção de tela do CSS: existem várias técnicas de CSS que os desenvolvedores podem usar para preservar espaço para um elemento de página usando proporções — saiba mais aqui.

A Cloudflare também oferece vários serviços especificamente para melhorar os Core Web Vitals. Consulte este artigo para saber mais: Como usar a Cloudflare para otimizar seu site para os Core Web Vitals.

Quais outras métricas de performance são importantes?

Há uma série de outros "Web Vitals" além dos CWVs. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI), e Tempo decorrido até o primeiro byte (TTFB) não têm o mesmo impacto na SEO, mas podem ajudar os desenvolvedores a identificar problemas que afetam os CWVs.

(Por si só, a TTFB não é uma métrica particularmente útil. Mas pode ser uma indicação de problemas adicionais que os desenvolvedores precisam corrigir.)

Quem quiser saber mais pode baixar este artigo técnico, que contém um glossário que define uma série de métricas de performance.