Como o varejista de moda e-commerce correlacionou as Core Web Vitals e as métricas de desempenho às métricas de negócios, notou um aumento nos KPIs e criou uma "Calculadora de caso de negócios de desempenho" para orientar as decisões do produto e uma cultura de performance.
Dentro de muitas empresas, o desempenho da velocidade do site e as Core Web Vitals ainda são vistos principalmente como responsabilidade das equipes de engenharia. A velocidade do site pode se tornar invisível para outras áreas do negócio se o valor da experiência do negócio e da experiência do cliente não for compreendido. Isso pode fazer com que o desempenho seja negligenciado quando as decisões principais são tomadas e os roteiros são definidos.
Para melhorar a cultura de desempenho entre as equipes e impulsionar melhorias significativas na experiência na Web, a varejista de moda de comércio eletrônico de luxo Farfetch lançou um projeto para definir e usar métricas de desempenho verdadeiras centradas no cliente. O objetivo era correlacioná-las às métricas de negócios para esclarecer como o desempenho afeta os KPIs da empresa.
No entanto, suas ambições não paravam por aí. Em última análise, o objetivo do projeto era a mudança cultural em grande escala, quebrando os silos dentro da organização e introduzindo uma nova linguagem orientada aos negócios para oferecer a todos uma maneira compartilhada de falar sobre o que costumava ser considerado tópicos técnicos. A Farfetch queria ter o desempenho da velocidade do site como uma responsabilidade compartilhada, facilitar a tomada de decisão informada e estabelecer isso como um pilar principal do que torna uma boa experiência na Web.
Para começar, a Farfetch percebeu que um único departamento não poderia fazer isso como antes e reuniu uma equipe principal de especialistas de várias áreas da empresa (engenharia, infraestrutura, arquitetura e produto) que implementou uma estratégia passo a passo para reformular a abordagem da empresa nesse assunto.
Etapa 1: como definir, medir e monitorar métricas
Em primeiro lugar, a Farfetch precisava ter as ferramentas de monitoramento certas para entender o estado atual e os desvios entre pontos de contato e aplicações da jornada.
A empresa usou dados de laboratório e monitoramento de usuário real (dados de campo) para monitorar as Core Web Vitals e outras métricas de desempenho centradas no usuário para analisar o estado atual da velocidade. A equipe usou JavaScript e a biblioteca web-vitals.js para capturar os dados. Assim, a equipe de análise de produtos conseguiu conferir as métricas de desempenho e de negócios na mesma sessão e, assim, começar a analisar como uma afeta a outra.
O grupo multidisciplinar decidiu entender quais métricas eram mais importantes para a empresa. Para isso, analisou o caminho crítico da jornada dos usuários da Farfetch e tentou vincular essa jornada aos marcadores de performance. Além das métricas das Core Web Vitals descritas pelo Google, cada uma representando uma característica distinta da experiência do usuário, elas também usaram JavaScript personalizado para rastrear Tempo até o primeiro byte (TTFB, na sigla em inglês), Primeira exibição de conteúdo (FCP, na sigla em inglês), primeira exibição e Tempo para interação da página (TTI, na sigla em inglês).
As métricas são coletadas usando vários métodos da API Performance, da API Long Tasks e dos polyfills do Google. Mais detalhes podem ser encontrados nesta postagem do blog de tecnologia da Farfetch em meados de 2020 (em inglês) de Manuel Garcia, engenheiro principal sênior para a Web.
Com relação à análise de dados, a Farfetch tem sua própria solução de rastreamento multicanal, usada por aplicativos de front-end, chamada Omnitracking. Ele rastreia os eventos gerados por visualizações de página, ações do usuário e ações do sistema. O modelo de dados Omnitracking é a solução da Farfetch para casos analíticos, de exploração de dados e de relatórios, feita com base nos eventos gerados pelos rastreadores. O objetivo do modelo de dados é ajudar e apoiar qualquer pessoa que precise entender:
- Comportamento do usuário
- Experiência do usuário em aplicativos Farfetch
- Uso de aplicativos
- Macro e microconversões
- Análise cross-channel e de funil
A ideia era, então, adicionar a essa camada de dados os dados de desempenho de cada exibição de página no farfetch.com, capturados pelo JavaScript,. Esse modelo garantiu uma correspondência entre os dados de performance e as principais métricas do funil de conversão para cada sessão e a base para uma análise detalhada sobre o assunto.
Por fim, a Farfetch estabeleceu orçamentos de desempenho baseados em tempo para cada métrica nas principais páginas da jornada e um processo de governança para lidar com violações de orçamento. Eles também começaram a incorporar métricas de desempenho em pipelines de CI para entender desvios de orçamento o mais rápido possível no fluxo de desenvolvimento.
Etapa 2: comunicação usando a linguagem comercial
Com os dados de desempenho disponíveis nos conjuntos de dados internos de inteligência de negócios da Farfetch, a equipe de análise começou a explorar modelos e padrões matemáticos nos dados que poderiam indicar uma correlação entre métricas de desempenho e KPIs de negócios (por exemplo, taxa de conversão e porcentagem de visitas a uma única página), permitindo uma nova visão do impacto financeiro da velocidade do site e da experiência do usuário para os negócios. Isso permitiu que o desempenho fosse discutido em uma linguagem comum com os tomadores de decisão de negócios. A análise incluiu todas as Core Web Vitals e outras métricas consideradas valiosas pela Farfetch. Ele revelou insights realmente impactantes.
Como o Google recomenda que a Maior exibição de conteúdo (LCP) fique abaixo de 2,5 segundos para oferecer uma experiência do usuário ideal, a Farfetch estudou esse limite com cuidado e encontrou resultados significativos.
A análise de correlação estatística da Farfetch mostrou que, além desse ponto, a taxa de conversão começa a cair, assim como a taxa de saída aumenta. Isso mostra que os usuários realmente começam a sentir a desvantagem de uma percepção de carregamento de página lento, e que a taxa de conversão diminui em média -1,3% a cada 100 ms a mais de LCP.
A Farfetch também verificou uma redução na taxa de saída de -3,1% para cada 0,01 a menos na pontuação Cumulative Layout Shift (CLS), reafirmando o impacto da estabilidade da página para manter os usuários em um site.
Em relação à interatividade e à fluidez da página, embora a latência na primeira entrada (FID, na sigla em inglês) seja rastreada e analisada continuamente, a Farfetch também mede o TTI, o que provou ser uma métrica consideravelmente impactante para o funil de conversão de negócios da empresa.
Para isso, o polyfill de TTI do Google foi injetado no site para armazenar essa métrica. Uso da API Long Tasks para relatar tarefas longas (tarefas que levam mais de 50 milissegundos na linha de execução principal do navegador).
A equipe de análise descobriu, então, que a taxa de conversão aumentava 2,8% para cada segundo de redução no TTI, o que justificava a melhoria da eficiência do código e a liberação da linha de execução principal do navegador.
No fim, a análise também mostrou que algumas métricas não têm um impacto significativo nos KPIs de negócios ou que outras seriam mais relevantes em diferentes estágios da jornada do usuário. Assim, foi possível ter um entendimento completo das oportunidades disponíveis em cada ponto do funil de conversão.
Etapa 3: incorporar mudanças culturais
Apresentar os insights acima junto com pesquisas qualitativas sobre a percepção dos usuários sobre a velocidade do site foi fundamental para estabelecer o alinhamento com as metas da empresa, garantir o reconhecimento no nível executivo e a adesão para a tomada de decisões com base na performance nos roteiros dos produtos. Agora era possível provar o valor do desempenho para a Farfetch.
Para simplificar a priorização, a Farfetch criou uma ferramenta de autoatendimento chamada de Calculadora de caso de negócios de velocidade do site. Ela se inspirou na Calculadora de impacto de velocidade do Google. Ela permite que qualquer gerente de produto crie um caso de negócios a partir das melhorias de desempenho calculando o impacto nos negócios em tempo real. Com um modelo de dados que usa a correlação entre taxa de conversão e métricas de experiência do usuário, ele é flexível para se adaptar a diferentes escopos de produtos, dispositivos e pontos de contato da jornada do usuário.
Enquanto isso, um conjunto de painéis analíticos de autoatendimento criaram visibilidade em toda a empresa dos indicadores de desempenho em tempo real e do impacto deles nos negócios. O desempenho agora está sendo totalmente incorporado ao desenvolvimento de produtos, e as equipes de produtos têm acesso fácil a métricas, ferramentas de auditoria e monitoramento de orçamento de desempenho. Além disso, devido à integração da camada de dados, as métricas de desempenho também estão disponíveis nas ferramentas de teste A/B da Farfetch, proporcionando aos gerentes de produto ainda outro poderoso vetor de insights.
Nos últimos meses, a equipe principal também está no caminho certo para estabelecer essa cultura não apenas nas equipes de desenvolvimento front-end, mas também dentro do domínio da plataforma, usando metodologias semelhantes para monitorar e provar o impacto dos principais microsserviços e transações.
Houve uma série de apresentações orientadas pelo Farfetch sobre esse tópico, além de menções externas. Por exemplo, uma menção em uma palestra do Google I/O de 2021 sobre o impacto das Core Web Vitals nos negócios. Isso também contribuiu para dar relevância contínua ao tema e solidificou a estratégia da equipe sobre cultura.
Etapa 4: como melhorar as métricas
No final, todo esse trabalho precisava contribuir para a Farfetch melhorar objetivamente as métricas de velocidade do site e garantir que suas equipes seguiriam as melhores práticas da categoria e buscariam oportunidades de aprimoramento.
Uma das principais oportunidades detectadas em 2021 foi a necessidade de melhorar a LCP nos dois principais tipos de página da Farfetch: páginas de produtos e páginas de informações do produto.
As equipes abordaram como carregavam o conteúdo principal dessas páginas. Municiados com um caso de negócios que mostrou o impacto de buscar essa oportunidade, eles foram capazes de:
- Adapte o componente de carregamento de imagem do produto de uma solução baseada em JavaScript para uma implementação nativa.
- Defina a prioridade das imagens e divida-as em ativos críticos e não críticos.
- Carregue imagens essenciais com antecedência, com a fonte já inline no HTML e usando
<link rel="preload">para que o download seja feito o mais rápido possível. - Use o atributo
<img loading="lazy">para imagens não críticas, com um polyfill usando o Intersection Observer em navegadores sem suporte, como o Safari.
Assim, a empresa conseguiu fazer valer a pena e comprovar a hipótese e o impacto nos negócios por meio de testes A/B. Nas páginas de produto, por exemplo, esse esforço reduziu mais de 600 ms, e o teste A/B mostrou um aumento na taxa de conversão no intervalo de 1% a 5% com o nível de confiança definido pela empresa.
Veja abaixo as melhorias que a equipe conseguiu fazer em termos da porcentagem de visualizações de página que são consideradas "boas", "precisam de melhorias" e "ruins", com base na definição do Google para pontuação de LCP.
As recompensas de um site mais rápido e melhores práticas de trabalho
Ao construir uma cultura em torno do desempenho e ferramentas como a calculadora de caso de negócios, foi possível começar a falar uma linguagem compartilhada que pode ser entendida por gerentes de produto, partes interessadas e engenheiros. Isso impulsionou discussões contínuas sobre como priorizar novas iniciativas e melhorias de desempenho.
"Queríamos quebrar o ciclo de desempenho que era uma preocupação somente de tecnologia, algo que pertence apenas à equipe de engenharia para lidar e corrigir", explica Rui Santos, gerente de produtos sênior de Canais da Web da Farfetch. "Conectar métricas de desempenho às métricas de negócios foi surpreendentemente eficaz para transmitir a mensagem com muita rapidez. Os negócios impulsionam a empresa, e conectar o sucesso às métricas de velocidade incentivou um conjunto mais amplo de partes interessadas a entender e lidar com as decisões de compensação."
No segmento de comércio eletrônico de luxo, o fato de o site ser rápido ou lento pode ditar como os consumidores veem sua marca e a qualidade do serviço como um todo. Para os usuários, qualidade significa luxo e isso se aplica a todos os aspectos da experiência, incluindo o desempenho do seu site. Com a velocidade do site produzindo um efeito comprovado na taxa de conversão, o desempenho agora ocupa uma posição segura no planejamento futuro na Farfetch.