¿Qué es la puntuación INP de Google y cómo mejorarla en WordPress?

Cuando Google introduce un nuevo factor de clasificación como INP (Interaction to Next Paint), es fácil sentirse abrumado. Probablemente te estés preguntando qué significa este término técnico para tu sitio de WordPress y qué necesitas hacer ahora.

Entendemos perfectamente. Con más de una década de experiencia optimizando sitios de WordPress, nuestro equipo comenzó inmediatamente a realizar pruebas para encontrar las formas más efectivas de mejorar esta nueva puntuación.

Después de investigar el tema, traducimos toda la jerga compleja a pasos sencillos y accionables. Estamos emocionados de compartir los métodos probados que ahora usamos en nuestra propia cartera de sitios web.

En esta guía, te explicaremos exactamente qué es INP y cómo puedes mejorar tus puntuaciones, incluso si no eres desarrollador.

Aquí tienes un resumen rápido de los temas que cubriremos en esta guía:

1. ¿Qué son las Core Web Vitals de Google?
2. ¿Qué es el INP de Google?
3. ¿Por qué Google cambió la métrica FID por INP?
4. Cómo medir la puntuación INP de Google en WordPress
5. Cómo mejorar la puntuación INP de Google en WordPress
6. Cómo los propietarios de sitios web pueden optimizar sus sitios para INP
7. Cómo los desarrolladores pueden optimizar su código para INP
8. Ejemplos de buenas prácticas de codificación JavaScript para desarrolladores
9. Preguntas frecuentes sobre el INP de Google
10. Guías expertas sobre cómo mejorar el rendimiento de WordPress

¿Qué son las Core Web Vitals de Google?

Las Core Web Vitals de Google son métricas de rendimiento de sitios web que Google considera importantes para la experiencia general del usuario. Estas puntuaciones de "web vitals" son parte de la puntuación general de experiencia de página de Google, lo que impactará tus rankings SEO.

Estas métricas son útiles porque, incluso si tu sitio web de WordPress carga rápido, puede que no sea completamente funcional para los usuarios. Incluso si una página ha cargado, un visitante podría no ser capaz de hacer lo que quiere o acceder a la información que necesita.

Las Core Web Vitals están diseñadas para ayudar con esto. Te permiten medir qué tan rápido carga tu sitio web, se vuelve visible y está listo para que lo usen tus visitantes.

En el pasado, Google utilizaba tres pruebas de calidad:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Puedes aprender más sobre estas pruebas en nuestra guía definitiva sobre cómo optimizar las Core Web Vitals para WordPress.

Sin embargo, Google reemplazó FID con una nueva prueba llamada INP (Interaction to Next Paint) en marzo de 2024. Las otras dos pruebas continúan utilizándose.

Veamos qué es INP y por qué Google lo adoptó.

¿Qué es el INP de Google?

INP significa ‘Interaction to Next Paint’ (Interacción a la Siguiente Pintura). Es una nueva métrica de Google Core Web Vital que mide las interacciones del usuario que causan retrasos en tu sitio web.

La prueba INP mide cuánto tiempo transcurre entre que un usuario interactúa con tu sitio web, como hacer clic en algo, y la actualización visual de tu contenido en respuesta. Esta actualización visual se llama la ‘siguiente pintura’.

Por ejemplo, un usuario podría enviar un formulario de contacto en tu sitio, hacer clic en un botón o seleccionar una imagen que se abre en una ventana emergente. La prueba INP medirá el tiempo transcurrido entre que el usuario realiza estas interacciones y realmente ve el contenido actualizado en tu sitio web.

La prueba de Google luego arroja una puntuación INP única basada en la duración de la mayoría de las interacciones del usuario en tu sitio web. La puntuación será ‘Buena’, ‘Necesita mejorar’ o ‘Mala’, dependiendo de cuánto tiempo tarde tu sitio web en actualizarse visualmente.

¿Por qué Google cambió la métrica FID por INP?

La prueba FID anterior medía la rapidez con la que tu sitio web responde a la primera entrada del usuario después de que la página se carga, como un clic del ratón o una pulsación de tecla. Lo hace midiendo el tiempo entre la primera entrada del usuario y cuando tu sitio web comienza a actuar sobre esa entrada.

En otras palabras, medía qué tan receptivo era tu sitio web cuando se cargó por primera vez y la primera impresión que daba a los usuarios reales.

Sin embargo, esta métrica no fue tan útil como podría haber sido. Había dos limitaciones en la prueba FID:

1. Solo medía la primera interacción del usuario, no todas.
2. Solo medía hasta que el sitio web comenzaba a procesar la interacción, no hasta que el usuario podía ver realmente la retroalimentación visual en la pantalla.

