Como a Trendyol reduziu o INP em 50%, resultando em um aumento de 1% na taxa de cliques

Este estudo de caso descreve um fluxo de trabalho passo a passo de depuração e melhoria do INP no React usado pela Trendyol, usando ferramentas do Google, como Insights do PageSpeed (PSI), Chrome DevTools e a API scheduler.yield.

Dois componentes essenciais de qualquer site de e-commerce são a página de listagem de produtos (PLP) e a página de detalhes do produto (PDP). O tráfego de e-commerce geralmente vem de páginas de informações do produto, seja por campanhas de e-mail, mídias sociais ou anúncios. Por isso, é fundamental garantir que a experiência do PLP seja projetada com cuidado para reduzir o tempo necessário para fazer uma compra. Priorizar a qualidade da experiência do usuário é essencial para ter sucesso. Publicações de pesquisa como Milliseconds Make Millions já revelaram o impacto significativo da performance da Web na disposição dos consumidores de gastar dinheiro e interagir com marcas on-line.

A Trendyol é uma plataforma de e-commerce com cerca de 30 milhões de clientes e 240 mil vendedores, o que nos tornou a primeira empresa da Turquia com uma avaliação de mais de US $10 bilhões e uma das principais plataformas de e-commerce do mundo.

Para alcançar o objetivo de oferecer a melhor experiência do usuário possível em grande escala, mantendo a flexibilidade do conteúdo e trabalhando com uma versão mais antiga do React, a Trendyol se concentrou na Interaction to Next Paint (INP) como uma métrica importante a melhorar. Este estudo de caso descreve a jornada da Trendyol para melhorar a INP no PLP, resultando em uma redução de 50% na INP e um aumento de 1% na métrica de resultados de pesquisa.

Processo de investigação de INP da Trendyol

O INP mede a capacidade de resposta de um site à entrada do usuário. Uma boa INP indica que o navegador é capaz de responder de forma rápida e confiável a todas as entradas do usuário e repintar a página, que é um componente importante de uma boa experiência do usuário.

A jornada da Trendyol para melhorar o INP no PLP começou com uma análise completa da experiência do usuário antes de qualquer melhoria. Com base em um relatório do PSI, a experiência do usuário real do PLP teve uma INP de 963 milissegundos em dispositivos móveis, conforme mostrado na próxima figura.

INP da Trendyol de acordo com a leitura do CrUX no PageSpeed Insights. O INP da Trendyol em 5 de setembro de 2023 foi de 963 milissegundos, o que está na faixa "ruim".
INP da Trendyol em 5 de setembro de 2023 do PSI.

Para garantir uma boa capacidade de resposta, os proprietários de sites precisam ter como meta uma INP abaixo ou igual a 200 milissegundos, o que significa que, naquele momento, a INP da Trendyol estava na faixa "ruim".

Felizmente, o PSI fornece dados de campo para páginas incluídas no Chrome User Experience Report (CrUX) e dados de diagnóstico detalhados do laboratório. Analisando os dados do laboratório, a auditoria de tempo de execução do JavaScript do Lighthouse sugeriu que o script search-result-v2 estava ocupando a linha de execução principal por mais tempo do que outros scripts na página.

Uma leitura das fontes de tarefas longas no Lighthouse para o site da Trendyol. Uma das principais fontes de tarefas longas é um script que processa os resultados da pesquisa na PLP da Trendyol.
Análise do tempo de execução do JavaScript do Trendyol no Lighthouse, de 5 de setembro de 2023, do PSI.

Para identificar gargalos reais, usamos o painel de desempenho nas Ferramentas do desenvolvedor do Chrome para resolver problemas na experiência de PLP e identificar a origem do problema. A emulação do desempenho de dispositivos móveis com uma desaceleração de 4X na CPU no Chrome DevTools revelou uma tarefa de 700 a 900 milissegundos na linha de execução principal. Se a linha de execução principal estiver ocupada com outras tarefas por mais de 50 milissegundos, ela pode não responder à entrada do usuário em tempo hábil, resultando em uma experiência ruim para o usuário.

