Compreendendo os principais sinais vitais da Web: os sinais vitais do seu site

Em maio de 2020, o Google lançou o Core Web Vitals, um conjunto de métricas para avaliar o desempenho do site. Como resultado, alguns sites sofreram um declínio no tráfego; no entanto, outros que se adaptaram rapidamente obtiveram benefícios significativos.

Este artigo tem como objetivo desmistificar Core Web Vitals e destacar sua importância para sites empresariais. Exploraremos como essas métricas podem melhorar a experiência do usuário e, consequentemente, melhorar os resultados de negócios, como as taxas de conversão.

Veja como a equipe do Google enfatiza o valor do Core Web Vitals:

“Os proprietários de sites não deveriam precisar ser especialistas em desempenho para compreender a qualidade da experiência que oferecem aos seus usuários. A iniciativa Web Vitals visa simplificar o cenário e ajudar os sites a se concentrarem nas métricas que mais importam, os Core Web Vitals.”

“É altamente recomendável que os proprietários de sites obtenham bons Core Web Vitals para ter sucesso com a Pesquisa e garantir uma ótima experiência do usuário em geral.”

“Os principais sistemas de classificação do Google procuram recompensar o conteúdo que proporciona uma boa experiência na página.”

Eu trabalho em um empresa de desenvolvimento web e nesta postagem compartilharei os insights da minha equipe e o que fazemos quando trabalhamos nos sites dos clientes. Além disso, incluo estratégias práticas para alinhar seu site aos padrões do Google, garantindo uma presença online robusta. Vamos começar!

O que são os principais sinais vitais da Web?

Core Web Vitals, introduzidos pelo Google, são elementos-chave que desempenham um papel crucial na determinação da experiência geral do usuário de uma página da web. Eles fazem parte do que o Google chama de sinais de “experiência na página”, que são usados para decidir quão bem uma página é classificada nos resultados de pesquisa.

Essas métricas são projetadas para fornecer aos proprietários de sites uma imagem clara de como os usuários reais experimentam seu site. Eles se concentram em aspectos como a rapidez com que as páginas carregam, a estabilidade do layout durante o carregamento e a rapidez com que um site responde às interações do usuário. Melhorar esses fatores pode levar a melhores posições nos resultados de pesquisa do Google, o que é crucial para qualquer negócio online.

Explorarei Core Web Vitals com mais detalhes nas seções a seguir, ajudando você a entender como eles funcionam e como você pode otimizar seu site para essas métricas importantes.

Histórias de sucesso de empresas que se preocupam com o CWV

Para provar o ponto da seção anterior, também podemos abrir um Google Relatório Core Web Vitals e clique em " Leia estudos de caso adicionais aqui ". Este recurso nos conta histórias reais de sucesso de sites que corrigiram seus problemas de desempenho e obtiveram uma enorme vantagem. Vamos dar uma olhada em algumas dessas histórias:

• Grupo Renault descoberto uma ligação significativa entre o Largest Contentful Paint (LCP) e as taxas de rejeição e conversão de seu site. Eles observaram que aumentar o LCP em apenas um segundo poderia diminuir a taxa de rejeição em até 14 pontos percentuais e aumentar as conversões em 13%.
• Farfetch com experiência um aumento de 1,3% na taxa de conversão da web a cada 100 ms de melhoria no LCP.
• Teste A/B do Rakuten 24 revelado que melhores sinais vitais da web levaram a um aumento de 53,4% na receita por visitante, um aumento de 33,1% na taxa de conversão, um crescimento de 15,2% no valor médio do pedido e uma queda de 35,1% na taxa de saída, entre outros benefícios.
• Carpe, ao melhorar seu LCP em 52% e Mudança Cumulativa de Layout em 41%, serra um crescimento de 10% no tráfego, um aumento de 5% nas taxas de conversão da loja online e um aumento de 15% na receita.

Impacto no SEO

