As otimizações de INP ajudaram a redBus a aumentar as vendas em cerca de 7%
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:
- 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.
- Otimizar o site para manter as interações o mais rápido possível.
- 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:
- 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.
- 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.
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.
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
scrollfoi 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 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 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.
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.
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.
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.