Los Core Web Vitals (CWV) de Google son la métrica definitiva para la salud web. En 2025, la atención se centrará por completo en INP (Interacción con la siguiente pintura). FID (Retraso de primera entrada) está muerto.

¿Qué es el INP?

INP mide la capacidad de respuesta de su sitio después de que se haya cargado. Cuando el usuario hace clic en “Abrir menú”, ¿cuántos milisegundos pasan antes de que el menú realmente se mueva? Si la CPU está ocupada analizando un script de seguimiento de 2 MB, el menú no se moverá. El usuario siente un “retraso”.

Estrategias de optimización

1. Cediendo al hilo principal

Dividimos tareas largas usando scheduler.yield() o setTimeout. En lugar de procesar 1000 productos en un bucle (bloqueando la interfaz de usuario durante 500 ms), los procesamos en trozos de 50, lo que permite que el navegador pinte fotogramas en el medio.

2. Antirrebote y limitación

Los eventos de desplazamiento de oyentes y cambio de tamaño se activan cientos de veces por segundo. Los envolvemos en funciones antirrebote para garantizar que solo se ejecuten después de que el usuario deje de moverse.

3. CSS para animación

Aplicamos estrictamente las propiedades Solo de Compositor para las animaciones (transform y opacity). Animar “altura” o “izquierda” obliga al navegador a volver a calcular el diseño de toda la página (Reflujo), lo que destruye el rendimiento en dispositivos móviles.

Las herramientas

Usamos Lighthouse CI en nuestra canalización de GitHub Actions. Un desarrollador no puede fusionar una solicitud de extracción si degrada la puntuación del faro por debajo de 90. El rendimiento se rige por el código, no por las promesas.