Por lo tanto, Google cambió la prueba para dar una imagen más completa de la capacidad de respuesta general de una página web. INP medirá todo el tiempo que el usuario pasa allí hasta que abandona la página.

Cómo medir la puntuación INP de Google en WordPress

La forma más fácil de probar tu puntuación de Core Web Vitals de Google es usando la herramienta PageSpeed Insights. Simplemente ingresa la URL que deseas probar y haz clic en el botón 'Analizar'.

La herramienta analizará la página web durante unos segundos y luego te mostrará los resultados de la prueba.

Ahora, junto con otros Core Web Vitals de Google, también verás la puntuación de Interaction to Next Paint (INP) de la página.

Habrá diferentes puntuaciones para usuarios de móvil y de escritorio.

En la captura de pantalla anterior, puedes ver la puntuación INP para usuarios de escritorio que ven esta página web en WPBeginner es de 47 ms. El punto verde significa que es una buena puntuación.

Una vez que puedas ver la puntuación de tu propio sitio, probablemente te preguntarás cómo se compara con otros sitios web y si necesita ser mejorada.

Google ha proporcionado algunas directrices para interpretar tu puntuación INP:

• Más rápido que 200 milisegundos – buena capacidad de respuesta
• 200-500 milisegundos – necesita mejorar
• Más lento que 500 milisegundos – mala capacidad de respuesta

Asegúrate de verificar tu puntuación tanto para usuarios móviles como de escritorio y apunta a una buena capacidad de respuesta.

Luego puedes mejorar tu puntuación INP siguiendo las directrices en las secciones a continuación.

Estudio de caso: Encontrando interacciones lentas en los sitios web de Awesome Motive

Pero primero, puede ser útil ver un estudio de caso. Hemos comenzado a medir las puntuaciones INP en nuestros sitios de marca, incluyendo All in One SEO, MonsterInsights y WPForms.

Cuando nuestro equipo revisó las puntuaciones INP de nuestro sitio web, los resultados iniciales mostraron que nuestras páginas más populares necesitaban mejoras.

Usando el panel de Experiencia de Usuario de Chrome (CrUX), pudimos ver que:

• El 80% de nuestras sesiones fueron calificadas como 'buenas'
• El 12% de nuestras sesiones fueron calificadas como ‘necesita mejorar’
• El 8% de nuestras sesiones fueron calificadas como ‘mala’

Un informe de PageSpeed Insights nos da una puntuación general de INP, pero no nos dice qué botones o campos de formulario específicos están causando el retraso para los usuarios reales. Para averiguarlo, necesitamos profundizar un poco más utilizando otras herramientas que analizan datos de sesiones de visitantes reales.

Eso significa que, a continuación, necesitaremos realizar nuestras propias pruebas para encontrar interacciones lentas en páginas con puntuaciones de INP más bajas. Esta es una tarea detallada y avanzada que es mejor que la realice un desarrollador.

Se hace yendo a cada página que necesita mejora y luego probando cada interacción con clics, toques y pulsaciones de teclas reales. Estos deben medirse en tiempo y evaluarse utilizando herramientas.

El Blog de desarrolladores de Chrome enumera varias herramientas que se pueden usar para realizar pruebas, como la extensión Web Vitals de Chrome y el nuevo modo de intervalo de tiempo en el Panel de Lighthouse en DevTools. También puedes consultar el artículo de Google sobre cómo depurar usando la extensión Web Vitals.

Es importante tener en cuenta que las sesiones con calificaciones más bajas probablemente ocurrieron en dispositivos o conexiones más lentas. Eso significa que, al realizar pruebas, se recomienda limitar la velocidad de tu navegador, o podrías no detectar las interacciones lentas.

Puedes hacer eso usando la función Inspect Element de Chrome yendo a Ver » Desarrollador » Inspeccionar elementos. Puedes cambiar a la pestaña 'Red' y seleccionar una opción de limitación en el menú desplegable.

Es importante probar con una conexión más lenta porque muchos de tus usuarios pueden estar en dispositivos móviles o tener un internet menos que perfecto. Un problema que es invisible en tu computadora rápida de oficina podría ser una fuente importante de frustración para ellos.

Una vez que hayas encontrado las puntuaciones de INP para tus páginas, puedes usar los consejos de la siguiente sección de este tutorial para mejorarlas.

Cómo mejorar la puntuación INP de Google en WordPress

La mayor parte del trabajo de optimización de la puntuación INP deberá ser realizada por los desarrolladores. Esto incluye a los autores del tema y los plugins que utilizas en tu sitio web, además de los desarrolladores de cualquier JavaScript personalizado que estés ejecutando.

