A equipe analisou dados de 10 milhões de visitas nas páginas de destino e encontrou uma forte correlação entre a Maior exibição de conteúdo e a taxa de conversão.
O Groupe Renault é uma multinacional francesa de automóveis com presença em mais de 130 países. Para um grupo automotivo como a Renault, sites de marca com bom desempenho que geram mais engajamento do usuário e conversões significam mais negócios. Todos os sites da marca têm como objetivo fornecer a melhor experiência do usuário em grande escala, mantendo a flexibilidade de conteúdo e recursos para sites localizados. Nesse contexto, o monitoramento de desempenho é uma peça chave para a equipe de experiência do cliente, encarregada de desenvolver e manter a plataforma global.
Como medir o impacto das Core Web Vitals nos negócios
Medição no Google Analytics
Trabalhando com a 55, a parceira global de dados, a Renault configurou a biblioteca web-vitals, que permite enviar ao Google Analytics todas as métricas da Web Vitals de usuários reais de uma maneira que corresponda precisamente à forma como elas são medidas pelo Chrome e informadas para outras ferramentas do Google.
A análise a seguir mostra um conjunto de dados capturado usando essas ferramentas ao longo de quatro meses entre dezembro de 2020 e março de 2021.
A LCP otimizada tem forte correlação com o engajamento do usuário e as métricas de negócios
As equipes identificaram uma correlação particularmente forte entre uma baixa exibição de conteúdo (LCP) e taxas de rejeição e taxas de conversão favoráveis, mostradas na visualização abaixo.
O conjunto de dados captura mais de 10 milhões de visitas em 33 países durante quatro meses e mostra como as medidas de LCP mais baixa estão relacionadas com:
- Taxas de rejeição mais baixas
- Mais conversões (formulários de lead preenchidos)
Curiosamente, como o site é executado como um aplicativo de página única (SPA), todas essas medidas são capturadas apenas nas páginas de destino. Os dados mostram que vale a pena otimizar o site até que a LCP fique abaixo de 1 segundo. Os sites da marca do grupo nunca podem ser otimizados demais!
Esse conjunto de dados mostra a correlação negativa entre a LCP e as métricas de negócios, mas também destaca discrepâncias de performance entre as páginas de destino com melhor performance. No contexto deste site, ter a LCP abaixo de 1 segundo leva a grandes aumentos nas conversões e reduções na rejeição.
Eja Rakotoarimanana, consultor, 55
Uma melhoria de 1 segundo na LCP pode levar a uma diminuição de 14 pontos percentuais (p.p.) na taxa de rejeição e um aumento de 13% nas conversões.
| Melhoria de LCP em 1 segundo | Resultado |
|---|---|
| LCP em torno de 1 s | +13% de CVR |
| LCP menor de 1,6 s | Taxa de rejeição de -14 p.p. |
| LCP acima de 1,6 s | -5 p.p. de taxa de rejeição |
A abordagem da Renault para otimizar as Core Web Vitals em grande escala
Desde o início de 2020, nos cinco principais mercados europeus da marca, o número de visitantes com uma LCP rápida (menos de 2,5 s) melhorou em média de 22 ppt para domínios da Renault (de 51% para 73%).
Veja como eles fizeram isso.
Uma otimização central do SPA
Do ponto de vista da plataforma, o desempenho tem sido uma prioridade há anos, e incluir as Core Web Vitals como métricas foi um processo tranquilo. As equipes da Central configuraram uma solução de monitoramento abrangente (com o Google Lighthouse e a API Chrome UX Report) e estabeleceram uma cultura de desempenho em toda a organização. Havia várias estratégias para otimizar o aplicativo de página única, incluindo:
- Renderização do lado do servidor (SSR, na sigla em inglês) para garantir uma primeira exibição de conteúdo (FCP, na sigla em inglês) rápida.
- Divisão de código para exibir apenas os blocos JS e CSS necessários à página de destino (para melhorar a LCP e a FID).
- CDN com um alto nível de armazenamento em cache de recursos (incluindo Lambda@Edge para classificar e remover parâmetros de consulta desnecessários). Isso ajudou a evitar as desvantagens da SSR (TCF mais lento devido à computação do servidor) e a entregar conteúdo mais próximo do usuário final (para melhores TTFB e LCP).
- Como otimizar a compactação com brotli para reduzir o tamanho do código.
- HTTP2 para ativar a multiplexação de solicitações e respostas.
- Use imagens responsivas com suporte a WebP e atributos
srcsetesizespara veicular o tamanho e o formato de imagem mais adequados aos usuários. - Carregamento lento de imagens, vídeos e iframes usando
IntersectionObservere FPOs (miniaturas pequenas de 1 KB). - Remova scripts de bloqueio e ajuste a transcompilação de acordo com os destinos do navegador para reduzir o tamanho dos arquivos JS (evitando polyfills desnecessários).
- Reduzir o tamanho do contêiner do Gerenciador de tags do Google para carregar scripts de terceiros somente onde e quando necessário.
- Reduzir o número de fontes personalizadas, usar formatos woff/woff2 com unicode-range e
font-display:swappara reduzir o tamanho dos arquivos de fontes e mostrar o texto o mais rápido possível, mesmo que fontes personalizadas ainda não estejam disponíveis. - Pré-carregamento de imagens principais, que geralmente são elementos LCP.
A equipe ainda está trabalhando em melhorias futuras, como:
- Envio de push do servidor para melhorar a FCP, fornecendo CSS mais rápido. (Em espera devido à falta de suporte da AWS e à proposta de descontinuação.
- Hidratação progressiva para melhorar a FID.
- Suporte ao módulo ES6 para proporcionar uma experiência mais rápida usando builds ES6 para navegadores modernos.
A abordagem de SPA pode ser benéfica para o desempenho, pois a atualização completa da página não é necessária quando os usuários navegam pelas páginas. Dito isso, as metodologias atuais de medição das Core Web Vitals em SPA podem ser percebidas como uma desvantagem, já que as transições de rota não são medidas. Portanto, os carregamentos de página comparativamente mais rápidos em uma sessão devido ao armazenamento em cache da interface não são considerados. Também dificulta a comparação das Core Web Vitals com o site de um concorrente de aplicativo de várias páginas, em que um cache quente reduz as medidas em cada página em que um usuário navega durante uma sessão. Leia as Perguntas frequentes sobre o SPA de Métricas da Web para mais detalhes.
Essas são limitações conhecidas que estão sendo investigadas pelas equipes de produtos do Chrome. Já enviamos uma atualização da métrica de CLS para melhorar a medição dos SPAs.
O desempenho requer monitoramento constante, porque várias equipes técnicas podem afetá-lo. Apesar das limitações em como eles são medidos em SPAs, as Core Web Vitals permitem rastrear o impacto das ações tomadas por nossas equipes. Esperamos que as transições de rota sejam consideradas em breve.
Cedric Bazureau, líder de tecnologia, Renault
Diretrizes locais que promovem a otimização da performance como uma responsabilidade compartilhada
O desempenho é comunicado como uma responsabilidade global (central) e local. As equipes elaboraram uma série de práticas recomendadas que os proprietários de conteúdo locais precisam seguir. Veja alguns exemplos dessas diretrizes:
- Otimizar o contêiner local do Gerenciador de tags do Google para melhorar a performance do site, por exemplo, acionar certas tags condicionalmente.
- Para limitar o tamanho do conteúdo de vídeo, compacte-o com ferramentas internas ou hospede-o em uma plataforma externa (como o YouTube).
- Evite fazer upload de imagens pelo Gerenciador de tags do Google.
Entender em detalhes nosso desempenho digital é fundamental para garantir uma otimização contínua dos sites da nossa marca. A abordagem da nossa equipe de experiência do cliente é fornecer uma plataforma global que impacte positivamente os resultados de negócios das equipes locais, além de capacitar essas equipes com diretrizes e práticas recomendadas para manter esse desempenho em alto nível.
Alexandre Perruche, diretor de desempenho da Renault
Para concluir, a performance do site sempre foi uma prioridade na Renault, e a plataforma do site é continuamente otimizada. Ao medir as Core Web Vitals junto com as métricas de negócios, a empresa conseguiu promover esse assunto como uma responsabilidade compartilhada globalmente, e as diretrizes locais permitem que as equipes participem desse esforço benéfico.