A sua página carrega rápido, mas parece lenta? É o INP
Seu relatório do Lighthouse parece verde. LCP está ok. CLS está ok. A página carrega rápido.
Então, suas pontuações no mundo real caem. Você não sabe o porquê.
O problema provavelmente é o INP. O Interaction to Next Paint substituiu o FID em março de 2024. O FID media apenas o primeiro atraso. O INP mede cada interação enquanto o usuário permanece na sua página. Ele reporta a mais lenta.
O INP não é uma métrica de carregamento. É uma métrica de responsividade. Ele responde a uma pergunta: quando você clica ou digita, quanto tempo leva até a tela mudar?
O Google utiliza estas faixas:
- 200ms ou menos é bom.
- Acima de 500ms é ruim.
Um site pode carregar em um segundo e ainda assim falhar. Carregar rápido e responder rápido são tarefas diferentes.
As ferramentas do Lighthouse costumam ignorar o INP. O Lighthouse não clica nos seus botões. Ele fornece uma estimativa. Você pode ter um relatório de laboratório verde e uma pontuação de campo vermelha.
Para ver o número real, use este código:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
Isso registra a interação lenta e o elemento específico.
Problemas de INP acontecem porque a thread principal está ocupada. O navegador não consegue renderizar a resposta até que uma tarefa de JavaScript seja concluída.
Causas comuns:
- Manipuladores de eventos pesados sendo executados a cada clique.
- Scripts de terceiros, como widgets de chat ou analytics.
- Layout thrashing devido a leituras e escritas constantes no DOM.
- Tarefas de hidratação de framework.
Corrija isso dividindo tarefas longas. Deixe o navegador "respirar" entre as etapas:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
Use o yieldToMain para permitir que o navegador renderize a interface antes que o trabalho pesado comece.
Outras correções:
- Adie (defer) scripts que não são necessários imediatamente.
- Audite widgets de terceiros.
- Use debounce em manipuladores pesados.
- Agrupe (batch) suas leituras e escritas no DOM.
Pare de encarar o LCP se suas pontuações reais forem baixas. Meça suas interações em vez disso.
Fonte: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn