Calculadora de Presupuesto INP

Estima y distribuye las tres fases del Interaction to Next Paint para mantenerte dentro del umbral recomendado de los Core Web Vitals.

Optimizando los Core Web Vitals con el Presupuesto INP

En Utilidades.io hemos diseñado esta herramienta interactiva para facilitar la planificación y optimización del rendimiento en aplicaciones web modernas. El INP (Interaction to Next Paint) mide el tiempo que transcurre desde que un usuario interactúa con un elemento de la página hasta que el navegador dibuja el siguiente cuadro con la respuesta visual correspondiente.

Las tres fases críticas del INP

Para analizar y resolver problemas de latencia, dividimos el INP en tres fases independientes que debemos presupuestar cuidadosamente:

Nosotros sugerimos mantener la suma total por debajo de 200 milisegundos para garantizar una experiencia fluida y cumplir con las exigencias del motor de búsqueda de Google.

Equipo Editorial | Utilidades.io

Equipo Editorial | Utilidades.io

Desarrollamos herramientas prácticas, rápidas y gratuitas para el día a día.

📚 ¿Quieres entender la teoría matemática y los conceptos detrás de esta herramienta? Lee nuestra guía completa sobre qué es y cómo funciona.

Preguntas Frecuentes

¿Qué es el presupuesto INP y por qué es importante?

El presupuesto INP (Interaction to Next Paint) es el tiempo límite recomendado para que una página responda a una interacción del usuario. Google establece que un INP óptimo debe ser inferior a 200 milisegundos para garantizar una buena experiencia de usuario y un buen posicionamiento SEO.

¿Cuáles son las tres fases que componen el INP?

El INP se divide en tres fases: el retardo de entrada (Input Delay), el tiempo de procesamiento de los eventos de la interacción (Processing Duration) y el retardo de presentación (Presentation Delay) necesario para renderizar el nuevo cuadro en pantalla.

¿Cómo puedo reducir un INP elevado en mi sitio web?

Para optimizar el INP puedes dividir las tareas largas de JavaScript con requestIdleCallback o setTimeout, reducir el trabajo del hilo principal, optimizar el CSS para acelerar el renderizado y evitar la ejecución de scripts de terceros pesados durante las interacciones.