Core Web Vitals são cruciais para SEO, pois fornecem métricas claras para a experiência do usuário, um fator que o Google agora inclui em seu algoritmo de classificação. Essa integração ressalta a necessidade dos sites atenderem a esses padrões para um melhor posicionamento nos resultados de pesquisa.

SEO (Search Engine Optimization) é a prática de aprimorar um site para melhorar sua classificação nos resultados de buscas, ajudando a atrair mais visitantes e potenciais clientes.

Além do SEO, o Core Web Vitals impacta o desempenho geral do site. Os sites com boa pontuação nessas métricas carregam mais rápido, fornecem interação estável e melhoram a facilidade de uso, levando a maiores taxas de engajamento e conversão do usuário.

Embora importantes, Core Web Vitals são apenas um dos muitos fatores nos critérios de classificação do Google. A excelência nessas métricas pode melhorar a classificação de pesquisa de um site, mas não garante a melhor colocação. Uma estratégia de SEO completa deve considerar isso junto com outros fatores.

Em maio de 2021, o Google anunciou que Core Web Vitals se tornaria um fator oficial de classificação. Esta atualização significa que sites com pontuações melhores podem ter classificações melhores, e aqueles com pontuações baixas podem enfrentar penalidades.

Em resumo, o foco do Google no Core Web Vitals reflete seu objetivo de otimizar a experiência do usuário nos resultados de pesquisa. Os sites com bom desempenho nessas áreas provavelmente proporcionarão melhores experiências ao usuário, alinhando-se aos objetivos do Google e garantindo potencialmente classificações de pesquisa mais altas.

Ciclo de vida das métricas CWV

O ciclo de vida das métricas é um conceito crucial para empresas com foco no desempenho da web. Esse ciclo de vida progride por etapas, permitindo que as empresas tenham tempo para se adaptar à medida que as métricas evoluem de experimentais para estáveis. Este processo é fundamental para um planejamento de negócios eficaz e estratégias de otimização de sites, pois enfatiza a importância do feedback das partes interessadas e de mudanças graduais e bem comunicadas para garantir previsibilidade e estabilidade.

Compreender os estágios do ciclo de vida ajuda a compreender as ferramentas de medição e a estar pronto para as atualizações recebidas.

Core Web Vitals tem três estágios de ciclo de vida:

• Estágio experimental

Aqui, novas métricas são desenvolvidas e testadas. Esta etapa visa abordar de forma eficaz os problemas de desempenho da web, refinando as métricas existentes. Também envolve a coleta de feedback de uma ampla comunidade para detectar quaisquer problemas e possivelmente ajustar a definição inicial da métrica.

• Estágio pendente

As métricas promissoras são ainda mais refinadas com base no feedback inicial. Eles permanecem nesta fase por pelo menos seis meses, dando tempo para adaptação dentro do ecossistema. A contribuição dos desenvolvedores e de outras partes interessadas é crucial durante esta fase, à medida que o uso dessas métricas cresce.

• Estágio estável

Depois que as métricas se mostram eficazes e passam do estágio Pendente, elas entram na fase Estável. Aqui eles são finalizados e recebem suporte contínuo, incluindo correções de bugs e atualizações ocasionais. Quaisquer alterações nessas métricas são comunicadas minuciosamente por meio de documentação oficial.

Critérios de avaliação do Google

Compreender como o Google avalia o desempenho do site é crucial para garantir que seu site atenda aos padrões que afetam sua visibilidade e experiência do usuário. Exploraremos os critérios de avaliação do Google, oferecendo insights para melhorar sua presença online.

O Google usa métricas específicas com valores limite definidos para avaliar o desempenho do site. Para a maioria das métricas, o Google recomenda focar no 75º percentil de carregamento de páginas, segmentado em dispositivos móveis e desktop. Isso significa buscar metas de desempenho para pelo menos 75% das visitas à sua página em cada categoria.

Essa abordagem garante que a maioria dos usuários tenha uma boa experiência em seu site. Ele considera fatores como velocidade de carregamento da página, interatividade e estabilidade do layout.

