Nivel 2:Core web vitals Interacción con la siguiente regla de la tarjeta de puntaje de pintura

La interacción con Next Paint (INP) mide la rapidez con la que su sitio web responde a la interacción del usuario, como clics, toques y pulsaciones de teclas. Esta regla del cuadro de mando lo ayuda a identificar y solucionar problemas de capacidad de respuesta que pueden frustrar al usuario y afectar negativamente la participación y las conversiones.

Acerca de esta regla del cuadro de mando

Esta interacción con la siguiente regla de pintura es parte del Nivel 2 (Proactivo) en el modelo de madurez de la experiencia digital. Evalúa si sus páginas responden rápidamente a la interacción del usuario, cerciorando una experiencia del usuario fluida y receptiva.

Por qué esto es importante: Las respuestas de interacción lentas hacen que las interfaces se sientan lentas y sin respuesta, lo que provoca que el usuario haga clic varias veces, abandone tareas o pierda la confianza en su aplicación. Los puntajes INP rápidos indican una interfaz que se siente ágil y confiable para el usuario.

Cómo funciona esta regla

Esta regla evalúa si el percentil 75 del tiempo de interacción de su página con Next Paint (INP) supera los 200 milisegundos, que es el umbral de Google para una capacidad de respuesta "buena". INP mide el tiempo desde que un usuario inicia una interacción hasta que el navegador presenta la siguiente actualización visual.

Nota importante: INP se mide en milisegundos, no en segundos. La métrica captura la peor capacidad de respuesta de interacción durante una visita a una página.

Entendiendo tu puntaje

Aprobado (Verde): El percentil 75 de INP es de 200 ms o menos (Bueno)
Fallo (rojo): el percentil 75 del INP supera los 200 ms (necesita mejorar o es deficiente)
Objetivo: Lograr tiempos INP inferiores a 200 ms para una experiencia óptima del usuario

Umbral INP de Google:

Bueno: 200 ms o menos
Necesita mejoras: 200 ms a 500 ms
Pobre: mayor a 500ms

Qué mide INP: INP captura la capacidad de respuesta de la interfaz de interacción del usuario, incluidos clics, toques y entradas del teclado. Mide el tiempo desde que se inicia la interacción hasta que el navegador puede presentar la respuesta visual al usuario.

Comprender la capacidad de respuesta a la interacción

INP mide tres fases del manejo de la interacción:

Retardo de entrada

Tiempo desde la interacción del usuario (clic/toque) hasta que el controlador de eventos comienza a ejecutar

Causado porque el hilo principal está ocupado con otras tareas
Se puede mejorar reduciendo el tiempo de ejecución de JavaScript.

Tiempo de procesamiento

Tiempo dedicado a ejecutar controladores de eventos y actualizar el estado de la aplicación

Incluye ejecución de código JavaScript y actualizaciones DOM
Se puede optimizar mediante códigos y algoritmos eficientes.

Retraso en la presentación

Tiempo desde que se completa el controlador hasta que el navegador presenta una actualización visual

Incluye cálculos de estilo, diseño y operaciones de pintura.
Se puede mejorar optimizando CSS y reduciendo la complejidad del DOM

Causas comunes de INP lento

Ejecución pesada de JavaScript: cálculos complejos que bloquean el hilo principal
Grandes manipulaciones del DOM: cambios extensos que requieren recálculo del diseño
Controladores de eventos ineficientes: código mal optimizado en controladores de clic/toque
Script de terceros: código externo que interfiere con el procesamiento de la interacción

Cómo mejorar los puntajes del INP

Si su puntaje muestra una capacidad de respuesta de interacción deficiente, siga estos pasos para optimizar el rendimiento:

1. Identificar la interacción lenta

Emplee New Relic para monitorear el navegador: revise los datos de INP para identificar qué interacciones son más lentas
Analizar patrones de interacción: comprender qué acciones del usuario (clics, entradas de formulario, navegación) tienen poca capacidad de respuesta.
Verificar patrones de dispositivos y redes: determinar si la INP lenta afecta dispositivos específicos o tipos de conexión
Priorice la interacción crítica: centrar en la interacción esencial para las tareas y conversiones del usuario.

2. Optimizar el rendimiento de JavaScript

Reducir el bloqueo del hilo principal:

Divida las tareas largas en fragmentos más pequeños empleando setTimeout() o requestIdleCallback()
Emplee trabajadores sitio web para tareas computacionales pesadas
Implementar la división de código para cargar solo el JavaScript necesario