Esto se debe a que la puntuación INP está relacionada principalmente con el tiempo necesario para realizar interacciones de JavaScript en tu sitio web.

Por ejemplo, cuando un usuario hace clic en un botón, se ejecuta código JavaScript para realizar la función esperada al hacer clic en el botón. Este código se descarga en la computadora del usuario y se ejecuta en su navegador web.

Para optimizar tu puntuación INP, se deben reducir los retrasos que ocurren durante las interacciones del usuario con JavaScript. Hay tres componentes para este retraso:

1. Retraso de entrada, que ocurre cuando tu sitio web está esperando tareas en segundo plano en esa página que impiden que se ejecute el controlador de eventos.
2. Tiempo de procesamiento, que es el tiempo necesario para ejecutar los controladores de eventos en JavaScript.
3. Retraso de presentación, que es el tiempo necesario para recalcular la página y mostrar el contenido de la página en la pantalla.

Como propietario de un sitio web, hay pasos que puedes seguir para mejorar el primer y tercer retraso. Te mostraremos cómo en la siguiente sección.

Sin embargo, para realizar mejoras reales en tu puntuación INP, necesitarás mejorar el segundo retraso, que es el tiempo de procesamiento del código en sí. Eso no es algo que puedas hacer tú mismo.

Los desarrolladores de tu tema de WordPress, plugins y JavaScript personalizado pueden necesitar optimizar su código para dar retroalimentación a tus usuarios de inmediato. La buena noticia es que probablemente ya estén trabajando en esto para cumplir con la fecha límite de marzo de 2024.

Ofrecemos algunos consejos específicos para desarrolladores con ejemplos más adelante en este artículo.

Cómo los propietarios de sitios web pueden optimizar sus sitios para INP

Si bien el impacto más significativo en la puntuación INP de tu sitio web provendrá de los desarrolladores que optimizan su código, hay algunas cosas que los propietarios de sitios web pueden hacer.

En particular, puedes asegurarte de que los clics del mouse y las pulsaciones de teclas de tus usuarios se reconozcan lo antes posible optimizando los procesos en segundo plano de tu sitio. Además, puedes asegurarte de que la respuesta a su entrada se muestre en la pantalla lo más rápido posible.

Si bien estos pasos podrían no reescribir directamente el código que causa una interacción lenta, mejoran la salud general de tu sitio. Un sitio más rápido y ágil le da al navegador más recursos para manejar las interacciones del usuario rápidamente, lo que definitivamente puede ayudar a tu puntuación INP.

Aquí hay algunos pasos que puedes seguir para lograrlo.

1. Asegúrate de estar ejecutando la última versión de WordPress

Lo primero que debes hacer es asegurarte de que estás ejecutando la última versión de WordPress.

Esto se debe a que las versiones 6.2 y 6.3 de WordPress introdujeron mejoras de rendimiento significativas. Estas mejorarán el rendimiento de tu sitio web en el lado del servidor y en el lado del cliente, lo que mejorará tu puntuación INP.

Para obtener instrucciones detalladas, puedes consultar nuestra guía sobre cómo actualizar WordPress de forma segura.

2. Optimiza los procesos en segundo plano en WordPress

Los procesos en segundo plano son tareas programadas en WordPress que se ejecutan en segundo plano. Pueden incluir la comprobación de actualizaciones de WordPress, la publicación de entradas programadas y la copia de seguridad de tu sitio web.

Si tu sitio web se sobrecarga al ejecutar estas tareas en segundo plano, es posible que no se dé cuenta de inmediato de que el usuario ha hecho clic con el ratón o ha presionado una tecla, lo que resulta en una puntuación INP deficiente.

Es posible que puedas configurar tus scripts y plugins en segundo plano para reducir la cantidad de trabajo que realizan, lo que ejerce menos presión sobre tu sitio web. De lo contrario, podrías ejecutarlos solo cuando sean necesarios en lugar de dejarlos ejecutándose en segundo plano.

Para obtener instrucciones detalladas, puedes consultar la sección Optimizar procesos en segundo plano de nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress.

3. Revisa las recomendaciones de rendimiento de PageSpeed Insights

Después de ejecutar la prueba de PageSpeed Insights en tu sitio web, puedes desplazarte hacia abajo hasta la sección de Rendimiento de los resultados de la prueba.

Aquí encontrarás algunas oportunidades para mejorar el rendimiento de tu sitio junto con el tiempo estimado de ahorro si sigues los consejos.

