Core Web Vitals: métricas e muita experiência do usuário

Na grande sopa de letrinhas do universo web, UX e SEO sempre caminham lado a lado. E é por isso que as Core Web Vitals são tão importantes.

Aliás, não é exagero dizer que a experiência do usuário é um requisito básico para o sucesso de qualquer site comercial. 

Para entender melhor, basta fazer uma analogia: imagine que você precisa de um tênis novo e vai até uma loja de calçados. Até aqui, a missão de escolher um sapato, experimentar, pagar e ir embora parece muito simples, né? 

Mas assim que você entra no estabelecimento, percebe que o ambiente é terrivelmente desconfortável. Ninguém aparece para te atender durante um tempão, a organização das vitrines dificulta a visualização dos sapatos, é difícil interagir com os atendentes porque todos eles parecem ocupados… 

E aí, você insiste nessa loja ou simplesmente vai procurar o tênis em alguma das 20 outras lojas de sapatos que existem na mesma rua?

Pois é. Na internet, não é diferente. A jornada que os usuários percorrem dentro do seu site para chegar a um determinado objetivo pode definir se eles se tornarão seus clientes ou não. E as Core Web Vitals servem justamente para medir o desempenho da sua plataforma nesse quesito.

Quer saber mais? Então é só continuar a leitura. Aqui, você vai descobrir tudo sobre o que são Core Web Vitals, para que servem e por que elas são tão cruciais para melhorar o posicionamento do seu site nas páginas de resultados do Google.

Confira, a seguir:

Core Web Vitals: o que é? 

Core Web Vitals é um grupo de métricas que servem para mensurar a qualidade da experiência do usuário (UX) nas páginas web.

Esse trio de indicadores é a espinha dorsal do Page Experience, um conjunto maior de métricas de UX criadas pelo Google para orientar quem desenvolve e administra plataformas web (como sites e blogs). 

Dá para dizer que o Core Web Vitals é o conjunto dos princípios fundamentais de usabilidade para portais digitais. Ele é o termômetro que mede os fatores mais importantes para uma boa jornada de navegação, como a velocidade de carregamento e a estabilidade das páginas.

Anunciadas em maio de 2020, as Web Vitals são essenciais para garantir que os usuários consigam interagir com as páginas do seu site da melhor forma possível. Elas também influenciam bastante a performance SEO do seu portal – mas vamos falar sobre tudo isso com calma mais para frente –.

Conheça as métricas do Core Web Vitals: 

Beleza, você já sabe para que servem as métricas do Core Web Vitals… mas, afinal de contas, de quais indicadores nós estamos falando?

O conjunto é composto por três medidas: Largest Content Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). De maneira geral, essas ferramentas avaliam a velocidade do site e o modo como os elementos visuais se comportam durante a navegação. Vale citar que o que hoje é conhecido como INP, no passado chama-se FID (First Input Delay) e a troca de nomenclatura aconteceu para a métrica fizesse mais sentido com o que ela se propõe a mensurar.  

Parece complicado? A gente explica. Confira, abaixo, as definições de cada uma das métricas do Core Web Vitals:

Maior exibição de conteúdo (LCP) 

Largest Contentful Paint (LCP) ou Maior exibição de conteúdo é um indicador que serve para avaliar a velocidade de carregamento percebida de uma página.

“Mas como assim velocidade percebida”?

É que, na verdade, a LCP não corresponde exatamente ao tempo que a página demora para carregar. Como o próprio nome sugere, ela informa o tempo necessário para que o maior elemento da página seja exibido – pode ser um bloco de texto, um vídeo ou uma imagem –. 

Quando esse conteúdo é renderizado e se torna visível rapidamente, os usuários percebem que o site é ágil. Mesmo que alguns dos elementos menores da página ainda não tenham aparecido, a sensação imediata é de que a velocidade de carregamento não será um problema durante a navegação.

Em outras palavras, a exibição do maior elemento da página costuma ser suficiente para que os usuários não se frustrem e desistam de esperar pelo carregamento. 

fonte: web.dev

Segundo as recomendações do Google, uma boa LCP precisa ser de 2,5 segundos ou menos. 

Vale mencionar que, tanto para a LCP quanto para as outras métricas do Core Web Vitals, o Google considera o 75º percentil de todas as visualizações da página ou do site como referência.  

