O impacto comercial das Principais métricas da Web

Neste artigo, vamos ajudar você a entender como as Core Web Vitals se relacionam com as principais métricas de negócios, com exemplos de empresas que já notaram um impacto positivo para os usuários e os negócios delas.

Saurabh Rajpal
Saurabh Rajpal
Swetha Gopalakrishnan
Swetha Gopalakrishnan

LCP, FID, CLS

Você está com dificuldade para convencer as partes interessadas a adotar as Core Web Vitals? Ou está se perguntando se isso realmente ajuda sua empresa? Este artigo ajudará você a entender como as Core Web Vitals se correlacionam com as principais métricas de negócios, explorando exemplos de empresas que já tiveram um impacto positivo para os usuários e os negócios.

Se preferir um vídeo, confira esta palestra do Google I/O:

Por que as Core Web Vitals são importantes para seus usuários e sua empresa

Diferentes partes interessadas em uma organização podem ter prioridades diferentes. As Core Web Vitals podem colocar tudo na mesma página, concentrando-se na otimização das métricas centradas no usuário e no crescimento resultante dos negócios.

Pensando nas Core Web Vitals,

O caminho até uma boa Core Web Vitals pode variar de site para site, dependendo do ponto em que eles estão na jornada de performance e da complexidade do design do site. Isso pode variar desde a captura do fruto mais simples e a obtenção de resultados significativos, até a implementação de soluções complexas que corrigem problemas desafiadores. Independentemente do tempo gasto, os tomadores de decisão devem tratar isso como um investimento de longo prazo no crescimento dos negócios. Oferecer uma experiência de navegação rápida e perfeita encanta os usuários e ajuda a transformá-los em clientes fiéis e recorrentes. Para gerentes de produtos, o desempenho deve ser um critério importante que define a qualidade e o sucesso dos novos recursos do produto. A excelência do produto e trabalhar em desafios interessantes também melhoram a satisfação do desenvolvedor.

Embora as Core Web Vitals como um indicador de classificação sirvam mais motivação para investir tempo no desempenho, a adoção das Core Web Vitals oferece muitos outros benefícios, além da classificação, em curto e longo prazo. Vamos conferir vários estudos de caso de marcas globais e locais que adotaram as Core Web Vitals antes de afetar a classificação devido ao foco na experiência do usuário.

Estudos de caso

Vodafone

A Vodafone (Itália) melhorou a LCP em 31% para alcançar 8% mais vendas.

8% mais vendas

Técnicas

  • Renderização do HTML crítico no lado do servidor
  • Reduza o JavaScript de bloqueio de renderização.
  • Técnicas de otimização de imagens.
  • Redimensione a imagem principal e adie recursos não essenciais.

Principais aprendizados

  • O teste A/B é a melhor maneira de medir o impacto significativo.
  • A/B deve ser do lado do servidor.

iCook

A iCook melhorou o CLS em 15% para alcançar 10% mais receita de publicidade.

Gráfico mostrando o aumento da receita de publicidade.

Técnicas

  • Menos variabilidade no tamanho do bloco de anúncios e nos espaços de anúncio de tamanho fixo pré-alocados na interface.
  • Otimização da lógica de carregamento do script de anúncio para priorizar os lances do cabeçalho e adiar o JavaScript não essencial.

Principais aprendizados

A taxa de preenchimento pode ser afetada, mas, com o tempo, a receita aumenta com a melhoria da visibilidade dos anúncios.

Tokopedia

A Tokopedia melhorou a LCP em 55% e teve uma duração média da sessão 23% melhor.

Antes de 3,78s, depois de 1,72s

Técnicas

  • Elemento da LCP de renderização do lado do servidor (SSR).
  • Pré-carregue o elemento da LCP.
  • Otimização de imagens (compactação, WebP, carregamento lento de imagens não críticas).

Principais aprendizados

  • Criação de um painel de monitoramento de desempenho para monitorar o progresso e o impacto entre as equipes.
  • Teste diferentes técnicas de renderização, por exemplo, elemento LCP de SSR x conteúdo de SSR acima da dobra x renderização completa do lado do cliente.

Redbus

As correções nas Core Web Vitals contribuíram para taxas de conversão em dispositivos móveis de 80% a 100% (mCVR) e um aumento significativo na classificação de domínio nas propriedades de mercado global da Redbus.