Por ejemplo, es posible que veas recomendaciones para eliminar recursos que bloquean la renderización. Puedes hacerlo siguiendo nuestra guía sobre cómo solucionar JavaScript y CSS que bloquean la renderización en WordPress.

También es posible que veas una recomendación para reducir el JavaScript no utilizado. Encontrarás una opción para hacer esto en muchos de los mejores plugins de caché de WordPress, como WP Rocket.

4. Minimizar JavaScript en WordPress

El JavaScript necesita ser descargado a la computadora del usuario antes de que pueda ejecutarse. Al hacer que tus archivos JavaScript sean lo más pequeños posible, puedes lograr pequeñas mejoras en el rendimiento.

Minimizar tu JavaScript hace que los archivos sean más pequeños al eliminar espacios en blanco, saltos de línea y caracteres innecesarios del código fuente.

Esto no tendrá un efecto drástico en tu rendimiento, pero si buscas reducir unos milisegundos adicionales en tu puntuación INP, entonces podrías encontrarlo útil.

Para aprender cómo, puedes ver nuestra guía sobre cómo minimizar archivos CSS y JavaScript en WordPress.

Cómo los desarrolladores pueden optimizar su código para INP

Si eres desarrollador, las mayores ganancias en la puntuación INP provendrán de la optimización de tu código. Aquí hay algunas cosas que puedes hacer.

1. Reconoce visualmente la entrada del usuario de inmediato

Aquí está la única cosa que hará la mayor diferencia al optimizar la puntuación INP de tu código: necesitas dar retroalimentación visual a toda la entrada del usuario de inmediato.

El usuario debería ver de inmediato que su entrada ha sido reconocida y que estás actuando sobre ella. Esto hará que tu código se sienta más receptivo para el usuario y resultará en una excelente puntuación INP.

Aquí tienes algunos ejemplos:

• Si un usuario hace clic en un elemento, entonces deberías mostrar algo que indique que el elemento fue clicado.
• Si un usuario envía un formulario, entonces necesitas mostrar algo inmediatamente para reconocerlo, como un mensaje o un spinner.
• Si un usuario hace clic en una imagen para abrirla en un lightbox, entonces no esperes solo a que la imagen cargue. En su lugar, deberías mostrar una imagen de demostración o un spinner de inmediato. Luego, cuando la imagen se cargue, puedes mostrarla en el lightbox.

Más que nada, esto mejorará tu puntuación INP, especialmente si necesitas realizar un procesamiento intensivo de JavaScript en respuesta a la entrada del usuario.

Solo asegúrate de actualizar la interfaz de usuario antes de comenzar la tarea.

Después de eso, puedes programar el trabajo pesado para que se ejecute un poco más tarde usando una devolución de llamada de setTimeout. Esto le da al navegador un momento para actualizar la pantalla antes de que se ocupe con la tarea intensiva.

Una vez que lo hagas bien, hay algunas cosas más que puedes hacer para optimizar tu código.

2. Optimiza dónde el navegador pasa la mayor parte de su tiempo

Lo siguiente que debes hacer es investigar dónde pasa el navegador la mayor parte de su tiempo y luego optimizar esas partes.

En Google Chrome, cuando navegas a Ver » Desarrollador » Herramientas de desarrollador » Rendimiento, es posible inspeccionar las funciones de JavaScript y los controladores de eventos que están bloqueando la siguiente pintura.

Con ese conocimiento, puedes ver qué se puede optimizar para reducir el tiempo hasta la siguiente pintura después de la interacción del usuario.

3. Reduce tus diseños

A veces, mucha actividad de CPU consiste en trabajo de diseño.

Cuando esto sucede, debes verificar si tu código está haciendo que el navegador recalcule repetidamente el diseño de la página. Esto a menudo se llama 'layout thrashing' (cambio de diseño), y proporcionamos un ejemplo de cómo evitarlo más adelante en esta guía.

4. Muestra primero el contenido 'above-the-fold'

Si la renderización del contenido de la página es lenta, tu puntuación INP puede verse afectada.

Puedes considerar mostrar solo el contenido importante 'above-the-fold' primero para entregar el siguiente fotograma más rápidamente.

Ejemplos de buenas prácticas de codificación JavaScript para desarrolladores

Puede ser útil mostrarte algunos ejemplos de cómo un código deficiente puede resultar en una puntuación INP baja.

Hemos reunido un ejemplo de proyecto en CodePen con el que puedes experimentar. Puedes examinar nuestro código de muestra, leer nuestras breves explicaciones y ver la diferencia que hace al hacer clic en los botones.