Isso significa que o tempo de Maior exibição de conteúdo não precisa ser de 2,5 segundos ou menos para absolutamente todos os visitantes (até porque isso envolveria muitos fatores externos que nenhum desenvolvedor consegue controlar). Mas o site deve ser capaz de oferecer esse carregamento ágil à maioria dos usuários. 

Então para classificar a LCP de uma página específica, funciona mais ou menos assim: se essa meta de carregamento em até 2,5 segundos foi atingida em pelo menos 75% das visualizações que a página já recebeu, então o desempenho da página nessa métrica já é considerado bom.

A mesma lógica é aplicada para avaliar o desempenho de um site inteiro. 

Imagine um site que já foi visualizado 10 mil vezes (contanto as visualizações de todas as páginas), por exemplo. Se o maior elemento foi renderizado em menos de 2,5 segundos em 7500 dessas visualizações (75% de 10 mil), isso é suficiente para que o valor de LCP do site seja “lido” pelo Google como satisfatório.

Interaction to Next Paint (INP) 

Já aconteceu de você estar navegando por um site, clicar em um botão… e a tela permanecer exatamente igual por vários segundos? 

Aparentemente, o site não realizou a ação que você queria. Mas ele também não mostrou uma notificação de que alguma coisa está sendo carregada e nem exibiu um aviso de erro ou coisa do tipo. 

Como não há nenhum tipo de feedback visual, a sensação é de que a interface simplesmente não “respondeu” ao seu clique. Frustrante, né? 

Pois bem, a INP existe justamente para evitar esse tipo de situação. Interaction to Next Paint (Interação com Próxima Exibição, em português) é a métrica do Core Web Vitals que mede a capacidade de resposta de uma página. Em outras palavras, é uma forma de avaliar a velocidade com que o site reage às interações dos usuários.

Nesse caso, o tempo de resposta é o período que a página leva para exibir um feedback visual, isto é, uma indicação que mostre à pessoa que a ação dela surtiu algum efeito.

Quando o tempo de resposta é muito longo, o usuário não tem como saber se o produto que ele tentou adicionar no carrinho realmente foi adicionado, por exemplo (a não ser que mude de página para conferir). Ou se as informações do formulário que ele acabou de preencher foram devidamente enviadas e autenticadas. Ou por que as opções de um menu suspenso não foram exibidas.

Resumindo: o ideal é que os visitantes do seu site não precisem esperar muito tempo para obter algum tipo de retorno quando disparam uma interação (por meio de um clique, toque na tela ou acionamento de uma tecla).

fonte: web.dev

As páginas com boa capacidade de resposta são aquelas que têm um valor de INP abaixo de 200 ms (milissegundos). Acima de 500 ms, o INP é insatisfatório. Os valores intermediários indicam que a capacidade de resposta da página não chega a ser ruim, mas precisa de melhorias.

É claro que algumas interações são mais complexas do que outras, então não dá para esperar que o tempo de resposta seja o mesmo para todas elas. Por isso, o valor final do INP corresponde ao tempo de resposta da interação mais longa que ocorreu enquanto o usuário esteve na página.

Imagine, por exemplo, que um usuário realizou duas ações durante a visita a uma página: ele clicou em um link e depois clicou em um botão. Essas interações demoraram 180 ms e 260 ms para retornar feedbacks visuais, respectivamente. Nesse caso, o INP registrado foi de 260 ms. 

Assim como nas outras métricas do Core Web Vitals, a regrinha dos 75% também vale para classificar o desempenho de um site no INP.

Cumulative Layout Shift (CLS) 

Tão inconveniente quanto uma página que demora a mudar depois de uma interação é uma interface que muda “sozinha” (sem motivo aparente).

É o que acontece quando você está lendo um post no seu celular e a página se move (é rolada para cima) sem que você tenha encostado na tela, por exemplo. Ou quando um botão se desloca um pouco bem na hora que você pretendia clicar.

Geralmente, isso acontece quando algum recurso da página – como uma imagem ou um botão – demora mais a carregar. Ao concluir o carregamento, a exibição do elemento faz com que os outros componentes da página sejam “empurrados”.

