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 em ritmo acelerado. Agora você pode criar experiências ricas e completas na Web que podem alcançar muito do que os aplicativos nativos podem em termos de capacidades.

O JavaScript é o principal impulsionador da interatividade na Web. No entanto, se não usado com cuidado, as interações podem parecer lentas e levar os usuários a perceber que o site não responde ou não apresenta falhas. Felizmente, a métrica Interaction to Next Paint (INP) foi criada para resolver esse problema específico de experiência do usuário.

O INP mede todas as interações feitas com uma página durante o ciclo de vida dela e informa um valor único que representa a velocidade do site na resposta às entradas do usuário. Resumindo, se o INP de uma página estiver no limite bom ou abaixo dele, todas as interações feitas com ela serão consideradas rápidas.

A redBus, um site de reservas e passagens de ônibus com sede na Índia, realizou um esforço significativo para melhorar o INP do site, mesmo quando ainda era considerada uma métrica experimental. Como resultado desses esforços, eles conseguiram aumentar as vendas em 7%, ilustrando mais uma vez a relação entre o desempenho na Web e a integridade dos negócios. Veja o que o redBus fez para melhorar o INP do site.

Principais metas

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 focando 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ápido possível.
3. Garantir que as respostas da API sejam as mais leves possível para garantir uma transferência de dados rápida para o front-end.

A jorna

A latência de interação categorizada do redBus de duas maneiras:

1. Latência de interação causada pelo bloqueio do JavaScript no cliente. Quando as interações usam JavaScript excessivo que bloqueia a linha de execução principal, a renderização é atrasada, e isso afeta o INP de uma página.
2. Latência de rede causada por chamadas de API. Embora a atividade de rede não seja algo que o INP mede, 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.

A redBus estava bastante confiante de que o INP do site seria bom, mas os dados do Monitoramento real de usuários (RUM) para essa métrica no 95o percentil contaram uma história diferente.

Como a redBus mediu o INP

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

No entanto, a forma como você acompanha o INP do seu site no campo pode ser muito diferente de como a redBus abordou o problema. Recomendamos que você leia sobre como encontrar interações lentas no campo para saber como acompanhar melhor o INP para seus sites e, depois, como reproduzi-los no laboratório antes de começar a otimizar interações.

Depois que a redBus tinha um sistema de rastreamento de INP, foi possível analisar os dados para entender melhor onde havia a interatividade lenta.

Captura de tela do sistema de geração de registros usado pelo redBus para analisar os valores de INP coletados no campo. Clique para uma versão com resolução mais alta desta imagem.

Casos de uso

Quando os usuários procuram 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 alterar a data nesta página foi lenta e causou um INP ruim.

Além disso, quando um usuário percorre as tarifas, as outras tarifas são carregadas lentamente pela API. Embora a rolagem não seja considerada na medição do INP, o 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 aumentava a latência de interação, levando a um INP ruim na página de pesquisa.

O comportamento de carregamento lento usado para carregar outras tarifas da API na rolagem. Clique para abrir uma versão com resolução mais alta do vídeo.

Como a redBus otimizou o INP para a página de pesquisa

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

• O manipulador de eventos scroll foi rejeitado para reduzir a quantidade de vezes que o callback do evento seria disparado em um determinado período. Ao reduzir a frequência em que o callback do 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: os gerenciadores de rolagem são acionados sem ser descumpridos aplicados ao callback do 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 gerenciadores de rolagem são disparados com a violação aplicada. Os callbacks do evento de rolagem são disparados com menos frequência, oferecendo à linha de execução principal mais oportunidades de responder às interações do usuário.

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

• Novos lotes de resultados foram buscados do penúltimo card na página de resultados da pesquisa para melhorar a experiência do usuário e o desempenho visual, acionando 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 no intervalo de INP de 870 a 900 para 350 a 370.

O comportamento de carregamento lento usado para carregar outras tarifas da API na rolagem. Clique para abrir uma versão com resolução mais alta do vídeo.

Embora essas mudanças tenham melhorado significativamente o 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 redutora cara para atualizar a interface do usuário. Isso resultou em uma nova renderização desnecessária da interface do usuário, o que afetou o INP da página.

Valores INP informados no console enquanto o usuário digita em um campo de entrada. O valor de INP resultante de 344, observado em um ambiente de laboratório, está dentro dos limites de "Melhorias necessárias". Clique para abrir uma versão com resolução mais alta do vídeo.

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

Melhoria do INP como resultado da chamada do redutor com menos frequência em uma alteração de campo de entrada. Clique para abrir uma versão com resolução mais alta do vídeo.

Com essa mudança, o INP da página melhorou em 72%, resultando em uma experiência do usuário mais rápida e fluida com a qual os usuários estão mais propensos a interagir.

Impacto nos negócios

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

Em resumo, o INP ajudou a descrever os problemas de desempenho em tempo de execução no site do redBus. Sabendo que havia melhorias a serem feitas, a redBus conseguiu observar o problema, reproduzi-lo e usar essas informações cruciais para fazer otimizações benéficas para a redBus e seus negócios.