As otimizações de INP ajudaram a redBus a aumentar as vendas em cerca de 7%
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:
- 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.
- Otimizar o site para manter as interações o mais rápidas possível.
- 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:
- 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.
- 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.
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.
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
scrollfoi 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 eventoscrollera 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.requestAnimationFrameinforma ao navegador que o trabalho no callback precisa ser feito antes do próximo frame.
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.
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.
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.
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.