Captura de tela de uma sessão de criação de perfil de desempenho no Chrome DevTools para o PLP da Trendyol. A tarefa longa mostrada é executada por 737, 6 milissegundos e faz parte de um callback do Intersection Observer.
Perfil de desempenho de tarefas longas no PLP da Trendyol no painel de desempenho do Chrome DevTools.

A tarefa mais longa foi causada por um callback da API Intersection Observer no script de resultados da pesquisa em um componente do React. Nesse ponto, começamos a dividir essa tarefa longa em pequenos blocos para dar ao navegador mais oportunidades de responder a trabalhos de maior prioridade, incluindo interações do usuário.

O uso da operação setState, que aciona a renderização do React dentro do callback do Intersection Observer, tem um custo alto, o que pode ser problemático para dispositivos de baixo custo, ocupando a linha de execução por muito tempo.

Um método que os desenvolvedores usam para dividir tarefas em tarefas menores envolve setTimeout. Usamos essa técnica para adiar a execução da chamada setState em uma tarefa separada. Embora a setTimeout permita adiar a execução do JavaScript, ela não oferece nenhum controle sobre a prioridade. Isso nos levou a participar do teste de origem scheduler.yield para garantir a continuação da execução do script após a cessão à linha de execução principal:

/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
  if('scheduler' in window && 'yield' in scheduler) {
    return await scheduler.yield();
  }

  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
  entries.forEach(handleIntersection);
  const maxNumberOfEntries = Math.max(...this.intersectingEntries);

  if (Number.isFinite(maxNumberOfEntries)) {
    await this.yieldToMain();

    this.setState({ count: maxNumberOfEntries });
  }
}, { threshold: 0.5 });

A adição desse método de rendimento ao código PLP resultou em uma INP melhor, já que a tarefa longa principal foi dividida em uma série de tarefas menores, o que permite que trabalhos de maior prioridade, como interações do usuário e renderização subsequente, aconteçam mais cedo do que aconteceriam.

Captura de tela de uma sessão de criação de perfil de desempenho no Chrome DevTools para o PLP da Trendyol. A tarefa longa que antes era executada por 737,6 milissegundos agora é dividida em várias tarefas menores.
A tarefa é dividida em tarefas menores.

A Trendyol usa o framework PuzzleJs para implementar uma arquitetura de microfront-end com o React v16.9.0. Com o React 18, a mesma performance poderia ser conseguida, mas, por vários motivos, a Trendyol não pode fazer upgrade no momento.

Resultados de negócios

Para medir o impacto da melhoria implementada do INP, realizamos um teste A/B para ver como as métricas de negócios foram afetadas. No geral, nossas mudanças na PLP resultaram em uma melhoria significativa, incluindo uma redução de 50% do INP e um aumento de 1% nas taxas de cliques da página de listagem para a página de detalhes do produto por sessão de usuário. Na figura a seguir, é possível ver como a INP melhorou no PLP ao longo do tempo:

Uma captura de tela do INP de 75º percentil da Trendyol ao longo de seis meses. Ao final dos seis meses, o INP da Trendyol diminuiu para quase 650 milissegundos,de quase 1.400 milissegundos.
Melhorias de INP no percentil 75 ao longo do tempo.

Conclusão

Otimizar o INP é um processo complexo e iterativo, mas pode ser facilitado com um fluxo de trabalho claro. Uma abordagem simples para depurar e melhorar o INP do seu site depende se você está coletando seus próprios dados de campo. Se não forem, o PSI e o Lighthouse são um bom ponto de partida. Depois de identificar páginas com problemas, use o DevTools para tentar reproduzir os problemas.

A rendição para a linha de execução principal de tempos em tempos para dar ao navegador mais oportunidades de fazer trabalhos urgentes vai tornar seu site mais responsivo, garantindo que seus clientes tenham uma melhor experiência do usuário. APIs de programação mais recentes, como scheduler.yield(), facilitam essa tarefa.

Agradecemos especialmente a Jeremy Wagner, Barry Pollard e Houssein Djirdeh do Google e à equipe de engenharia da Trendyol pela contribuição a este trabalho.