INP en WordPress: encuentra el clic lento antes de optimizar

Una página puede cargar rápido y aun así sentirse lenta. El menú aparece, pero tarda en abrirse; el filtro recibe un clic y responde demasiado tarde. Esa espera es la que intenta describir Interaction to Next Paint (INP), una de las Core Web Vitals. Para un sitio WordPress, entender qué parte de la interacción se atasca ayuda más que instalar otro complemento de optimización a ciegas.

INP observa la respuesta a interacciones durante la visita y se centra en una de las más lentas, con tratamiento de valores atípicos. web.dev considera bueno un INP de 200 milisegundos o menos en el percentil 75 de las visitas, evaluado por separado en móvil y escritorio; por encima de 500 milisegundos se clasifica como deficiente. No es el tiempo de carga de la página ni el tiempo de respuesta del servidor.

Por qué un clic puede tardar

Una interacción tiene tres fases, como muestra el diagrama de portada. La espera de entrada termina cuando el navegador puede empezar a procesar el evento. El procesamiento comprende la ejecución de sus callbacks. La demora de presentación termina cuando el navegador puede mostrar el siguiente cuadro. La guía de web.dev explica que las tres suman la latencia de esa interacción.

En WordPress, una tarea larga de JavaScript del tema o de un complemento puede ocupar el hilo principal antes del clic. Un manejador pesado de búsqueda o filtrado puede consumir la fase de procesamiento. Un DOM grande o una actualización visual costosa puede retrasar el pintado. Son hipótesis para comprobar, no diagnósticos automáticos del sitio.

Tutorial: encuentra la interacción lenta

1. Empieza con datos de usuarios

Abre PageSpeed Insights con la URL de una página importante: inicio, artículo, búsqueda, formulario o ficha de producto. Revisa por separado móvil y escritorio. Si aparece información de usuarios reales, observa el INP y si corresponde a la URL o al origen agregado. Según Google, esa sección usa datos CrUX de una ventana anterior de 28 días; no cambia al instante después de editar la página.

La sección de laboratorio sirve para depurar bajo condiciones controladas. Puede diferir de los datos reales y no reproducir la interacción que causó el problema. Si la URL no tiene suficientes muestras de campo, no interpretes la ausencia de INP como una aprobación.

2. Reproduce un flujo concreto

En Chrome, abre la página y luego DevTools → Performance. Inicia una grabación, realiza una acción real —abrir el menú, enviar una búsqueda, elegir un filtro— y detén la grabación. En la pista Interactions, selecciona el evento y revisa espera de entrada, procesamiento y demora de presentación. La documentación de Chrome DevTools describe esta pista y su desglose.

3. Cambia una causa cada vez

• Espera alta: busca tareas largas que ocupan el hilo principal. Prueba reducir o diferir JavaScript que no se necesita para esa acción.
• Procesamiento alto: inspecciona los callbacks del clic o teclado. Divide trabajo costoso y deja que el navegador actualice la interfaz antes de continuar con tareas no urgentes.
• Presentación alta: observa cambios de estilo, layout y tamaño del DOM. Reduce el área que se vuelve a renderizar.

En WordPress, compara en un entorno de prueba una página con y sin el complemento o bloque sospechoso. Conserva la funcionalidad, la accesibilidad y la seguridad mientras mides; desactivar extensiones en producción sin entender su función puede crear otro problema. Registra la interacción, dispositivo, fase dominante y cambio realizado para no confundir una mejora puntual de laboratorio con una mejora para usuarios.

La métrica que importa al negocio

Un INP mejor indica una respuesta más rápida, pero no garantiza más visitas desde Google. Google aclara que unas Core Web Vitals buenas no aseguran mejores posiciones. Mi criterio es unir el dato técnico con una tarea real: ¿el usuario pudo abrir el menú, aplicar el filtro o completar el formulario sin esperar ni repetir el clic? Esa evidencia guía mejor el trabajo de ingeniería.

Fuentes: web.dev, INP; optimización de INP; Google, PageSpeed Insights; Chrome DevTools; Google Search Central.