Nos complace contar con la compatibilidad de la primera ronda de herramientas con la nueva métrica de respuesta pendiente, Interaction to Next Paint (INP). Para obtener más información sobre la métrica en sí, consulta la guía oficial sobre métricas del INP.
Medición sugerida
El objetivo de medir el 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 cuando los usuarios reales visitan el sitio usando los datos de campo.
Medir el INP en el lab ayuda a comprender mejor los tiempos de los eventos y dónde deben ocurrir las optimizaciones. Las herramientas del lab no interactuarán automáticamente con la página, por lo que necesitan entradas manuales mientras realizan las mediciones o deben programarse con una herramienta de automatización como Puppeteer. Cuando se identifican interacciones clave a partir de los recorridos típicos de los usuarios, se pueden probar para identificar problemas o con secuencias de comandos, y colocarlas en pruebas de CI para evitar regresiones.
Descubre qué experimentan tus usuarios reales (datos de campo)
Visita PageSpeed Insights
PageSpeed Insights extrae datos de campo de la API de Chrome User Experience (CrUX) y proporciona un resumen del rendimiento de tu página y origen durante los últimos 28 días. Estos datos ahora incluyen INP:
Pruébala en PageSpeed Insights.
Recopila tus propios valores de INP del campo
Si deseas recopilar datos de INP para un sitio por tu cuenta, la forma más fácil de hacerlo es a través de la biblioteca de web-vitals, que ahora es totalmente compatible 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 brinda una descripción general de la experiencia de página de los usuarios (desde la API de CrUX), así como 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)
Cómo usar flujos de usuarios de Lighthouse
El nuevo modo de período de Lighthouse en el panel de Herramientas para desarrolladores te permite iniciar Lighthouse, interactuar con la página de prueba como quieras y 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 respuesta.
Se puede automatizar la misma serie de interacciones con los flujos de usuarios de Lighthouse. 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: 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 de origen de la API de CrUX aparecen como "Interaction to Next Paint"
- API de PSI: INP disponible como
INTERACTION_TO_NEXT_PAINT_MS
- Biblioteca de JS de
web-vitalsweb-vitalsincluye compatibilidad con INP
- Extensión de Chrome de Métricas web
- Incluye los datos del campo de INP y la medición local de INP cuando estén disponibles en la API de CrUX
- Faro
- Panel Lighthouse en Herramientas para desarrolladores: Medición de INP disponible en modo de período en Chrome Canary (104)
- Módulo de npm de Lighthouse: Medición de INP disponible en períodos (usa Tippeteer para una entrada sintética)
Trabajo futuro y solicitud de comentarios
De ahora en adelante, los equipos de herramientas de Chrome continuarán invirtiendo en capacidades de depuración y recomendaciones de optimización para INP.
Si tienes comentarios sobre algún aspecto, desde la utilidad de las métricas hasta la facilidad de medición, llévalos al grupo de Google web-vitals-feedback.