Além de prejudicar a qualidade geral da experiência do usuário, essas mudanças inesperadas podem até mesmo desencadear consequências graves. Imagine se o deslocamento repentino de um botão faz a pessoa clicar na opção errada sem querer?

Para prevenir esse tipo de problema, o Core Web Vitals tem uma métrica dedicada exclusivamente à estabilidade visual das páginas. É a Cumulative Layout Shift (CLS), um indicador que expressa a frequência com que os usuários encontram mudanças de layout inesperadas.

fonte: web.dev

Ao contrário do que acontece com o LCP e o INP – os outros indicadores da Core Web Vitals –, o valor do CLS não é uma medida de tempo. 

Nessa métrica, o número exibido é calculado com base nas pontuações de mudança de layout, scores que medem o impacto que os elementos deslocados causaram na visualização da página e a distância dos deslocamentos.

Para oferecer boas condições de estabilidade visual aos usuários, uma página deve ter uma pontuação de Cumulative Layout Shift menor do que 0,1. 

Compreenda a importância das Web Vitals para o seu negócio 

Tá, mas por que vale a pena separar um tempinho para entender as Core Web Vitals?

A resposta curta para essa pergunta é bem simples: ninguém gosta de sites lentos e instáveis.  

Se você investiu tempo e recursos na criação de um blog ou de um site para a sua empresa, essa plataforma é o espaço virtual da marca. Pense nela como a representação do seu negócio no mundo digital.

Lembra da analogia que fizemos com a loja de sapatos lá na introdução deste conteúdo? Pois bem, assim como o que acontece com um estabelecimento físico, um site ineficiente e mal otimizado pode causar frustração até mesmo em visitantes que estavam inclinados a comprar um produto ou contratar um serviço.

A ideia por trás da otimização para experiência do usuário é garantir que as pessoas encontrarão exatamente o que procuram no portal da sua marca com o mínimo de atrito possível. Problemas na velocidade de carregamento, na estabilidade visual ou no tempo de resposta causam nos visitantes uma sensação de que o site não é confiável – ou de que é mais negócio procurar uma plataforma menos complicada de usar –.

Em um mercado cada vez mais competitivo, em que os consumidores têm acesso fácil a milhares de opções, pouca gente insiste em navegar por sites que não oferecem boas jornadas de usabilidade. A qualidade da experiência é um fator capaz de encantar e incentivar os usuários, fazendo com que eles se transformem em clientes… ou afastá-los da sua marca.

Resumindo: a atenção às Core Web Vitals pode ser o divisor de águas que leva as pessoas a escolherem a sua empresa em vez das concorrentes.

Além disso, como você está prestes a descobrir, o desempenho nos critérios avaliados pelas Core Web Vitals é importantíssimo para quem investe em SEO.

Ah! E já que comentamos sobre criação de um blog ali em cima, aproveita pra conhecer esses nossos artigos sobre Tom de Voz e Marketing de Conteúdos. Eles podem te ajudar a criar uma estratégia incrível para a sua empresa.

Core Web Vitals e SEO: como as métricas afetam os resultados da pesquisa? 

Quando você faz uma pesquisa no Google, os resultados aparecem organizados em uma espécie de ranking: os sites exibidos nas primeiras posições são aqueles que o buscador considera mais relevantes para a sua busca.

Nesse caso, ser relevante significa ser capaz de atender bem às intenções de pesquisa do usuário. Em outras palavras, para conquistar um bom posicionamento, o seu portal precisa ajudar as pessoas a conseguirem o que elas desejam com o máximo de eficiência e sem muitas complicações.

Por isso, na hora de ranquear os sites exibidos nas páginas de resultados de buscas (ou SERPs, “Search Engine Results Pages”), o Google prioriza sites com boas performances de velocidade, tempo de resposta e estabilidade visual. Esses critérios fazem parte do algoritmo de classificação do site de busca, já que ele sempre se esforça para que os usuários encontrem experiências de navegação fluidas e agradáveis.

E não é a gente que está afirmando: em 2020, o próprio Google anunciou que os requisitos avaliados pelas Core Web Vitals são fatores importantes para a classificação dos resultados.

Portanto, se você deseja que o seu site ou blog conquiste posições de destaque nas SERPs e seja descoberto por mais gente, a otimização da experiência do usuário é indispensável. A longo prazo, esse esforço vai te ajudar a aumentar o tráfego orgânico do seu portal e captar mais leads por meio das buscas.

