Core Web Vitals são o conjunto de métricas usadas pelo Google para avaliar a experiência do usuário no site. Entenda como adaptar seu domínio a elas!

Um dos propósitos mais importantes do Google é oferecer a melhor experiência de busca aos usuários. Para isso, é preciso garantir que os sites oferecem uma boa navegação e usabilidade, com páginas rápidas e eficientes. É por isso que o Core Web Vitals se tornou tão importante para o buscador.

Core Web Vitals é um conjunto de métricas essenciais para a experiência dos usuários em uma página. Elas fazem parte do Page Experience, uma atualização recente do Google que incluiu indicadores de experiência na página para classificar os resultados das buscas. Por isso, nas estratégias de SEO, essas métricas devem ser prioritárias.

Neste artigo, você vai entender tudo sobre o Core Web Vitals, como funcionam as métricas e como melhorar o desempenho das suas páginas. Acompanhe agora para saber mais!

O que são as Core Web Vitals?

Core Web Vitals são métricas essenciais da web, que o Google entende como indicadores importantes para entregar uma boa experiência ao usuário de um site. Pode ser traduzido como “princípios vitais da web”, ou, como o Google chama, “principais métricas da web”.

Elas fazem parte do algoritmo do buscador. Isso quer dizer que elas são usadas para classificar as páginas nos resultados das pesquisas, junto a outros diversos fatores de rankeamento. Por isso, conhecê-las também é importante para as estratégias de SEO.

As métricas de Core Web Vitals são as seguintes:

• LCP (Largest Contentful Paint): refere-se ao tempo que a página demora para carregar completamente o seu conteúdo;
• FID (First Input Delay): refere-se ao tempo que a página demora para responder à primeira interação do usuário;
• CLS (Cumulative Layout Shift): refere-se à estabilidade visual da página enquanto o usuário interage com ela.

Portanto, LCP, FID e CLS se concentram em três aspectos da experiência do usuário: carregamento, capacidade de resposta e estabilidade visual das páginas, à medida que os visitantes navegam por elas e interagem com seus elementos. Logo mais, você vai entender melhor essas métricas.

A atualização do Core Web Vitals foi apresentada inicialmente em abril de 2020 em um anúncio no blog da comunidade de desenvolvedores do Google.

As métricas foram apresentadas como um subconjunto do Web Vitals, que é uma iniciativa do Google para oferecer uma orientação unificada aos sites sobre os sinais de qualidade essenciais para proporcionar uma boa experiência.

As métricas do Core Web Vitals, então, são aquelas que se aplicam a todos os sites da web e merecem uma atenção especial dos administradores de sites. Em 2020 e até o momento, o Google apresentou o LCP, o FID e CLS como as principais métricas da web, mas o blog deixa claro que a internet é dinâmica e elas podem mudar com o tempo.

Existem ainda outras métricas Web Vitals, como o TTFB (Time to First Byte ou tempo até primeiro byte) e o TTI (Time to Interactive ou tempo até a interatividade). Mas o Google recomenda atenção especial às Core Web Vitals por serem críticas para a experiência na página.

Outras métricas de experiência na página

Em maio de 2020, o buscador anunciou no blog da Central de Pesquisa do Google que iria incorporar as métricas de Core Web Vitals ao seu algoritmo de classificação da busca.

Com isso, o indicador de experiência na página — chamado de Page Experience, como também ficou conhecida a atualização do algoritmo — passou a reunir as métricas de Core Web Vitals e outros parâmetros da Pesquisa do Google. Esses outros parâmetros são os seguintes:

• Mobile Friendly: compatibilidade com dispositivos móveis;
• HTTPS: segurança com HTTPS;
• No Intrusive Intersticials: diretrizes sobre intersticiais intrusivos.

Assim, ao reunir as métricas de Core Web Vitals e da Pesquisa do Google, o buscador oferece uma visão completa da experiência na página, de maneira que os sites possam otimizar a sua usabilidade e navegabilidade.

Qual a importância do Core Web Vitals nas estratégias de SEO?

O Google nem sempre é tão transparente sobre os fatores que inclui na classificação das buscas. Afinal, não quer entregar todos os segredos do seu algoritmo. Mas, quando o buscador fala abertamente sobre indicadores que são importantes para o rankeamento, é sinal de que você deve dar atenção a eles.

Esse é o caso do Core Web Vitals. O Google anunciou que essas métricas seriam incorporadas à classificação da busca na atualização do Page Experience e reforçou que elas são essenciais para a experiência na página. Portanto, isso significa que você deve medir e otimizar essas métricas no seu site para melhorar seu desempenho no ranking do Google.

Mas otimizar as métricas do Core Web Vitals não é apenas uma medida para conquistar o algoritmo do Google. Mais importante que isso é pensar no seu público: melhorar a experiência na página é receber melhor os seus visitantes e aumentar a satisfação das pessoas com o seu site. No final das contas, é isso que o Google quer também.

Dessa forma, você não apenas sobe posições no Google, o que traz mais visibilidade e autoridade, mas também melhora a relação com os usuários e a reputação da sua marca na web.

