Como a redBus melhorou a interação do site com a próxima pintura (INP) e aumentou as vendas em 7%

As otimizações de INP ajudaram a redBus a aumentar as vendas em cerca de 7%

Amit Kumar

Saurabh Rajpal

A Web e seus recursos estão evoluindo rapidamente. Agora você pode criar experiências ricas e completas na Web que podem alcançar grande parte dos recursos dos aplicativos nativos.

O JavaScript é um dos principais mecanismos de interatividade na Web, mas, se não for usado com cuidado, as interações podem parecer lentas e fazer com que os usuários percebam que o site não responde ou está quebrado. Felizmente, a métrica Interaction to Next Paint (INP) foi criada para resolver esse problema específico de experiência do usuário.

A INP mede todas as interações feitas com uma página durante o ciclo de vida dela e informa um único valor que representa a velocidade de um site ao responder às entradas do usuário. Simplificando, se a INP de uma página estiver no limite aceitável ou abaixo dele, todas as interações feitas com a página podem ser consideradas confiáveis e rápidas.

A redBus, um site de reserva e venda de passagens de ônibus com sede na Índia, fez um esforço considerável para melhorar o INP do site, mesmo quando ele ainda era considerado uma métrica experimental. Como resultado, eles conseguiram aumentar as vendas em 7%, ilustrando mais uma vez a relação entre a performance da Web e a saúde do negócio. Confira o que a redBus fez para melhorar o INP do site.

Metas principais

Quando a redBus decidiu otimizar o INP do site, ela tinha três objetivos em mente:

1. Ofereça uma melhor experiência do usuário se concentrando na latência de interação, independentemente da velocidade da rede e dos recursos do dispositivo.
2. Otimizar o site para manter as interações o mais rápidas possível.
3. Garanta que as respostas da API sejam o mais leves possível para garantir a transferência rápida de dados para o front-end.

A jorna

A redBus classificou a latência de interação de duas maneiras:

1. Latência de interação causada pelo bloqueio do JavaScript no cliente. Quando as interações usam JavaScript em excesso que bloqueia a linha de execução principal, a renderização é atrasada, o que afeta a INP de uma página.
2. Latência da rede causada por chamadas de API. Embora a atividade de rede não seja algo que a INP meça, uma interação que depende de uma chamada para uma API remota pode parecer lenta em redes mais lentas ou se as solicitações resultarem em respostas grandes.

Inicialmente, a redBus estava confiante de que o INP do site seria bom, mas os dados do Monitoramento de usuários reais (RUM) para essa métrica na 95ª percentila contaram uma história diferente.

Como o redBus mediu o INP

A redBus usou a biblioteca JavaScript web-vitals criada pelo Google para acompanhar não apenas o INP, mas também todas as métricas importantes de experiência do usuário em todas as páginas do site. Além da biblioteca JavaScript web-vitals, a redBus usou o ELK para analisar os dados de INP coletados no front-end.

No entanto, a forma como você rastreia o INP do seu site no campo pode ser muito diferente da abordagem da redBus. Recomendamos que você leia sobre como encontrar interações lentas no campo para saber como rastrear melhor a INP nos seus sites e, em seguida, como reproduzi-las no laboratório antes de começar a otimizar interações.

Depois que a redBus implementou um sistema para rastrear a INP, ela conseguiu analisar os dados para entender melhor onde a interação lenta estava presente.

Uma captura de tela do sistema de registro usado pela redBus para analisar os valores de INP coletados no campo. Clique para ver uma versão com resolução mais alta desta imagem.

Casos de uso

Quando os usuários pesquisam tarifas no site da redBus, eles podem mudar a data na página de pesquisa para filtrar as tarifas selecionadas para o destino desejado. A interação para mudar a data nessa página foi lenta e causou uma INP ruim.