As ferramentas que verificam a conformidade do Core Web Vitals usam esse critério do 75º percentil para determinar se um site é aprovado. Atender a esses padrões nas métricas Core Web Vitals garante um bom desempenho para a maioria dos usuários, seja em dispositivos móveis ou desktops.

Distinguir entre dados de campo/laboratório

Compreender as nuances dos dados de campo e de laboratório é essencial para qualquer pessoa que pretenda otimizar o desempenho do site e, em última análise, gerar melhores resultados de negócios. Conhecer os pontos fortes e as limitações de cada tipo de dados é fundamental para desenvolver um site com bom desempenho em todos os cenários de usuário.

Dados de laboratório

Os dados de laboratório são coletados em um ambiente controlado, tornando-os ideais para depuração. Ele fornece condições consistentes para testes, o que pode ajudar a identificar e corrigir problemas de desempenho. No entanto, nem sempre representa experiências reais do usuário devido à sua natureza controlada.

Vantagens:

• Ideal para depurar problemas.
• Condições de teste consistentes permitem a resolução direcionada de problemas.

Desvantagens:

• Pode não refletir gargalos do mundo real.
• Limitado na captura de toda a gama de experiências do usuário.
• Ferramentas como Lighthouse e WebPageTest são comumente usadas para coletar dados de laboratório.

Dados de campo

Os dados de campo são coletados de usuários reais em seus ambientes naturais, oferecendo insights sobre experiências reais de usuários sob diversas condições. Ajuda a entender o desempenho do seu site no mundo real, mas pode oferecer métricas limitadas em comparação com os dados de laboratório.

Vantagens:

• Fornece um verdadeiro reflexo das experiências do usuário.
• Útil para compreender o desempenho em diferentes dispositivos e condições de rede.

Desvantagens:

• Conjunto limitado de métricas.
• Menos detalhado para fins específicos de depuração.

Para uma otimização eficaz do site, é crucial equilibrar os dados de laboratório e de campo. Os dados de laboratório auxiliam na identificação e resolução de problemas específicos em um ambiente controlado. Os dados de campo, por outro lado, oferecem insights sobre como os usuários reais interagem com o seu site em condições variadas. Os desenvolvedores devem usar dados de campo para orientar seus parâmetros de teste, como tipo de dispositivo e conexões de rede, para garantir que os testes reflitam as experiências reais do usuário. Essa abordagem ajuda na criação de um site com bom desempenho para a maioria dos usuários em cenários do mundo real.

Analisando cada uma das principais métricas

As métricas de desempenho da Web são ferramentas cruciais usadas para avaliar a eficácia e a experiência do usuário de um site. Essas métricas são amplamente categorizadas em três tipos: estáveis, pendentes e experimentais. Cada categoria desempenha um papel vital ao oferecer uma compreensão abrangente do desempenho de um site sob diferentes perspectivas.

Métricas estáveis

Maior pintura com conteúdo (LCP)

LCP é uma métrica de desempenho vital que se concentra na velocidade de carregamento de uma página da web da perspectiva do usuário. Ele mede o tempo que leva para o maior elemento de conteúdo de uma página, como uma imagem ou bloco de texto, carregar totalmente e se tornar visível depois que um usuário navega até a página.

A importância de uma boa pontuação LCP reside no seu impacto direto na experiência do usuário. Os usuários geralmente esperam que as páginas da web carreguem rapidamente, e um LCP lento pode causar frustração, resultando na saída dos usuários da página.

Para profissionais de marketing e proprietários de empresas, a otimização para um LCP eficaz (visando 2,5 segundos ou mais rápido) é crucial. Um LCP mais rápido ajuda a reter visitantes, reduzir as taxas de rejeição e melhorar o desempenho geral do site no alcance de seus objetivos de negócios, sejam vendas, geração de leads ou compartilhamento de informações.

Atraso da primeira entrada (FID)

