Nos complace anunciar la primera ronda de compatibilidad con herramientas para la nueva métrica de capacidad de respuesta pendiente, Interaction to Next Paint (INP). Para obtener información sobre la métrica en sí, consulta la guía oficial de la métrica de INP.
Medición sugerida
El objetivo de medir la INP es comprender qué tan rápido responde tu página a las entradas del usuario. La única forma de obtener datos realistas es medir cómo responde tu página a los usuarios reales que visitan tu sitio con datos de campo.
Medir la INP en el laboratorio ayuda a comprender mejor los tiempos de los eventos y dónde se deben realizar las optimizaciones. Las herramientas de laboratorio no interactúan automáticamente con la página, por lo que necesitan una entrada manual mientras miden o deben tener una secuencia de comandos con una herramienta de automatización como Puppeteer. Cuando se identifican interacciones clave de los recorridos típicos del usuario, se pueden probar para identificar problemas o crear secuencias de comandos y colocarlas en pruebas de CI para evitar regresiones.
Descubre lo que experimentan tus usuarios reales (datos de campo)
Visita PageSpeed Insights
PageSpeed Insights extrae datos de campo de la API del Informe sobre la experiencia del usuario en Chrome (CrUX) y proporciona una instantánea del rendimiento de tu página y origen durante los últimos 28 días. Estos datos ahora incluyen la INP:
Pruébalo en PageSpeed Insights.
Recopila tus propios valores de INP del campo
Si quieres recopilar datos de INP para un sitio por tu cuenta, la forma más fácil de hacerlo es con la biblioteca web-vitals, que ahora tiene compatibilidad completa con INP en su versión beta.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Obtén más información sobre web-vitals y cómo medir en la consola de Herramientas para desarrolladores.
Extensión de Chrome de Web Vitals
La extensión de Métricas web proporciona una descripción general de la experiencia de la página de tus usuarios (desde la API de CrUX) y los valores en tiempo real de las Métricas web esenciales y las métricas clave de la visita actual a la página.
Instala la extensión de Web Vitals para Chrome.
Diagnostica problemas de rendimiento (datos de laboratorio)
Usa los flujos de usuarios de Lighthouse
El nuevo modo de período en el panel de Lighthouse de Herramientas para desarrolladores te permite iniciar Lighthouse, interactuar con tu página de prueba como desees y, luego, obtener un informe de lo que sucedió durante ese tiempo. Este informe ahora incluye la INP y una auditoría para ayudar a diagnosticar cualquier problema de capacidad de respuesta.
La misma serie de interacciones se puede automatizar con los flujos de usuarios de Lighthouse. La INP está disponible en los flujos de usuarios a partir de Lighthouse 9.6.
Detalles de disponibilidad de la herramienta
- Informe sobre la experiencia del usuario en Chrome (CrUX)
- BigQuery: La INP está disponible como
interaction_to_next_paint - API de CrUX: La INP está disponible como
interaction_to_next_paint - Panel de CrUX: Incluye datos de INP.
- BigQuery: La INP está disponible como
- PageSpeed Insights
- pagespeed.web.dev: Datos de campo de INP a nivel de la página y del origen de la API de CrUX que se muestran como 'Interaction to Next Paint'
- API de PSI: La INP está disponible como
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsBiblioteca JSweb-vitalsincluye compatibilidad con INP.
- Extensión de Chrome de Web Vitals
- Incluye la medición de INP local y los datos de campo de INP cuando están disponibles en la API de CrUX.
- Lighthouse
- Panel de Lighthouse en Herramientas para desarrolladores: La medición de INP está disponible en el modo "intervalo de tiempo" en Chrome Canary (104).
- Módulo npm de Lighthouse: La medición de INP está disponible en intervalos de tiempo (usa Puppeteer para la entrada sintética).
Trabajo futuro y solicitud de comentarios
En el futuro, los equipos de herramientas de Chrome seguirán invirtiendo en capacidades de depuración y recomendaciones de optimización para la INP.
Si tienes comentarios sobre cualquier aspecto, desde la utilidad de la métrica hasta la facilidad de medición, envíalos al grupo de Google web-vitals-feedback.