Optimizar los controladores de eventos:

Eliminación de rebotes de eventos frecuentes como desplazamiento o cambio de tamaño
Emplee la delegación de eventos para obtener un mejor rendimiento con muchos elementos
Consulta y cálculos DOM en caché fuera de los controladores de eventos
Evite operaciones sincrónicas en los controladores de interacción

Mejorar la eficiencia del código:

Perfil de rendimiento de JavaScript para identificar cuello de botella
Optimizar algoritmos y estructuras de datos
Eliminar código no empleado y dependencia
Emplee técnicas eficientes de manipulación del DOM

3. Optimizar el rendimiento de la renderización

Reducir el desorden del diseño:

Lecturas y escrituras DOM por lotes para minimizar el recálculo del diseño
Emplee transformaciones CSS y opacidad para animaciones en lugar de propiedades de diseño
Implementar el desplazamiento virtual para listas largas
Evite operaciones de diseño sincrónico forzado

Optimizar CSS:

Minimizar los selectores CSS complejos
Reducir la cantidad de elementos DOM que requieren cálculo de estilo
Emplee la contención CSS para aislar el trabajo de renderizado
Optimizar animaciones y transiciones CSS

4. Implementar las mejores prácticas de rendimiento

Emplee API sitio web modernas:

Implementar content-visibility para contenido fuera de la pantalla
Emplee requestAnimationFrame() para animaciones suaves
Aproveche el almacenamiento en caché del navegador y los trabajadores de servicio
Implementar una priorización adecuada de recursos

Monitorizar y probar:

Emplee el panel de rendimiento de Chrome DevTools para perfilar la interacción
Pruebe en varios dispositivos, especialmente dispositivos celulares de gama baja.
Implemente el monitoreo de usuarios reales con New Relic Browser
Configurar alertas para la detección de regresión de INP

Guía de implementación

Configuración del monitoreo INP

Configurar el monitoreo del navegador de New Relic con la recopilación de datos Core Web Vitals habilitada
Establezca un umbral de medición adecuado en función de sus objetivos de experiencia del usuario.
Establecer mediciones de línea base antes de implementar optimizaciones
Crear un panel para realizar un seguimiento del rendimiento de INP en diferentes páginas y segmentos de usuarios

Creación de alertas procesables

Configurar alertas para la degradación del rendimiento de INP:

Buen umbral: alerta cuando el percentil 75 supera los 200 ms
Umbral pobre: alerta crítica cuando el percentil 75 supera los 500 ms
Monitoreo de tendencias: alerta sobre una degradación del 20% semana tras semana
Alertas específicas del segmento: monitoree el rendimiento de dispositivos móviles y computadoras de escritorio por separado

Optimización del edificio flujo de trabajo

Evaluación periódica: Programar revisiones mensuales de los datos de rendimiento del INP
framework de priorización: centrar en páginas con mucho tráfico y puntajes INP bajas
Pruebas A/B: Pruebe optimizaciones con segmentos de usuarios para validar mejoras
Proceso de escalamiento: definir caminos claros para la participación de ingeniería cuando se violan los umbrales

Consideraciones importantes

Evaluación personalizada: estas pautas proporcionan una base, pero cada aplicación es única. Evalúe el rendimiento de INP en función de sus metas específicas de experiencia del usuario y objetivos comerciales. Considere su base de usuarios, los patrones típicos de interacción y los viajes críticos de los usuarios al establecer el objetivo de rendimiento.

Mejora continua: la optimización del rendimiento sitio web es un proceso continuo. Las expectativas de los usuarios, las capacidades del navegador y los estándares sitio web evolucionan constantemente. Revise periódicamente su estrategia de INP, actualice los criterios de medición y adapte las técnicas de optimización para mantener una excelente capacidad de respuesta a la interacción.

Enfoque holístico: el INP funciona mejor como parte de una estrategia de rendimiento integral. Combínalo con otros Core Web Vitals (CLS y LCP) y métricas de rendimiento tradicionales para obtener una visibilidad completa de la experiencia del usuario.

Próximos pasos

Luego de implementar esta regla del cuadro de mando:

Revise la regla del cuadro de mando LCP de L3 Core Web Vitals para completar su Core Web Vitals optimización
Explora el rastreo de errores de JavaScript para identificar problemas de interacción
Implementar la monitorización AJAX para una observabilidad integral del frontend
Considere la hoja de ruta de implementación de la experiencia para la optimización sistemática de la experiencia digital

Te ofrecemos esta traducción automática para facilitar la lectura.