Core Web Vitals são as novas métricas do Google para avaliar velocidade, interatividade e harmonia de design ou estabilidade visual dos sites
Tempo de Leitura – 8 minutos
Como maior buscador online do universo digital, a Google está sempre inovando. Sendo assim busca constantemente novas maneiras de provocar os produtores de conteúdo para que entreguem relevância, qualidade e autenticidade.
Além da segurança dos sites, acessibilidade, navegabilidade responsiva e outros indicadores voltados para melhorar cada vez mais a experiência dos usuários, agora o algoritmo, por meio de uma nova inteligência artificial, criada pela equipe da Google, avalia mais três indicadores.
- Design
- Velocidade
- Interatividade
Para testar essas métricas você pode usar o Google Pagespeed Insights, o Google Lighthouse ou o Google Search Console.
Além de fazer testes, dá para acompanhar as novas métricas mapeando e melhorando a experiência do usuário. Ou seja, o “update” que a Google fez, faz com que, quem atua nos bastidores dos sites consiga medir com efetividade a usabilidade e a navegabilidade dos sites para melhorar a experiência dos usuários.
Não é uma ferramenta, mas é uma atualização que traz informações relevantes para os desenvolvedores e para o time que está nos bastidores do contexto digital. Que, aliás, impacta diretamente em toda a comunicação e estratégia de ações da turma do marketing.
Core Web Vitals – Page for Page
A atualização anunciada em 2020 já entrou em vigor e se somaram as métricas que já eram utilizadas. O update foi feito para que, página por página, fosse possível melhorar fatores de ranqueamento e de entrega de resultados, de forma orgânica, tanto para as empresas quanto para os usuários.
Conheça as 3 novas métricas do Core Web Vitals
LCP – Largest Contentful Paint
Essa métrica foi incorporada para medir o tempo de resposta que o maior elemento de uma página leva para carregar. Seja um banner, um bloco de texto, um vídeo, gif, animação ou um formulário. O tempo de resposta/carregamento não deve ultrapassar 2.5 segundos. Sendo assim, otimize também esses conteúdos.
A dica aqui é: saiba priorizar as informações. Quantidade não é qualidade. Os layouts nos topos das páginas devem ser sempre mais leves e objetivos. E claro, é preciso ter um site bom e ágil com bloqueio de renderização.
FID – First Input Delay
A métrica de FID é usada para medir o tempo de resposta da interatividade do usuário com uma página de um site. Desde a primeira página.
Para ser considerado responsivo, o indicado é que o FID – First Input Delay, em tradução livre, Atraso da Primeira Entrada, dure 100 milissegundos ou menos. Ou seja, um carregamento ultrarrápido para encantar o usuário, que está cada vez mais imediatista. Ou seja, quer a interação em tempo real, mesmo!
Na web, como na vida, a primeira impressão é a que fica. Tanto no design quanto na rapidez de respostas de carregamento.
Design, apelo visual, velocidade e capacidade de resposta é o combo perfeito para encantar o usuário, fazer ele ficar, navegar pelas outras páginas e querer voltar.
Apesar de ser mais difícil mensurar o quanto o design agradou, medir o tempo e capacidade de resposta, interatividade e velocidade, não é!
A métrica de FID mede o tempo de interação do usuário, seja clicando em um link pela primeira vez, usando um controle personalizado em JavaScript ou clicando em um botão de conversão. Além disso, mede também o momento em que o navegador é capaz de iniciar o processo de respostas dessa interação.
Então a dica é: Quanto mais baixa for a FID mais rápido é a interação com a página.
CLS – Cumulative Layout Shift
Cumulative Layout Shift ou Mudança de layout cumulativa é a métrica que identifica a estabilidade e o desempenho no carregamento de um layout das páginas na web. Em outras palavras, o CLS mede uma mudança brusca e inesperada de elementos, sejam de texto ou de imagem, enquanto uma página está sendo renderizada.
Por exemplo: sabe quando você está navegando ou lendo algo online e de repente a página muda sem que você tenha clicado em lugar algum? É isso! A gente até se perde na leitura. Ou então quando você termina de ler e clica no botão ou em algum link para ir para outra página e… Pá! A página “se move”, parece se configurar e você até pensa que esbarrou em alguma coisa. Não, não foi você. O que provavelmente aconteceu em ambas as situações foi que os recursos digitais, que você não está vendo, devem estar carregando de maneira assíncrona. Ou seja, os elementos do DOM – Document Object Model¹ foram adicionados de forma dinâmica na página que você está navegando, acima do conteúdo em questão.
Esses elementos podem ser uma imagem, um vídeo, uma fonte de um anúncio, ou até mesmo um Widget² e ter dimensões desconhecidas que se redimensiona automaticamente.
A grande questão é que o funcionamento de um site na fase de desenvolvimento é diferente de como funciona para os usuários. Especialmente em conteúdos personalizados ou de terceiros. Por isso é importante realizar testes. Tanto nas versões mobile quanto desktop, em diferentes navegadores que podem já estar com APIs executados no cache.
Por fim, nesses casos a métrica CLS ajuda a resolver todas essas questões. Contudo, vale destacar que as mudanças de layout são positivas e muitos aplicativos frequentemente mudam os elementos e suas posições nas páginas. Desde que as mudanças de layout aconteçam de maneira esperada ou em resposta às interações do usuário.
O uso do CLS – Cumulative Layout Shift é de suma importância para medir a estabilidade visual. Focada no usuário, a métrica contribui para quantificar a frequência com que os usuários experimentam essas mudanças inesperadas de layout.
A dica aqui é: Mantenha o CLS sempre abaixo de 0,1 e teste a métrica em páginas nas versões mobile e desktop.