Vamos explorar uma maneira prática de medir Interaction to Next Paint, ou INP, usando o Chrome DevTools. Antes de tudo, vamos abrir o DevTools pressionando "F12" ou clicando com o botão direito e selecionando "Inspect". Agora, digamos que você tenha uma barra de pesquisa na sua página da web. Imagine que um usuário digite uma consulta, mas leva 600ms antes que o menu suspenso de sugestões apareça. O Chrome DevTools marcaria esse valor alto de INP. Você pode otimizar adiando JavaScript pesado, reduzindo tarefas longas e melhorando o tratamento de eventos. O INP então cairia para 150ms, fazendo as interações parecerem instantâneas. Legal, né? Agora, vamos analisar uma técnica prática de medição que ajuda a identificar atrasos de interação para que você possa criar uma experiência do usuário mais rápida e fluida! Primeiro, abriríamos o Chrome DevTools. Faríamos isso, mais uma vez, abrindo o Google Chrome, navegando para uma página da web que queremos analisar e pressionando "F12" ou clicando com o botão direito na página e clicando em "Inspecionar". Agora, vamos para a aba "Performance" - e lá está tudo o que você precisa. Agora estamos prontos para identificar o Interaction to Next Paint, ou INP. Vamos procurar o maior atraso de interação registrado. Um bom INP geralmente está abaixo de 200ms e um INP ruim está acima de 500ms. E é isso!