WordPress

Cómo ajustar WordPress para conseguir la optimización de Next Paint

Explicamos lo que es INP y lo que hay que hacer en WordPress para conseguir un bajo valor de este nuevo parámetro incluido en las Core Web Vitals.

Cómo ajustar WordPress para conseguir la optimización de Next Paint

Next Paint o INP es una nueva medición centrada en la carga de páginas web en el navegador englobada dentro de las Core Web Vitals. La gestión de cualquier sitio web construido con WordPress requiere el tener en cuenta estas mediciones con el fin de conseguir que los usuarios puedan cargar las páginas con rapidez. Ello, obviamente, tiene una alta incidencia en el SEO.

En el mes de marzo de 2024 INP (Next Paint) sustituirá a FID (First Input Delay) como parámetro de medición del rendimiento de una página web. INP mide el tiempo que transcurre hasta que un usuario tiene su primera interacción con una página web.

INP frente a FID

Así, por ejemplo, si se pulsa una tecla o se hace un clic con el ratón, INP mostrará el tiempo de respuesta. La medición continúa hasta que la página responde de manera visual a esa solicitud. INP es una forma mucho más completa de ver la capacidad de respuesta de un sitio que el que ofrecía FID.

Existe una diferencia importante entre ambas mediciones. Así FID muestra el retraso de la primera interacción del usuario hasta que el navegador comienza a procesar la solicitud. INP hace mucho más. Mide todo el proceso desde la interacción del usuario hasta la próxima vez que la página se actualiza desde la perspectiva del visitante. Esto incluye el ciclo completo de retraso de entrada, el tiempo de procesamiento y el retraso de presentación.

¿Qué puede provocar un INP alto?

Entre los diferentes factores que pueden originar retrasos durante todo el periodo del INP se encuentran los siguientes:

  • Si la carga de los archivos JavaScript supera los 50 milisegundos, se produce una carga lenta. La consecuencia de ello es que se bloquea el hilo principal, lo que trae consigo un retraso en la siguiente interacción del usuario.
  • Cuando finalizan todas las interacciones, el navegador ha de mostrar el siguiente cuadro con el fin de reflejar los cambios. Una página muy grande o de gran complejidad, entre otros aspectos relacionados con los estilos, puede traer consigo el retraso a la hora de mostrar el siguiente cuadro.
  • Las páginas con muchas imágenes, con vídeos o con muchos archivos CSS y Javascript pueden retrasar el INP.
  • El uso de secuencias de comandos y de recursos externos también origina perdida de fluidez.
  • Un último aspecto a tener en cuenta es que la red tenga conexiones lentas.

Cómo medir el INP

Si queremos que un sitio web con WordPress obtenga un INP bajo o normal, podemos averiguar el valor de INP utilizando distintas herramientas. Estas son las que podemos utilizar:

  • PageSpeed Insights: Con este servicio podremos ver, entre otros valores, el que corresponde a INP. Es la herramienta ideal, soportada por Google.
  • Chrome DevTools: Este conjunto de herramientas se encuentran integradas en el navegador Google Chrome. Muestran una completa información sobre INP.
  • SpeedVitals Core Web Vitals Checker: Chequea las Core Web Vitals mostrando informaciones relevantes de rendimiento. En la lista se incluye INP.
  • Lighthouse: Se encuentra disponible dentro de Chrome DevTools. Sirve para realizar un completo análisis del rendimiento de un sitio web.

Los valores ideales de INP

La mejor forma de averiguar cuales son los mejores valores de INP es viendo lo que nos muestran en Optimiza la interacción para el siguiente procesamiento de imagen. En dicha publicación podremos descubrir lo que Google considera acertado y lo que no.

Utilizar un plugin en WordPress para conseguir un alto rendimiento

Si queremos conseguir que el valor de INP sea el más bajo posible, debemos recurrir en WordPress a un plugin. Aunque existen varios destinados a ello, vamos a centrarnos en los que consideramos de notable valor. Estos son:

  • WP Rocket: Con este complemento podremos conseguir, además de la carga en caché de las páginas, la minificación y la optimización en la entrega en archivos CSS, la minificación y la carga de archivos Javascript de manera diferida, la activación de la carga diferida de imágenes y vídeos, y la optimización de la base de datos.
  • WP Fastest Cache: Ofrece un completo panel de ajustes centrados en aspectos que disminuyen el tiempo de carga de las páginas. Además de la versión gratuita existe otra de pago con más prestaciones.
  • W3 Total Cache. Es un clásico utilizado por una gran cantidad de usuarios del CMS. Ofrece un notable número de opciones que redundan en una completa optimización de cualquier sitio web. Con la versión de pago se pueden lograr optimizaciones más completas de las que se consiguen con la versión gratuita.
  • WP-Optimize: Entre las opciones que ofrece se encuentran las siguientes: caché de página, precarga de la caché, compresión y minificación de archivos, optimización de imágenes y optimización de la base de datos.

Conclusión

Está claro que no debemos desdeñar Next Paint (INP), ya que se está convirtiendo en un elemento importante de las Core Web Vitals. Lo que mide, la capacidad de respuesta de las páginas web, es algo que hay que tener muy en cuenta si queremos incrementar el número de usuarios.

Está claro que para conseguir un INP válido hay que estar al día y realizar todos los ajustes necesarios para que el sitio web con WordPress, o con cualquier otro tipo de CMS, no ocupe demasiado tiempo en la carga.

Fabriciano González

Amante de la informática y de Internet entre otras muchas pasiones. Leo, descifro, interpreto, combino y escribo. Lo hago para seguir viviendo y disfrutando. Trato de dominar el tiempo para que no me esclavice.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.