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 desempenho na web. O mecanismo de pesquisa do Google mede essas três métricas e as incorpora em suas decisões sobre quais páginas devem ser exibidas nos resultados de pesquisa. Isto significa que os profissionais de otimização de mecanismo de pesquisa (SEO) devem otimizar os Core Web Vitals de suas páginas como parte de uma estratégia holística para melhorar a classificação delas.

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

O que é a atualização da experiência da página do Google?

Embora o tempo de carregamento da página tenha sido uma parte importante da SEO, o Google anunciou em 2020 que os CWVs se tornariam parte de seu algoritmo de classificação em meados de 2021. Isto é conhecido como a atualização da experiência da página do Google.

No anúncio, o Google declarou que os CWVs seriam levados em conta nos sinais de experiência da página que ajudam a determinar a classificação de uma página na busca. Outros fatores de experiência de página incluem segurança HTTPS, compatibilidade com dispositivos móveis e a ausência ou presença de intersticiais intrusivos (como pop-ups). O objetivo da atualização era recompensar as páginas web que oferecem uma experiência do usuário positiva.

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. O desempenho 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. 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 incorpora o desempenho da web nas decisões de classificação?

Os mecanismos de pesquisa, 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 Largest Contentful Paint mede o tempo que leva para carregar a maior parte de uma página web, que geralmente é uma imagem ou um bloco de texto.

As diretrizes do Google classificam uma medição de LCP como "boa" se for inferior a 2,5 segundos. No entanto, quanto mais rápido melhor.

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.

Uma versão anterior da métrica LCP é o First Meaningful Paint (FMP), que mede quando o conteúdo principal de uma página se torna visível. O Google descobriu que essa métrica não era confiável e, desde então, a removeu de algumas de suas ferramentas de relatórios.

O que é o FID (First Input Delay)?

O First Input Delay é 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 a rapidez com que uma pessoa pode clicar na tela pela primeira vez e fazer algo acontecer. De acordo com as diretrizes do Google, um FID "bom" é de 100 milissegundos ou menos.

Um exemplo de FID. Suponha que Alan visite uma página web intitulada "Como polir seus sapatos." Ele vê um carrossel de fotos de graxa de sapato 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.

Observe que o FID é uma "métrica de campo", ou algo que é medido com base na observação de usuários reais e não hipoteticamente ou em um "laboratório".

Algumas alternativas de “métrica de laboratório” incluem Total Blocking Time (TBT) e Time to Interactive (TTI). O TBT mede o tempo decorrido entre o First Contentful Paint (FCP) e o TTI. O FCP mede o tempo entre o início do carregamento e o carregamento dos itens na tela do usuário. Como o próprio nome sugere, o TTI mede o tempo que leva para que os itens pareçam ter sido carregados e quando um usuário é realmente capaz de interagir com eles.

O que é Cumulative Layout Shift (CLS)?

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. As diretrizes do Google dizem que uma medida CLS "boa" é igual ou inferior a 0,1.

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 medir os Core Web Vitals

Há muitas ferramentas que podem ser usadas para verificar os CWVs. A seguir estão todas as ofertas diretamente do Google:

• O Chrome UX Report (CrUX) oferece dados de campo reportados pelos usuários do Chrome, fornecendo aos proprietários do site dados sobre a real experiência do usuário em seu site.
• O Google Lighthouse é uma ferramenta gratuita que fornece métricas de laboratório sobre os CWVs.Ele oferece informações acionáveis para melhorar o desempenho, a SEO, a acessibilidade e muito mais.
• O Google PageSpeed Insights combina a funcionalidade do CrUX e do Lighthouse, oferecendo dados de campo e de laboratório sobre os CWVs e outros web vitals.Os usuários podem verificar o desempenho dos sites, quer sejam ou não seus proprietários, usando o PageSpeed Insights.Aqui está um exemplo de um relatório PageSpeed Insights.
• OGoogle Search Console é baseado em parte nos dados de campo do CrUX e fornece dados de desempenho dos CWVs por URL ou grupos de URLs.

Como melhorar os Core Web Vitals

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.
• Implementar o lazy loading: No lazy loading, os recursos do site só são carregados quando um usuário precisa deles.Isto torna o carregamento do site mais eficiente até certo ponto, mas as pesquisas sugerem que o uso excessivo deste recurso está correlacionado com o LCP mais baixo.Por este motivo, o Google sugere limitar o lazy loading de imagens "abaixo da dobra" ou para as partes da página web que o usuário tem que rolar para ver.

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.
• Remover ferramentas e scripts de terceiros desnecessários:
O carregamento de ferramentas adicionais em seu site também pode diminuir o desempenho. Reduzir a quantidade de ferramentas de terceiros em um site pode melhorar o FID e a velocidade do site em geral.

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.

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

Embora os CWVs sejam as métricas que o Google diz que os profissionais de SEO deveriam priorizar, eles não são os únicos web vitals que existem.First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI), e Time to First 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.)

Como a Cloudflare pode ajudar a melhorar os CWVs

A Cloudflare oferece uma variedade de serviços que podem ajudar a impulsionar os CWVs:

• A rede de distribuição de conteúdo (CDN) da Cloudflare armazena conteúdo estático e dinâmico em cache através de uma Rede global que abrange mais de 300 cidades em mais de 100 países. Isto permite que os sites sejam carregados mais rapidamente, algo do qual todos os três CWVs se beneficiam.
• Cloudflare Images oferece funcionalidade de redimensionamento que pode comprimir imagens e aumentar ainda mais a velocidade de carregamento do site, especialmente para LCP.
• Cloudflare Zaraz carrega recursos de terceiros em nuvem e longe do navegador, melhorando as métricas como FID e CLS.