Aumento de 192% na classificação do domínio em Colúmbia

Técnicas

  • A correção de espaços nos componentes da página e a remoção de scripts de inserção de tag não otimizados melhoraram a CLS.
  • A otimização de scripts de terceiros e a criação de microsserviços com o princípio de responsabilidade única reduziu significativamente o TTI e o TBT.

Principais aprendizados

  • Reduzir a CLS de 1,65 para 0 aumentou significativamente as classificações do domínio em todo o mundo.
  • A redução do TTI de cerca de 8 s para cerca de 4 s e TBT de cerca de 1.200 ms para cerca de 700 ms contribuiu para um aumento de 80 a 100% na mCVR em propriedades globais.
  • Usar ferramentas RUM ajudou a capturar as métricas de desempenho reais em mercados de nível inferior.
  • Adotar uma cultura de performance é muito importante para evitar regressão. Isso também melhora a produtividade da equipe graças ao código otimizado, lançamentos mais rápidos e menos problemas de produção.

Os estudos de caso acima mostram que você pode conseguir muito adotando práticas recomendadas e implementando ganhos rápidos. Aqui estão mais alguns exemplos deste ponto do mundo real.

A Netzwelt teve um aumento de 18% na receita de publicidade,
a Lazada conseguiu três vezes mais LCP e 16,9% de aumento na taxa de conversão em dispositivos móveis,
a GYAO teve uma LCP 3,1x maior e uma melhoria de 108% na taxa de cliques

Os resultados acima foram alcançados buscando opções fáceis, como:

Otimização de imagens Otimização do JavaScript Anúncios e conteúdo dinâmico
Como usar o formato de imagem WebP Adiar o JS de terceiros Como reservar espaço para anúncios acima da dobra
Como usar CDNs de imagem Como remover JS não utilizado e bloqueio de renderização Como configurar a altura do conteúdo dinâmico
Compactação Carregamento lento de JS não crítico
Como adiar imagens não críticas Pré-carregamento de JS essencial
Pré-carregamento de imagens principais
Como especificar a proporção

Para ver mais práticas recomendadas, confira as orientações sobre as Métricas da Web. Use o PageSpeed Insights para auditar seu site e receber recomendações práticas imediatamente.

Há várias outras marcas globais que também se beneficiaram do investimento nas Core Web Vitals.

Como você pode começar agora?

Etapa 1: começar a medir

Comece medindo os dados de campo do seu site com as ferramentas de monitoramento de usuários reais (RUM, na sigla em inglês). Já existem várias ferramentas RUM do Google e de terceiros (3P) disponíveis.

Ferramentas RUM

Ferramentas do Google RUM

  • Search Console
  • PageSpeed Insights
  • Biblioteca JavaScript web-vitals
  • Relatório de experiência do usuário (CrUX, na sigla em inglês) do Chrome

Ferramentas RUM de terceiros

  • Cloudflare
  • New Relic
  • Akamai
  • Calibre
  • Triângulo azul
  • Observatório
  • SpeedCurve
  • Raygun

Escolha a ferramenta ideal para você. Você pode ir além e fazer a integração com o Google Analytics 4 para correlacionar as Core Web Vitals com as métricas da sua empresa.

Etapa 2: Convença suas partes interessadas

  • Conscientize as partes interessadas sobre a importância de adotar as Core Web Vitals para melhorar a experiência do usuário e a correlação dela com as métricas de negócios da empresa.
  • Consiga um patrocinador internamente para iniciar um pequeno experimento.
  • Criar uma meta compartilhada entre as partes interessadas para melhorar as Core Web Vitals entre as equipes.

Etapa 3: realize uma implementação bem-sucedida usando estas dicas

  • Priorizar: escolha uma página com alto tráfego e/ou importância de conversão para gerar resultados significativos (por exemplo, página de destino dos anúncios, página de conversão ou páginas mais acessadas).
  • Teste A/B: use o teste do lado do servidor para evitar custos de renderização. Compare os resultados entre as versões otimizadas e não otimizadas.
  • Monitorar: use o monitoramento contínuo para evitar regressões.

Por fim, acreditamos que a performance é uma jornada, não um destino. Pensando nisso, planejamos manter este artigo atualizado com os destaques mais recentes sobre estudos de caso. Se você também tiver um negócio atrativo e quiser aparecer em destaque neste artigo, envie uma proposta de conteúdo.