INP (Interaction to Next Paint): como otimizar cada componente para um site mais rápido

A URL oficial

developer.chrome.com/docs/web-platform/optimize-inp

Os três componentes do INP

• Atraso de entrada (input delay): "começa quando o usuário inicia uma interação com a página e termina quando os callbacks do evento começam a rodar."
• Duração do processamento (processing duration): "consiste no tempo que os callbacks de evento levam para executar completamente."
• Atraso de apresentação (presentation delay): é a terceira fase, que vai do fim dos callbacks até a exibição do próximo frame. A documentação confirma que as interações são compostas por "o atraso de entrada, a duração do processamento e o atraso de apresentação."

Recomendações práticas

• Mantenha cada componente da interação o mais curto possível, em vez de focar apenas no atraso de entrada.
• Para atraso de entrada alto, investigue outras tarefas ocupando a thread principal antes do início dos callbacks. A própria interação "pode não ter sido a causa direta do INP lento."