Além disso, quando um usuário rola a tela pelas tarifas, outras tarifas são carregadas de forma lenta pela API. Embora a rolagem não seja considerada na forma como a INP é medida, o próprio listener de eventos scroll programa muito trabalho que precisa ser executado na linha de execução principal. Esse trabalho estava causando contenção na linha de execução principal, o que aumentou a latência de interação, levando a um INP ruim na página de pesquisa.

O comportamento de carregamento lento usado para carregar tarifas adicionais da API ao rolar a tela. Clique para assistir a uma versão deste vídeo em alta resolução.

Como a redBus otimiza a INP para a página de pesquisa

Para melhorar o INP da página de pesquisa, a redBus fez várias otimizações:

• O manipulador de eventos scroll foi desativado para reduzir a quantidade de vezes que o callback do evento seria acionado em um determinado período. Ao diminuir a frequência em que o callback de evento scroll era executado, a linha de execução principal conseguiu responder mais rapidamente às interações do usuário na página de pesquisa.
• O trabalho de renderização resultante foi priorizado usando um callback requestAnimationFrame. requestAnimationFrame informa ao navegador que o trabalho no callback precisa ser feito antes do próximo frame.

Antes: manipuladores de rolagem disparados sem debouncing aplicado ao callback de evento. Um número considerável de tarefas de bloqueio na linha de execução principal está presente, o que atrasa as interações.

Depois: os manipuladores de rolagem são acionados com a debouncing aplicada. Os callbacks de eventos de rolagem são disparados com menos frequência, à linha de execução principal mais oportunidades para responder às interações do usuário.

Além disso, as seguintes otimizações foram feitas na página de resultados da pesquisa:

• Novos lotes de resultados foram buscados no segundo ao último card na página de resultados da pesquisa para melhorar a experiência do usuário e o desempenho visual, ativando o carregamento lento mais cedo.
• Menos resultados foram buscados em cada chamada de rede durante o carregamento lento. Ao reduzir as buscas de 30 para 10 resultados, foi observada uma redução nos intervalos de INP de 870 a 900 para 350 a 370.

O comportamento de carregamento lento usado para carregar tarifas adicionais da API ao rolar a tela. Clique para assistir a uma versão deste vídeo em alta resolução.

Embora essas mudanças tenham melhorado significativamente a INP da página de pesquisa, ainda havia o problema em que o evento change nos campos de entrada da página de pesquisa chamava uma função de redutor cara para atualizar a interface do usuário. Isso resultou em uma renderização desnecessária da interface do usuário, o que afetou o INP da página.

O console informa os valores de INP enquanto o usuário digita em um campo de entrada. O valor de INP resultante de 344 observado em uma configuração de laboratório está dentro dos limites "melhoria necessária". Clique para assistir a uma versão deste vídeo em alta resolução.

Para otimizar essa interação, a redBus gerenciava o estado dos componentes de entrada localmente e o sincronizava com a loja Redux somente quando o evento blur de uma entrada era acionado. Essa mudança reduziu o número de renderizações e eliminou a renderização indesejada da interface do usuário chamando o redutor com menos frequência.

Melhoria da INP como resultado de chamar o redutor com menos frequência em uma mudança de campo de entrada. Clique para assistir a uma versão deste vídeo em alta resolução.

Com essa mudança, o INP da página melhorou em 72%, resultando em uma experiência do usuário mais rápida e fácil, o que aumenta a probabilidade de interação.

Impacto nos negócios

A relação entre a saúde da empresa e a performance da página é bem conhecida. Embora a INP seja uma métrica relativamente nova em comparação com outras Core Web Vitals, a redBus observou melhores resultados de negócios ao se concentrar em melhorar essa importante métrica de performance centrada no usuário. O resultado foi um aumento geral de 7% nas vendas.

Em resumo, o INP ajudou a identificar problemas de desempenho no momento da execução no site da redBus. Sabendo que precisava fazer melhorias, a redBus observou o problema, reproduziu-o e usou essas informações cruciais para fazer otimizações que foram benéficas para a empresa.