É importante saber que o próprio Google afirmou no anúncio do Page Experience: uma boa experiência na página não substitui um conteúdo relevante e de qualidade. Porém, quando há páginas de conteúdo semelhante, a experiência na página pode ser o diferencial.

Fica claro que você deve incluir as métricas de Core Web Vitals no seu planejamento de SEO, mas saiba que o mais importante é focar na qualidade e relevância do conteúdo para o seu público, o que exige que você conheça bem a sua persona, suas dúvidas e interesses.

Quais são as três métricas do Core Web Vitals? Entenda o LCP, FID e CLS

Agora, vamos explicar melhor o que significa cada métrica do Core Web Vitals, para você entender o que deve otimizar nas suas páginas. Confira:

LCP – Largest Contentful Paint

A métrica de Largest Contentful Paint ou LCP mede o desempenho do carregamento da página. Pode ser traduzida como “maior renderização de conteúdo”.

Essa métrica foca na velocidade de carregamento do maior elemento da página, considerando que esse seja o conteúdo principal.

O LCP substitui outras métricas de Web Vitals que foram consideradas complexas demais, incorretas ou imprecisas, como o First Contentful Paint (FCP), que mede o carregamento do primeiro conteúdo da página, e o First Meaningful Paint (FMP), que foca no conteúdo mais significativo.

O Google recomenda que o LCP deve ocorrer em até 2,5 segundos, o que é considerado um bom desempenho. Se a medição ficar acima de 4 segundos, é considerado ruim.

FID – First Input Delay

First Input Delay ou FID mede a capacidade de resposta da página à primeira interação do usuário com seus elementos, como um clique ou um download. A métrica pode ser traduzida como “atraso da primeira entrada”.

O foco do FID está na interatividade. Não basta que o site carregue seu conteúdo por completo — é preciso também que ele responda rapidamente às requisições dos usuários. Então, o FID mede o tempo que o site leva para processar uma resposta à primeira interação com a página.

A recomendação do Google é que o tempo do FID não exceda 100 milissegundos (0,1s). Se o tempo exceder 300 milissegundos (0,3s), é necessário fazer ajustes no site.

CLS – Cumulative Layout Shift

Cumulative Layout Shift ou CLS avalia a quantidade de mudanças de layout inesperadas no conteúdo da página visível. A métrica pode ser traduzida como “mudança cumulativa de layout”.

Para entender melhor o que são essas mudanças inesperadas, pense na seguinte situação que você talvez já tenha vivido. Você vai clicar em um botão na página, mas o site estava terminando de carregar uma imagem acima desse link. Então, quando a imagem carrega, o botão desce na página, e você acaba clicando em outro link sem querer.

O Google não quer que isso aconteça, por isso oferece uma métrica para avaliar a estabilidade visual das páginas. Nesse caso, a métrica não mede o tempo — o que você visualiza é uma pontuação que mede o impacto e a distância da mudança de posição do elemento no layout.

O Google recomenda que a pontuação do CLS fique abaixo de 0.1. Se ficar acima de 0.25, significa que o desempenho nesse quesito é ruim.

Como medir o Core Web Vitals? Conheça as principais ferramentas

A intenção do Google é que as métricas de Core Web Vitals estejam facilmente disponíveis para os administradores de sites. Dessa maneira, eles podem ficar de olho no desempenho das suas páginas e se dedicar a otimizá-las.

Por isso, existem algumas ferramentas gratuitas para você monitorar a performance das suas páginas nas métricas LCP, FID e CLS. Elas ainda oferecem um relatório com orientações para melhorar o desempenho em velocidade, interatividade e estabilidade visual.

Conheça a seguir as principais ferramentas para medir o Core Web Vitals:

Chrome User Experience Report

O relatório de experiência do usuário do Google Chrome, chamado de Chrome UX Report, ou apenas CrUX, é a ferramenta oficial do programa Web Vitals. Os dados são coletados em campo, ou seja, de usuários reais que utilizam o navegador.

As métricas do Chrome UX Report são disponibilizadas em diferentes ferramentas oferecidas pelo Google, que você também pode consultar:

Se você tem mais conhecimentos em programação e banco de dados, pode explorar ainda outras ferramentas mais avançadas:

• CrUX no BigQuery: um banco de dados que também oferece um histórico das métricas desde 2017;
• CrUX API: que permite personalizar as análises e integrar com dados de outras fontes;
• PageSpeed Insights API: que permite aprofundar as análises dos dados e integrar com outras ferramentas de SEO.

WebPageTest

A ferramenta WebPageTest também oferece relatórios do Core Web Vitals, além de outras diversas métricas de experiência na página. Utiliza dados de laboratório, que, embora não sejam de usuários reais, também são confiáveis para as análises.

A ferramenta é paga, mas é possível usar algumas funcionalidades no plano inicial que é gratuito.

Como melhorar sua pontuação no Core Web Vitals?

Nas ferramentas de medição do Core Web Vitals, você vai receber algumas recomendações para melhorar o desempenho nas métricas. A seguir, reunimos as principais dicas para otimizar essas métricas nas suas páginas:

