El problema
Cuando medimos INP (Interaction to Next Paint), sabemos cuándo algo va mal, pero no por qué.
En este ejemplo, verás un botón que responde lentamente. Event Timing API nos dice que la interacción fue lenta, pero no nos dice qué código causó el problema.
Demo interactiva
Salida de Event Timing API:
¿Qué estamos viendo?
- duration: Tiempo total desde el click hasta que se pintó el cambio visual
- processingStart/End: Cuándo empezó y terminó la ejecución del event handler
- startTime: Cuándo ocurrió el evento
Event Timing API nos dice que la interacción tardó mucho tiempo, pero no nos dice qué función o script específico causó la lentitud.
¿Fue el cálculo matemático? ¿Un fetch? ¿Manipulación del DOM? ¿Un script de terceros?
Es posible que veas pequeñas diferencias entre los valores mostrados aquí y los de
DevTools. Event Timing API redondea los valores de duration a múltiplos de
8ms por motivos de privacidad, mientras que DevTools tiene acceso privilegiado a valores
más precisos.
Código del ejemplo
// Event handler "sospechoso"
button.addEventListener('click', () => {
// Algo aquí es lento... ¿pero qué exactamente?
processUserClick();
updateUI();
trackAnalytics();
});
// Event Timing API solo nos dice:
// "La interacción tardó 350ms"
// Pero no qué función específica fue la culpableEn el siguiente ejemplo, veremos cómo Long Animation Frames API nos da la respuesta.