No fim das contas, dá para dizer que o desempenho nas métricas de UX é um dos pilares essenciais da otimização para SEO.

Como monitorar e otimizar Core Web Vitals? 

Até aqui, você já entendeu que as Core Web Vitals são superimportantes. Mas talvez ainda esteja se perguntando onde esses indicadores tão essenciais são mostrados.

Não tem mistério: as Core Web Vitals são exibidas em todas as principais ferramentas de análise web do Google. Então existem várias plataformas que você pode usar para acompanhar as métricas, e o ideal é utilizar mais de uma para garantir a precisão dos dados. 

De maneira geral, a escolha dessas ferramentas depende de vários fatores, como as plataformas que se encaixam melhor nos seus fluxos de trabalho e o nível de conhecimento técnico de quem ficará responsável pelo monitoramento.

Para te ajudar nessa decisão, listamos abaixo os meios mais utilizados para medir Core Web Vitals:

Chrome User Experience Report 

As métricas do Core Web Vitals são exibidas no Chrome User Experience Report (também conhecido como Chrome UX Report ou CrUX), que é o relatório oficial da iniciativa Web Vitals.

Esse relatório é gerado a partir de experiências de usuários reais, e os dados podem ser visualizados em diversas plataformas oficiais do Google, como:

• Google Search Console: as pontuações do Core Web Vitals são apenas algumas das métricas que podem ser monitoradas no Google Search Console, uma ferramenta completa de análise de desempenho. Na plataforma, as Core Web Vitals aparecem quando você clica em “Experiência” e depois em “Principais Métricas da Web”, no menu lateral esquerdo.

• Google PageSpeed Insights: o PageSpeed Insights é um recurso do Google criado especialmente para facilitar o monitoramento da agilidade dos sites. Além de mostrar os relatórios de Core Web Vitals, essa ferramenta gratuita gera análises sobre a velocidade de carregamento das páginas usando simulações e revela os problemas de desempenho que exigem mais atenção. 

Ah! e por falar nisso, Além de apresentar relatórios detalhados sobre a velocidade de carregamento e outros aspectos técnicos, o PageSpeed Insights também gera um Performance Score, uma pontuação que resume o desempenho da página. Essa pontuação é calculada com base em múltiplas métricas, cada uma com um peso específico, o que ajuda a priorizar as otimizações mais impactantes para a experiência do usuário.

Extensões do Chrome

Para quem quer observar as Core Web Vitals de forma prática e facilitar o monitoramento contínuo, existem algumas extensões do Chrome que podem ser bastante úteis.

Elas podem ser instaladas no navegador em poucos minutos e enriquecem as análises com dados de laboratório. Isso significa que, nessas ferramentas, as medições são feitas em um ambiente simulado a partir de características predefinidas que representam as experiências de usuários hipotéticos. É diferente dos dados de campo, que são resultados de experiências reais das pessoas que passaram pelo seu site.

Alguns dos recursos que podem ser utilizados como extensões do Chrome para medir as Core Web Vitals são:

• Web Vitals: a extensão Web Vitals mostra as métricas de performance de uma página com dados em tempo real sem que você precise abrir uma nova aba – as informações aparecem em uma janela sobreposta –. Para iniciar uma análise, basta informar a URL da página.

• Lighthouse: o Lighthouse é uma ferramenta de código aberto que fornece alguns dos dados exibidos no PageSpeed Insights. Os dois recursos funcionam muito bem de maneira complementar, já que a extensão do Lighthouse conta com algumas informações extras (que não aparecem no PageSpeed), como indicadores de SEO e acessibilidade.  

WebPageTest 

Outra boa opção de plataforma para medir as Core Web Vitals é o WebPageTest.

Alimentada por dados de laboratório, a ferramenta oferece relatórios que incluem essas e outras métricas importantes para avaliar a experiência de usuário. Embora os indicadores sejam parecidos com os do PageSpeed Insights, a grande vantagem do WebPageTest é que ele oferece explicações mais detalhadas sobre os problemas de desempenho.

Vale mencionar que muitas funcionalidades do WebPageTest são pagas, mas alguns dos dados podem ser visualizados no plano gratuito.

Biblioteca Javascript 