Como melhorar o LCP

O Largest Contentful Paint mede o tempo de carregamento do maior elemento de conteúdo da página. Quando o desempenho em LCP está ruim, significa que algo está atrapalhando o carregamento.

De maneira geral, as principais causas para um meu desempenho em LCP são a lentidão na resposta do servidor, o bloqueio de renderização por JavaScript ou CSS, o carregamento lento de recursos da página ou o tempo de renderização no lado do cliente.

Tendo isso em vista, recomendamos algumas ações para melhorar o LCP da sua página:

Tempo de resposta do servidor

• Melhore a eficiência do código do lado do servidor;
• Utilize um CDN para ficar mais perto dos seus usuários;
• Utilize o armazenamento em cache para uma parte ou todo o conteúdo da página.

Renderização por JavaScript e CSS

• Adie o carregamento de JavaScript e CSS que não sejam críticos para o conteúdo;
• Elimine caracteres desnecessários dos códigos CSS e JavaScript (minificação).

Carregamento de recursos da página

• Otimize e comprima imagens e utilize formatos de última geração (JPEG 2000 ou WebP, por exemplo);
• Utilize imagens responsivas;
• Faça o pré-carregamento de recursos importantes, como fontes, imagens ou vídeos acima da dobra;
• Compacte os arquivos de texto (HTML, CSS e JavaScript) com algoritmos de compactação, como o Gzip e o Brotli;
• Entregue diferentes elementos de acordo com a conexão do usuário.

Renderização do lado do cliente

• Reduza o tamanho do pacote de JavaScript;
• Utilize a renderização do lado do servidor;
• Utilize a pré-renderização.

Como melhorar o FID

O First Input Delay avalia o tempo de resposta para a primeira interação do usuário com a página.

Em geral, a principal causa para o mau desempenho no FID é a execução pesada de JavaScript — que, como você deve ter percebido, atrapalha também o LCP. O navegador só pode responder ao usuário enquanto está ocupado executando o JavaScript na página.

Então, aqui estão as principais recomendações para melhorar a performance do FID:

• Divida o código de execução do JavaScript (Tarefas Longas) em tarefas assíncronas menores;
• Execute o JavaScript em uma thread em segundo plano com um web worker;
• Divida o código do pacote JavaScript em vários pedaços;
• Adie o carregamento de qualquer JavaScript que não seja crítico para a página.

Como melhorar o CLS

O Cumulative Layout Shift mede a ocorrência de mudanças repentinas na página que atrapalham a experiência do usuário.

Um mau desempenho em CLS significa que a página está gerando muitos deslocamentos de layout. As principais causas para isso são o uso de imagens e elementos sem dimensões, de conteúdos dinâmicos e de fontes da web.

Veja a seguir as principais recomendações para corrigir esses problemas e melhorar o CLS da página:

Imagens e elementos sem dimensões

• Inclua os atributos de tamanho width e height nas suas imagens e elementos de vídeo (permite que o navegador reserve o espaço certo enquanto eles carregam);
• Reserve o espaço para o local dos anúncios estaticamente, com o maior tamanho possível ou o tamanho mais provável com base em dados históricos;
• Evitar colocar anúncios perto do topo da janela de visualização, que podem causar deslocamentos maiores daqueles que aparecem no meio;
• Reserve espaço suficiente para widgets incorporáveis (como vídeos do YouTube e mapas do Google Maps) com um placeholder ou fallback.

Conteúdo dinâmico

Atualizações de notícias em tempo real ou o carregamento de novos produtos em uma lista de recomendações são exemplos de conteúdo dinâmico que podem deslocar o restante da página. Para evitar isso:

• Evite inserir novo conteúdo dinâmico acima do conteúdo existente;
• Reserve espaço suficiente para o conteúdo dinâmico com antecedência usando um placeholder;
• Deixe que o usuário carregue o conteúdo dinâmico (com um botão “carregar mais” ou “atualizar”, por exemplo).

Problemas com fontes da web

Fontes da web também podem causar deslocamentos no layout. Isso acontece porque, enquanto carregam, o navegador utiliza uma fonte invisível (Flash of Invisible Text ou FOIT) ou uma fonte genérica (Flash of Unstyled Text ou FOUT). Então, quando a fonte principal carrega, o layout pode se alterar.

Para evitar isso, utilize o pré-carregamento de fontes da web por meio de uma API. Dessa forma, o navegador já sabe como as fontes vão se comportar no layout.

Perceba, portanto, como a maioria das otimizações de Core Web Vitals são bastante técnicas. Provavelmente você vai precisar de algum conhecimento em SEO técnico ou contratar profissionais especializados para fazer as melhorias.

Mas é importante dar atenção as métricas de LCP, FID e CLS. Elas são determinantes para a experiência dos usuários na página e para o desempenho das suas estratégias de SEO.

Agora, aproveite para conferir a nossa checklist definitiva de SEO para não deixar passar nenhuma otimização importante — inclusive nas métricas de Core Web Vitals.