Um filtro pode demorar a trazer novos produtos e ainda responder depressa ao toque. Também pode ter um servidor rápido e parecer travado porque a interface demora a mostrar que recebeu o comando. Para melhorar o INP em um catálogo, localize o trabalho que bloqueia a próxima atualização visual e trate a espera pelos resultados como uma etapa distinta da experiência.

O que o INP mede quando alguém toca em um filtro?

Interaction to Next Paint, ou INP, resume a latência das interações de uma visita. A métrica considera eventos como cliques, toques e ações de teclado e observa quanto tempo passa até o navegador poder mostrar a atualização visual seguinte. Entre o gesto e essa atualização, o navegador pode estar ocupado com outra tarefa, executar a lógica do filtro e recalcular o que precisa desenhar.

O guia de INP do web.dev apresenta 200 milissegundos ou menos como uma boa referência. Para avaliar uma página em campo, considere o percentil 75 das visitas e separe celular e desktop. No relatório de desempenho do Web Almanac publicado em janeiro de 2026, a parcela de sites com bons resultados no conjunto dos Core Web Vitals em dispositivos móveis chegou a 48% na amostra de 2025. A medida agrega três métricas e ajuda a contextualizar o trabalho, sem indicar a qualidade de um catálogo específico.

Como encontrar a interação que deixa a lista lenta?

Escolha um percurso que uma pessoa realmente faria. Em uma loja de móveis, abra a gaveta de filtros, selecione uma categoria, acrescente uma faixa de preço e remova uma opção. Repita a tarefa com uma categoria popular, capaz de retornar muitos itens. Anote qual gesto demorou para receber uma resposta visível e qual demorou para mostrar os resultados finais.

Em seguida, grave a sequência no painel de desempenho do navegador. Observe se o evento ficou na fila, se o código executou por muito tempo ou se o desenho da interface atrasou depois de terminar o processamento. Um script de recomendação que monopoliza o processador pode afetar a abertura da gaveta mesmo que seu código pertença a outra parte da página. A gravação ajuda a separar causas que parecem iguais para quem usa o site.

Teste com um celular representativo do público ou use limitação de CPU no laboratório para reproduzir condições mais difíceis. Rode também com rede limitada para distinguir a demora na atualização visual da espera pelos dados. A emulação ajuda na investigação, enquanto a validação em aparelhos reais mostra condições que uma configuração de laboratório pode deixar passar.

Quando aplicar o filtro na hora e quando esperar confirmação?

Seleção imediata funciona bem quando o resultado muda depressa e a lista continua visível. Em uma barra lateral de desktop, selecionar a cor pode atualizar a vitrine sem interromper a exploração. Em um celular, uma gaveta que ocupa quase toda a tela pode favorecer um botão para aplicar várias escolhas de uma vez. Assim a pessoa combina opções sem gerar uma sequência de buscas que ainda nem consegue ver.

Qualquer um dos modelos precisa mostrar o estado atual. Na aplicação imediata, marque a opção ao toque e indique que a lista está sendo atualizada. No modelo com confirmação, mantenha as escolhas visíveis e diferencie o que foi selecionado do que já foi aplicado. Ao fechar a gaveta, use as opções aplicadas para preencher os rótulos acima da lista.

Um catálogo cuja finalidade é gerar pedidos comerciais tem exigências próprias. Filtros úteis podem ser medidas, aplicações e disponibilidade por região. O guia sobre catálogos digitais B2B ajuda a relacionar a interface à tarefa de quem consulta. Uma busca rápida por atributos mal definidos ainda entrega trabalho extra para o cliente.

Como dar retorno rápido sem mostrar dados desatualizados?

Mostre a seleção e mantenha os resultados anteriores identificados enquanto a nova resposta chega, se essa continuidade fizer sentido. Em um cenário em que a lista anterior possa causar engano, indique claramente que os produtos visíveis ainda pertencem à seleção anterior ou substitua temporariamente a região por uma indicação de carregamento que preserve o espaço. O anúncio da atualização pode usar uma região de status para comunicar a mudança sem deslocar o foco.

Preveja também respostas fora de ordem. Suponha que a pessoa marque verde e, logo depois, azul. A consulta por verde pode terminar depois da consulta por azul. Cancele o pedido anterior quando possível ou associe cada resposta à seleção que a originou e descarte respostas obsoletas. Essa regra precisa valer também para a contagem de itens e para mensagens de erro.

Se a atualização falhar, preserve os filtros escolhidos e ofereça uma maneira de tentar de novo. Quando a combinação retornar zero resultados, mostre quais filtros estão ativos e permita remover um por vez. Reserve um teste para a ação de limpar tudo, pois ela tende a produzir uma lista maior e pode custar mais do que selecionar uma opção.

O que reduzir antes de reescrever o catálogo?

Investigue primeiro o trabalho executado durante o gesto. Talvez o clique faça a lista inteira recalcular preços ou reconstrua centenas de cards. Atualize apenas os elementos que mudaram e limite a quantidade de resultados renderizados de uma vez com paginação ou carregamento incremental, conforme o percurso. Confira se o acesso aos itens permanece previsível para quem navega com teclado ou volta para a página anterior.

Se o perfil mostrar cálculos pesados que não precisam terminar antes do retorno visual, divida esse trabalho ou adie a etapa não essencial. Se o atraso estiver na apresentação, confira o volume de elementos atualizados e o custo de recalcular o layout. Revise ainda os recortes e dimensões de fotos com o guia de otimização de imagens para sites. Uma lista que preserva seu espaço evita deslocamentos durante a troca dos resultados, embora esse benefício seja medido separadamente do INP.

Como saber se a mudança melhorou a experiência?

Compare a mesma tarefa antes e depois. Registre o intervalo até o retorno visual inicial e a espera até a lista correta aparecer. Depois verifique se o foco permaneceu onde a pessoa pode continuar a tarefa e se os resultados correspondem aos filtros exibidos. Em um teste manual, inclua a seleção rápida de duas opções, um pedido com erro e o retorno do produto para a listagem.

Use dados de campo quando o volume permitir e acompanhe as visitas em celular separadamente. Se o indicador agregado melhorar, ainda vale observar se houve avanço nas interações com maior impacto comercial, como abrir filtros, confirmar opções e voltar para modificar uma seleção. Relacione o diagnóstico aos gestos que pessoas conseguem repetir, em vez de depender apenas de uma nota média de laboratório.

Uma primeira entrega pode se concentrar em um filtro com muito uso. Dê confirmação visual imediata, elimine trabalho redundante antes da próxima pintura e teste respostas fora de ordem. Quando seleção, lista e contagem permanecem coerentes sob rede lenta, você consegue medir o desempenho sem sacrificar a confiança no catálogo.

Quais sinais valem a pena registrar em produção?

Registre o nome da ação, o tipo de dispositivo e a etapa em que ocorreu o atraso. Uma equipe pode distinguir abertura da gaveta, seleção de opção e aplicação dos filtros. Se coleta informações sobre a lista, prefira faixas de quantidade a valores que identifiquem a pesquisa de uma pessoa. Use o mesmo nome para a ação em todas as telas que compartilham o componente.

Esse recorte ajuda a interpretar um caso em que o catálogo geral melhora, mas a página de categoria continua com uma interação lenta. A investigação pode então se concentrar na quantidade de itens, no conteúdo específico daquela página e nos scripts que ela carrega.