Cómo bajar la latencia: Guía para mejorar INP (Core Web Vitals)

Una de las acciones más efectivas para mejorar la experiencia de usuario y los resultados en Core Web Vitals, es reducir la latencia, sobre todo si hablamos de la métrica INP (Interaction to Next Paint).

Si estos términos no te resultan familiares, no te preocupes, en esta guía te contaremos qué es la latencia, cómo influye en el rendimiento, cómo se relaciona con el INP y las estrategias más eficaces para optimizarla.

Qué es la latencia y por qué afecta al rendimiento web

La latencia representa el tiempo que transcurre entre una acción del usuario y la respuesta visible en la página.

En desarrollo web, se considera una métrica esencial porque refleja la capacidad de una web para procesar y mostrar información en tiempo real. Una baja latencia se traduce en una comunicación eficiente entre el navegador y el servidor, lo que repercute directamente en la satisfacción del usuario.

Diferencia entre latencia y tiempo de carga

El tiempo de carga describe el periodo que tarda una página en mostrarse completamente desde que se solicita. La latencia, en cambio, mide la inmediatez con la que el sistema responde a cada acción durante la navegación. Una web puede ofrecer tiempos de carga similares a otra, pero destacar por su capacidad de reacción cuando el usuario interactúa. Esa agilidad es lo que genera la sensación de velocidad real y mejora la interacción.

Cómo impacta en la experiencia de usuario

La latencia está estrechamente ligada a la percepción de calidad por parte del usuario.

Cuando las respuestas del sistema ocurren en menos de 100 milisegundos, la experiencia resulta natural. En torno a los 300 milisegundos, el usuario ya nota una ligera pausa. Por encima de un segundo, la atención comienza a dispersarse y el usuario tiende a desconectar.

Una navegación con baja latencia favorece la confianza y reduce la fricción. El usuario mantiene la concentración en su objetivo (ya sea comprar, leer, enviar un formulario) sin interrupciones perceptibles.

Imagina una tienda online que nadie conoce, Amazon, y que al pulsar “Añadir al carrito” tarda más de un segundo en mostrar la confirmación. ¿Es difícil de imaginar, verdad? Este gran ecommerce sabe que cada milisegundo importa. Por eso, cuando añades algo a tu cesta de la compra, estas viendo tu lista de la compra casi al instante.

Qué es INP y su relación con la latencia

El INP (Interaction to Next Paint) forma parte del conjunto de métricas Core Web Vitals de Google y evalúa el tiempo que transcurre desde la interacción del usuario hasta el siguiente cambio visual en la pantalla.

Qué mide la métrica INP en Core Web Vitals

INP analiza la interacción más lenta que se produce durante la sesión del usuario considerando estas tres fases:

• Input delay: el tiempo entre la acción del usuario y el inicio del procesamiento.
• Processing time: la duración de la ejecución del evento en el hilo principal.
• Presentation delay: el tiempo que transcurre hasta que el navegador muestra el resultado en pantalla.

La suma de estos tres momentos define el valor final del INP. Cuanto más rápido se complete este ciclo, más ágil percibe el usuario la web. El mantenimiento y desarrollo web a medida es clave en este aspecto.

Por qué Google lo considera una métrica de interacción real

Google utiliza INP como referencia principal de interacción porque refleja el comportamiento global del sitio, no solo la primera acción del usuario.

A diferencia de métricas anteriores, INP abarca la experiencia completa: clics, desplazamientos y cualquier otro tipo de evento. Esta medición ofrece una visión precisa de la reactividad real del sitio, que es lo que determina la percepción de fluidez.

Cómo diagnosticar problemas de latencia

Existen muchas soluciones, tanto gratuitas como de pago, pero la combinación de Lighthouse y PageSpeed Insights es, en nuestra opinión, de las más completas para evaluar el rendimiento de una web.

Lighthouse, integrada en Google Chrome, es la primera que usamos en Góbalo para el diagnóstico y solución de los valores altos de INP, puesto que:

• Permite ejecutar auditorías directamente desde el navegador y observar en tiempo real cómo afectan los cambios que realizas.
• Ofrece las mismas métricas que PageSpeed Insights, pero con un nivel de detalle mayor y con registros locales que no dependen de datos de campo.
• Enseña claramente qué tareas bloquean el hilo principal y cómo influyen en métricas clave como INP, TTFB o LCP.