FID é uma métrica usada para medir o tempo desde a primeira interação de um usuário com um site – como clicar em um link ou tocar em um botão – até o momento em que o site responde a essa interação. Essa métrica é essencial para avaliar a capacidade de resposta de um site. Um FID mais baixo significa que o site reage rapidamente, proporcionando uma melhor experiência ao usuário. Os sites devem buscar um FID de 100 milissegundos ou menos para garantir a capacidade de resposta.

Como um Core Web Vital estável, o FID quantifica a experiência que os usuários têm com páginas que não respondem. É crucial garantir que a página seja utilizável. Notavelmente, o FID será substituído pelo Interaction to Next Paint (INP) como Core Web Vital em março de 2024.

Mudança cumulativa de layout (CLS)

CLS é uma métrica estável do Core Web Vitals que mede a estabilidade visual de um site. Ele calcula a extensão das mudanças inesperadas de layout durante e após o processo de carregamento de uma página. Para uma experiência de usuário ideal, o objetivo é manter o CLS o mais baixo possível, de preferência em 0,1 ou menos.

As mudanças no layout de uma página da web geralmente ocorrem devido ao carregamento assíncrono de elementos ou adições dinâmicas à página. Essas mudanças podem atrapalhar a experiência do usuário, podendo levar a cliques acidentais e dificuldade de interação com o site. Um layout estável é particularmente crucial para manter uma experiência de usuário perfeita e incentivar a interação do usuário.

A importância do CLS vai além da experiência do usuário. Isso afeta diretamente as taxas de conversão, pois os usuários são menos propensos a interagir ou fazer compras em sites instáveis. Além disso, como o Google considera o CLS em seus Core Web Vitals para SEO, uma pontuação CLS baixa pode afetar negativamente a visibilidade do mecanismo de pesquisa de um site.

Primeira pintura com conteúdo (FCP)

FCP é uma métrica chave de desempenho da web que mede quanto tempo leva desde o momento em que um usuário navega até sua página até que o primeiro conteúdo fique visível na tela, seja um texto, uma imagem ou outro elemento. Ele serve como um indicador precoce da velocidade de carregamento da página, fornecendo o primeiro sinal aos usuários de que a página está carregando.

Um FCP rápido garante aos visitantes que a página está respondendo, o que pode reduzir as taxas de rejeição e aumentar a satisfação do usuário. Do ponto de vista de SEO, o Google inclui o FCP entre suas métricas de experiência do usuário para classificações de pesquisa. Melhores pontuações de FCP podem levar a classificações mais altas nos mecanismos de pesquisa, trazendo mais tráfego orgânico para seu site. Um site que carrega conteúdo rapidamente tem mais chances de reter visitantes e atingir seus objetivos de negócios online.

Tempo total de bloqueio (TBT)

TBT é uma métrica de laboratório para medir a capacidade de resposta de carregamento de um site, quantificando especificamente o tempo em que a página fica não interativa antes de se tornar totalmente interativa. Um TBT baixo é crucial para a usabilidade, pois melhora a experiência do usuário no site.

A métrica mede o tempo total desde o First Contentful Paint (FCP) até o Time to Interactive (TTI), onde o thread principal é bloqueado, impedindo uma resposta de entrada oportuna. Isso é semelhante a atrasos em uma loja física, refletindo a frustração que os usuários podem sentir online quando um site demora a responder a interações como cliques ou rolagem.

Métricas pendentes

Interação com a próxima pintura (INP)

Interaction to Next Paint (INP) está definido para substituir First Input Delay (FID) como Core Web Vital em março de 2024. INP mede o tempo desde a interação de um usuário com uma página da web até quando o navegador responde visivelmente, com foco na capacidade de resposta e interatividade da página.

A importância do INP reside no seu impacto na experiência do utilizador. Uma pontuação INP mais baixa significa um site mais responsivo, aumentando o envolvimento do usuário. Isto é particularmente importante para páginas web dinâmicas e complexas. A capacidade de resposta melhorada, indicada por uma boa pontuação INP, pode levar a melhores taxas de conversão e satisfação do cliente, cruciais para o crescimento do negócio.

