Nos complace tener 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 métricas 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 para los usuarios reales que visitan tu sitio mediante datos de campo.
Medir la INP en el lab ayuda a comprender mejor los tiempos de los eventos y dónde se deben realizar las optimizaciones. Las herramientas de Lab no interactúan automáticamente con la página, por lo que necesitan una entrada manual mientras realizan mediciones o deben escribirse con una herramienta de automatización como Puppeteer. Cuando se identifican interacciones clave a partir de recorridos de usuarios típicos, se pueden probar para identificar problemas o crear secuencias de comandos, y se pueden incluir 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 un resumen del rendimiento de tu página y de tu origen durante los 28 días anteriores. Estos datos ahora incluyen INP:
Pruébala en PageSpeed Insights.
Recopila tus propios valores de INP del campo
Si deseas recopilar datos de INP de un sitio por tu cuenta, la forma más fácil de hacerlo es con la biblioteca web-vitals, que ahora tiene compatibilidad total 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);
});
Extensión de Chrome de Métricas web
La extensión de métricas web esenciales proporciona una descripción general de la experiencia de 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 Métricas web para Chrome.
Diagnostica problemas de rendimiento (datos de lab)
Usa flujos de usuarios de Lighthouse
El nuevo modo de período en el panel de Lighthouse de DevTools 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 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. El INP está disponible en los flujos de usuarios a partir de Lighthouse 9.6.
Detalles de la disponibilidad de las herramientas
- Informe sobre la experiencia del usuario en Chrome (CrUX)
- BigQuery: INP disponible como
interaction_to_next_paint - API de CrUX: INP disponible como
interaction_to_next_paint - Panel de CrUX: Incluye datos de INP
- BigQuery: INP disponible como
- PageSpeed Insights
- pagespeed.web.dev: Los datos de campo de INP a nivel de la página y del origen de la API de CrUX aparecían como "Interaction to Next Paint".
- API de PSI: INP disponible como
INTERACTION_TO_NEXT_PAINT_MS
- Biblioteca JS
web-vitalsweb-vitalsincluye compatibilidad con INP
- Extensión de Chrome de Métricas web
- Incluye la medición de INP local y los datos del campo de INP cuando están disponibles en la API de CrUX
- Lighthouse
- Panel de Lighthouse en DevTools: La medición de INP está disponible en el modo "timespan" en Chrome Canary (104).
- Módulo de NPM de Lighthouse: La medición de INP está disponible en períodos (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 INP.
Si tienes comentarios sobre la utilidad de la métrica o la facilidad de medición, envíalos al grupo de Google web-vitals-feedback.