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.
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.
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.
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.
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.
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.
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.
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.
- A Tencent Video teve uma CTR de 70% melhor nos vídeos com a aprovação nas Core Web Vitals.
- A Cdiscount melhorou todas as três métricas, o que contribuiu com um aumento de 6% na receita na promoção da Black Friday.
- A Wix aumentou as origens de dispositivos móveis ao passar pelas Core Web Vitals em mais de 250% ano a ano.
- A Nykaa descobriu que uma melhoria de 40% na LCP levou a 28% mais tráfego orgânico de cidades T2/T3.
- A melhoria de 18% da LCP da NIKKEI ESTILO resultou em 9% mais visualizações de página por sessão.
- A NDTV teve uma taxa de rejeição 50% melhor após reduzir pela metade a LCP, além de outras mudanças no produto..
- A LCP 70% melhor do Agrofy Market se correlacionou com uma redução de 76% no abandono de carga.
- A Flipkart atingiu uma redução de 2,6% na taxa de rejeição ao melhorar as métricas das Core Web Vitals.
- A Ameba Manga melhorou o número de quadrinhos lidos em 2 a 3 vezes, melhorando a pontuação de CLS 10 vezes.
- Central de Ajuda do Yahoo! Japan corrigiu a CLS, o que levou a uma redução de 98% nas páginas ruins e a um aumento de 15% nas visualizações de página por sessão.
- O AliExpress melhorou a CLS em 10 vezes e a LCP em duas vezes, resultando em taxas de rejeição 15% menores.
- A GEDI teve uma redução de 77% na CLS e de 8% na taxa de rejeição.
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 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.