A otimização para INP é fundamental para tornar um site mais fácil de usar, garantindo respostas mais fáceis e rápidas às interações do usuário e contribuindo para o sucesso de um negócio online.

Métricas experimentais

Tempo até o primeiro byte (TTFB)

TTFB é uma métrica de desempenho da web que mede a rapidez com que o navegador de um usuário recebe o primeiro byte de dados do seu servidor após solicitar uma página. Esse tempo começa quando um usuário clica em um link ou digita uma URL e termina quando os dados começam a chegar.

O TTFB é essencial tanto para a percepção inicial da velocidade do seu site quanto para a experiência geral do usuário. Um TTFB mais baixo ajuda a criar a sensação de um site de carregamento rápido, aumentando a satisfação do usuário. É menos provável que essa resposta rápida resulte na saída prematura dos usuários do site e seja mais provável que os mantenha engajados por sessões mais longas. Embora não seja um fator direto no algoritmo de classificação do Google, o TTFB contribui para a velocidade geral do site, o que é importante para o SEO.

Melhorar o TTFB requer foco nos tempos de resposta do servidor e na eficiência da rede. A otimização desses aspectos garante uma entrega mais rápida de dados ao usuário, crucial para uma experiência positiva e manutenção do engajamento em seu site. Para a maioria dos sites, buscar um TTFB de 0,8 segundos ou menos é ideal para garantir uma interação responsiva e eficiente do usuário.

Métricas desatualizadas

Hora de interagir (TTI)

O Time to Interactive (TTI) foi removido do Lighthouse 10 devido à sua variabilidade causada por solicitações de rede atípicas e tarefas longas. Esta mudança reflete a evolução contínua das métricas de desempenho da web, à medida que o foco muda para medidas mais confiáveis e consistentes da experiência do usuário.

A transição para métricas como Largest Contentful Paint (LCP), Total Blocking Time (TBT) e Interaction to Next Paint (INP) marca uma tendência em direção a métricas que representam com mais precisão a experiência do usuário em páginas da web. Essas métricas mais recentes são favorecidas por sua capacidade de fornecer uma avaliação mais estável e precisa de como os usuários interagem e experimentam um site.

Com a remoção do TTI das principais ferramentas de desempenho, como o Lighthouse 10, há uma indicação clara de que a comunidade de desempenho da web valoriza métricas que oferecem um melhor equilíbrio entre precisão e consistência. A partir de 2024, o TTI é considerado menos relevante em comparação com estas métricas mais recentes e mais representativas.

Ferramentas para medir o desempenho do site

Deixe-me compartilhar as principais ferramentas que usamos na Anadea quando trabalhamos nos sites dos clientes.

Extensão Web Vitals para Chrome

A extensão Web Vitals Chrome oferece uma maneira simples de medir as principais métricas de CWV com um clique. Ele fornece feedback instantâneo sobre métricas de carregamento, interatividade e mudança de layout, alinhando-se com os métodos de medição do Chrome e aqueles usados em outras ferramentas do Google, como o Relatório de experiência do usuário do Chrome, Page Speed Insights e Search Console.

Depois de instalada, a extensão exibe um emblema de ambiente em seu navegador. Este emblema possui três estados visuais para indicar o status de desempenho:

• Desativado (cinza)
• Passando (verde)
• Uma ou mais métricas falhando (vermelho)

Basta navegar até o site que deseja avaliar e o selo exibirá o status atual do Core Web Vitals.

Ao clicar no crachá, você pode acessar um relatório detalhado.

Este relatório combina seus dados locais do Core Web Vitals com dados de usuários reais em campo por meio da API Chrome UX Report (CrUX). Esse recurso fornece insights contextuais, ajudando você a comparar suas experiências individuais com as de outros usuários de desktop na mesma página, oferecendo uma visão abrangente do desempenho do site.

Insights de velocidade de página (PSI)