Cuando los ajustes se aplican en el entorno de desarrollo, conviene dejar pasar unas semanas para que los datos de usuarios reales se actualicen en PageSpeed Insights y se reflejen de la mejora forma.

Consejo: Lleva un registro de las optimizaciones que implementes y anota cómo evolucionan las métricas en cada revisión. Comparar los valores a lo largo del tiempo permite identificar patrones, validar mejoras y detectar regresiones antes de que afecten al rendimiento global. Además, ¡será un dato valioso para añadir a tus informes!

Cómo identificar elementos que aumentan la latencia

• Ejecución intensiva de JavaScript: tareas extensas que mantienen ocupado el hilo principal.
• TTFB elevado: respuesta inicial lenta del servidor.
• Retrasos en la red: rutas de conexión largas o servidores lejanos.
• Renderizado bloqueado: recursos que impiden al navegador pintar rápidamente la interfaz.

Cómo reducir la latencia paso a paso

Reducir la latencia implica optimizar tanto el servidor como el código y la red. Estas acciones marcan la diferencia:

• Optimiza la entrega del servidor: usa HTTP/2 o HTTP/3, habilita compresión Gzip o Brotli y aprovecha la caché del navegador y del servidor para acelerar las respuestas.
• Aplica un CDN y DNS rápido: distribuye el contenido geográficamente y mejora la resolución de nombres para que las peticiones lleguen antes.
• Carga recursos sólo cuando se necesiten: aplica lazy loading a imágenes e iframes y usa font-display: swap en las fuentes para evitar bloqueos visuales.
• Gestiona los recursos de terceros: limita scripts externos a los esenciales y ejecútalos de forma asíncrona.
• Minimiza y difiere los scripts: este es un elemento vital en nuestra opinión. Reduce el peso de archivos JS y CSS y utiliza async o defer para mantener fluida la carga.

Cuidado con la implementación de estos cambios, a veces no es “solo” reducir el número y listo. Estas acciones pueden tener implicaciones negativas en scripts necesarios como módulos de cookies, de analítica o de CRO.

En conjunto, estas medidas pueden reducir el tiempo entre acción y respuesta, elevando la sensación de velocidad y mejorando la métrica INP de forma tangible.

Ejemplo práctico: mejorando de latencia en un proyecto real

Durante más de un año, en Góbalo hemos trabajado la evolución digital del proyecto Naturaliza impulsado por Ecoembes y centrado en la educación ambiental en los colegios.

La nueva web se ha desarrollado en Laravel, sustituyendo un sistema anterior basado en WordPress. Este cambio permitió aplicar una arquitectura más ligera y optimizada, pensada desde el inicio para mejorar las métricas de rendimiento y especialmente, el INP, clave para garantizar una navegación fluida en aulas, dispositivos móviles y centros educativos con conexiones variables.

En el proceso:

• Se optimizó el servidor y se habilitó HTTP/2 junto a compresión Gzip.
• Se implementaron políticas de caché inteligentes para aprovechar al máximo los recursos estáticos.
• Se aplicó una estrategia de carga diferida de recursos no esenciales, priorizando la interactividad visible.
• Se revisó y redujo el uso de JavaScript, limitando las librerías a las estrictamente necesarias.

El resultado fue una mejora tangible: el INP pasó de aproximadamente 300 ms a 110 ms, situando el sitio dentro de los valores óptimos de Core Web Vitals.

Más allá de los números, la web ofrece ahora una experiencia perceptiblemente más ágil y coherente, incluso en dispositivos modestos o con redes inestables.

La importancia de implementar buenas prácticas

La latencia define la sensación de fluidez de una web. Cuando la respuesta del sistema se produce de manera inmediata, el usuario mantiene la atención, percibe calidad y confía en el sitio.

Optimizar el INP y reducir los tiempos de reacción refuerza la experiencia, se consigue mejorar la retención del usuario y contribuye a un mejor posicionamiento en buscadores.

En Góbalo damos especial importancia al rendimiento y a la eficiencia técnica en cada proyecto digital. Si quieres profundizar en cómo trabajamos la velocidad, la optimización y la arquitectura de código, no dudes en ponerte en contacto con nosotros.