Aquí tienes una animación de ese proyecto de CodePen. Puedes ver que el código de muestra no optimizado da como resultado una puntuación INP baja de 965 milisegundos. La pulsación del botón se sentirá lenta para los usuarios.

Por el contrario, el código optimizado actualiza el texto del botón inmediatamente, lo que resulta en la mejor puntuación INP posible.

Sigue leyendo para ver cuatro ejemplos de cómo puedes mejorar tu código para optimizar la puntuación INP.

Ejemplo 1: Actualiza la pantalla antes de ejecutar una tarea pesada de CPU

Las tareas pesadas de CPU llevan tiempo, y esto puede llevar a puntuaciones INP bajas a menos que escribas un buen código. En este caso, es mejor actualizar la pantalla antes de ejecutar esa tarea.

Aquí hay un mal ejemplo donde la interfaz de usuario se actualiza después de una tarea pesada de CPU. Esto resulta en un INP alto:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

En este ejemplo mejorado, la interfaz de usuario se actualiza inmediatamente cuando se hace clic en el botón.

Después de eso, la tarea pesada de la CPU se mueve a una devolución de llamada de setTimeout:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Esto permite que el navegador actualice la pantalla antes de comenzar la tarea lenta, lo que resulta en una buena puntuación INP.

Ejemplo 2: Programar procesamiento no urgente

También debes asegurarte de no ejecutar trabajo no urgente o no esencial en un script inmediatamente cuando pueda retrasar la respuesta que el usuario espera.

Debes comenzar actualizando la página inmediatamente para reconocer la entrada del usuario. Después de eso, puedes usar requestIdleCallback para programar el resto del script cuando haya tiempo libre al final de un fotograma o cuando el usuario esté inactivo.

Aquí tienes un ejemplo:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Esto hará que la página web se sienta más receptiva para el usuario y obtendrás una mejor puntuación INP.

Ejemplo 3: Programar una función para que se ejecute antes de la próxima pintura

También puedes usar requestAnimationFrame para programar una función que se ejecute antes de la próxima repintura:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Esto puede ser útil para animaciones o actualizaciones visuales en respuesta a las interacciones del usuario.

De nuevo, debes darle al usuario retroalimentación reconociendo su entrada inmediatamente.

Ejemplo 4: Evitar el colapso del diseño

El colapso del diseño ocurre cuando lees y escribes repetidamente en el DOM (Modelo de Objeto de Documento), lo que hace que el navegador recalcule el diseño varias veces.

Aquí hay un ejemplo de 'layout thrashing':

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Esto se puede evitar agrupando sus lecturas y escrituras.

Este es un mejor ejemplo:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Preguntas frecuentes sobre el INP de Google

Entendemos que un tema técnico como INP puede generar muchas preguntas. Para ayudar, hemos respondido algunas de las consultas más comunes que recibimos de nuestros lectores.

¿Qué es la métrica Interaction to Next Paint (INP) de Google?

Interaction to Next Paint (INP) es una métrica de Google Core Web Vitals que mide la capacidad de respuesta general de un sitio web a las interacciones del usuario. Calcula el tiempo desde que un usuario hace clic, toca o escribe en una página hasta que aparece la siguiente actualización visual en la pantalla.

Esto ofrece una visión más amplia de la experiencia del usuario que la métrica FID anterior.

¿Por qué Google reemplazó First Input Delay (FID) con INP?

Google reemplazó FID con INP porque proporciona una medida más completa de la capacidad de respuesta de una página. FID solo medía el retraso de la primera interacción.

En contraste, INP evalúa la latencia de todas las interacciones del usuario durante una visita, ofreciendo una imagen más completa de la experiencia del usuario.

¿Cuál es una buena puntuación INP?

Según las directrices de Google, una buena puntuación INP es de 200 milisegundos o menos. Una puntuación entre 200 y 500 milisegundos 'necesita mejora', y cualquier cosa superior a 500 milisegundos se considera 'mala capacidad de respuesta'.

¿Cómo puedo mejorar mi puntuación INP en WordPress?

Mejorar tu puntuación INP en WordPress implica varios pasos. Los propietarios de sitios web pueden optimizar los procesos en segundo plano, minificar JavaScript y asegurarse de que su sitio esté actualizado.

Los desarrolladores pueden tener un impacto significativo optimizando el código para proporcionar retroalimentación visual inmediata para las acciones del usuario, como mostrar un indicador de carga, y aplazando tareas pesadas.

Guías expertas sobre cómo mejorar el rendimiento de WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo mejorar tu puntuación INP de Google en WordPress. También puedes consultar otros artículos relacionados con la mejora del rendimiento de WordPress:

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.