PageSpeed Insights (PSI) é um recurso do Google para analisar a experiência do usuário de uma página da web em dispositivos móveis e desktop. Ele oferece recomendações para melhorias e fornece dados de laboratório e de campo sobre uma página.

PSI simula condições de carregamento de página para medição de desempenho. Para dispositivos móveis, ele usa um dispositivo intermediário (Moto G4) em uma rede móvel e, para desktops, emula um desktop com conexão com fio. O ambiente de teste, incluindo condições de rede, é baseado em um data center do Google, e você pode visualizar detalhes como localização no bloco de ambiente do Lighthouse Report.

Usar o PSI é simples: visite o site do PSI, cole o URL da página que deseja testar no campo de entrada e clique em ‘Analisar’. O PSI fornece estatísticas do Core Web Vitals para dispositivos móveis e desktops, categorizando a qualidade da experiência do usuário como Boa, Precisa de melhorias ou Ruim. Pontuações de 90 ou mais são consideradas boas, de 50 a 89 precisam de melhorias e abaixo de 50 são ruins.

Um exemplo de uso de PSI com uma página da web mostra resultados distintos para desktop e dispositivos móveis. O desempenho do desktop pode ser bom, mas o desempenho móvel pode variar devido a fatores como recursos do dispositivo e condições da rede. Por exemplo, imagens de alta resolução que carregam bem em um desktop podem causar uma pontuação baixa no Largest Contentful Paint (LCP) em dispositivos móveis devido ao seu tamanho. Otimizar a primeira imagem para telas móveis pode melhorar as pontuações de LCP e First Contentful Paint (FCP).

Por exemplo, entre na página anadea.info, desktop:

A análise mostra que o desempenho da página é muito bom para usuários de desktop. No entanto, o PSI também destaca algumas áreas para melhoria:

Lembre-se de que as verificações em dispositivos móveis podem revelar resultados diferentes daqueles do computador. É crucial levar a sério a otimização móvel, já que muitos usuários acessam a Internet em seus dispositivos móveis e não em PCs.

A pontuação de 'desempenho' no celular geralmente não é tão boa quanto no desktop devido às diferentes velocidades da Internet (Internet com fio versus Internet móvel). Para melhorar isso, precisamos analisar o que está causando o mau desempenho.

Duas métricas importantes são o Tempo Total de Bloqueio (TBT) e a Pintura com Maior Conteúdo (LCP). Somente essas duas métricas compõem 55% da pontuação de desempenho.

Como consertar isto? Como já sabemos sobre o LCP, ele quantifica quanto tempo leva para o maior elemento de conteúdo (como uma imagem ou bloco de texto) de uma página se tornar totalmente visível quando o usuário abre a página. Nesta página LCP é uma imagem, provavelmente possui alta resolução (para PCs), o que é redundante para telas pequenas de celulares. A solução seria adicionar uma primeira imagem menor e mais otimizada para as telas dos celulares: isso melhorará o LCP e provavelmente também aumentará a pontuação do FCP.

Então, o Tempo Total de Bloqueio (TBT) pode ser afetado por scripts pesados ou desnecessários. Os diagnósticos PSI podem ajudar a identificar problemas como scripts não utilizados e interferência de scripts de terceiros. Abordar estes problemas pode melhorar as pontuações do TBT.

Se você estiver interessado em saber como o Google calcula a pontuação de ‘Desempenho’, veja a imagem abaixo.

O cálculo dá um peso significativo a métricas como TBT, LCP e Cumulative Layout Shift (CLS), que coletivamente podem impactar até 80% da pontuação. A partir disso, podemos concluir que monitorar e otimizar essas métricas é crucial para manter um bom desempenho nas versões mobile e desktop de um site.

Resultado final

Concluindo, Core Web Vitals são cruciais para o sucesso online do seu negócio. Eles garantem que seu site seja rápido, responsivo e agradável para os usuários. Isso não apenas melhora a experiência do usuário, mas também ajuda a obter melhores classificações de pesquisa e conversões mais altas.