Por fim, para quem tem um conhecimentos mais profundos de programação, também dá para medir as Core Web Vitals em JavaScript.

Isso pode ser feito por meio de APIs públicas da Web, utilizando a biblioteca JavaScript web-vitals. Para fazer medições com esse método, você precisa configurar o uso da biblioteca no seu site com a finalidade específica de mensurar os dados de Core Web Vitals e enviá-los a um endpoint de análise.

Caso queira orientações mais detalhadas sobre como acompanhar as métricas usando JavaScript, nossa dica é dar uma conferida nesses materiais oficiais do Google:

• Tópico “Medir a LCP em JavaScript” da página sobre Largest Contentful Paint (LCP);

• Tópico “Como medir o INP” da página sobre Interação com Próxima Exibição (INP);

• Tópico “Medir a CLS em JavaScript” da página sobre Cumulative Layout Shift (CLS).

Dicas que vão te ajudar a melhorar sua pontuação no Core Web Vitals 

É praticamente impossível fazer sucesso na web sem apostar no casamento entre UX e SEO – e as Core Web Vitals são aliadas valiosas nessa missão –.

Portanto, se você quer impulsionar a visibilidade orgânica da sua empresa e cativar os visitantes com experiências de usabilidade espetaculares, vale a pena conferir as dicas dos nossos especialistas sobre como otimizar as Core Web Vitals.

Para melhorar a Maior exibição de conteúdo (LCP), algumas das coisas que você pode fazer são:

• Aprimorar o tempo de resposta do servidor. Isso pode ser feito melhorando a eficiência do código do lado do servidor, armazenando o conteúdo (parcial ou total) da página em cache e usando um CDN para se aproximar dos usuários. Se possível, evite servidores compartilhados.

• Minificar os códigos JavaScript e CSS (eliminar caracteres desnecessários dos arquivos) e adiar o carregamento de elementos que não sejam críticos para a usabilidade e o funcionamento do site.

• Priorizar mídias responsivas.

• Utilizar o pré-carregamento de elementos importantes das páginas;

As dicas de recorrer a uma rede de distribuição de conteúdo (CDN) e minificar o JavaScript também valem para quem deseja melhorar o Interaction to Next Paint (INP). No caso desse indicador, compactar os arquivos de texto com a compressão Gzip e adiar o carregamento de alguns elementos JavaScript podem ser boas pedidas.

Já para melhorar a pontuação do Cumulative Layout Shift (CLS), a prioridade é evitar deslocamentos inesperados dos elementos visuais das páginas. Alguns ajustes possíveis são:

• Defina as dimensões dos elementos com precisão usando os atributos de tamanho width e height.

• Utilize placeholders para reservar os espaços destinados a widgets incorporáveis (como mapas do Google Maps) e elementos dinâmicos.

• Prefira posicionar os anúncios no meio da janela de visualização (e não no topo).

• Faça o pré-carregamento das fontes com uma API.

Crie experiências memoráveis e transforme a performance do seu site

Os números não mentem: de acordo com um levantamento do Google, as páginas que se saem bem nos requisitos das Core Web Vitals têm 24% menos chances de serem abandonadas pelos usuários.

Então a notícia é boa: só de chegar até aqui, você já deu o primeiro passo para usar a otimização UX a favor dos negócios nos portais digitais da sua empresa. Com o nosso Guia das Core Web Vitals, você tem tudo que precisa para começar a criar plataformas capazes de encantar os usuários e os mecanismos de busca com a mesma eficácia.

Mas não dá para negar que a utilização estratégica das Core Web Vitals envolve muitos detalhes complexos, né?

Se quiser entender melhor os impactos que essas métricas têm na performance SEO do seu site, pode contar com a gente! A consultoria de SEO da Wesearch inclui estratégias personalizadas para a sua marca, auditorias de SEO técnico, monitoramento de métricas com reports regulares e vários outros serviços que só uma equipe especializada em otimização pode oferecer.

Para saber mais sobre as possibilidades, é só mandar uma mensagem para o time da Wesearch e conversar com nossos especialistas.

Por fim, aproveita pra voltar mais vezes aqui no Blog da Wesearch! De SEO e Inteligência Artificial a Google Analytics, nossos artigos estão sempre cheios de dicas fresquinhas que podem te ajudar a dar os primeiros passos!