Slide 1
Slide 1 text
Interaction to Next Paint:
Qué es y cómo optimizarlo
@guaca #BCNWebPerf
Slide 2
Slide 2 text
guaca
Estela Franco
Web Performance Specialist
at Schneider Electric
@guaca
estelafranco.com
webperfimpacters.com
@guaca #BCNWebPerf
mujeresenseo.es
Slide 3
Slide 3 text
CORE WEB VITALS
@guaca #BCNWebPerf
Slide 4
Slide 4 text
CORE WEB VITALS
@guaca #BCNWebPerf
Slide 5
Slide 5 text
CORE WEB VITALS
No aplica a
desktop
Junio 2021
Mobile
Febrero 2022
Desktop
@guaca #BCNWebPerf
Slide 6
Slide 6 text
“
user-centric
user experience,
Each of the Core Web Vitals represents
a distinct facet of the user experience,
is measurable in the field, and reflects
the real-world experience of a critical
user-centric outcome.
@guaca #BCNWebPerf
Slide 7
Slide 7 text
UX
@guaca #BCNWebPerf
Slide 8
Slide 8 text
Negocio
SEO IT
@guaca #BCNWebPerf
Slide 9
Slide 9 text
Carga: LCP
El tiempo para renderizar la imagen o bloque de texto más
grande visible dentro del viewport.
▹ ![]()
▹ dentro de un
▹ Atributo “poster” de un tag
▹ Una imagen de background que se carga con url()
▹ Elementos a nivel de bloque que contienen nodos de
texto
@guaca #BCNWebPerf
Slide 10
Slide 10 text
Carga: LCP
El tiempo para renderizar la imagen o bloque de texto más
grande visible dentro del viewport.
@guaca #BCNWebPerf
Slide 11
Slide 11 text
Carga: LCP
@guaca #BCNWebPerf
Slide 12
Slide 12 text
Estabilidad Visual: CLS
Mide la ráfaga más grande de puntuaciones de cambio de diseño para cada cambio
de diseño inesperado que se produce durante toda la vida útil de una página.
@guaca #BCNWebPerf
fracción de impacto * fracción de distancia
Slide 13
Slide 13 text
Estabilidad Visual: CLS
Mide la ráfaga más grande de puntuaciones de cambio de diseño para cada cambio
de diseño inesperado que se produce durante toda la vida útil de una página.
@guaca #BCNWebPerf
Slide 14
Slide 14 text
Estabilidad Visual: CLS
Mide la ráfaga más grande de puntuaciones de cambio de diseño para cada cambio
de diseño inesperado que se produce durante toda la vida útil de una página.
@guaca #BCNWebPerf
Slide 15
Slide 15 text
Estabilidad Visual: CLS
@guaca #BCNWebPerf
Slide 16
Slide 16 text
Interactividad: FID
comenzar a procesar esa interacción
El FID mide la interacción de acciones discretas:
▹ Clic
▹ Tap
▹ Presionar una tecla
Es una métrica que no podemos medir en datos de laboratorio.
Mide el tiempo desde que un usuario interactúa por primera vez con una página
hasta que el navegador puede comenzar a procesar esa interacción.
@guaca #BCNWebPerf
Slide 17
Slide 17 text
Interactividad: FID
@guaca #BCNWebPerf
Mide el tiempo desde que un usuario interactúa por primera vez con una página
hasta que el navegador puede comenzar a procesar esa interacción.
Slide 18
Slide 18 text
Interactividad: FID
@guaca #BCNWebPerf
Slide 19
Slide 19 text
Interactividad: FID
@guaca #BCNWebPerf
Slide 20
Slide 20 text
Solamente mide la primera
interacción. Esto excluye el
90% del tiempo que
pasamos en una página.
Limitaciones del FID
Solamente mide la demora
hasta que puede comenzar
a procesar la interacción.
@guaca #BCNWebPerf
Slide 21
Slide 21 text
FID y desarrollo web
@guaca #BCNWebPerf
Slide 22
Slide 22 text
FID en el CrUX
@guaca #BCNWebPerf
Slide 23
Slide 23 text
¿Las webs responden rápido a las interacciones?
@guaca #BCNWebPerf
Slide 24
Slide 24 text
INTERACTION
TO NEXT
PAINT
@guaca #BCNWebPerf
Slide 25
Slide 25 text
Interaction to Next Paint
▹ Evalúa la capacidad de respuesta a las
interacciones que un usuario hace con una
página.
▹ Objetivo: garantizar que el tiempo desde que
se inicia una interacción hasta que se pinta el
siguiente frame sea lo más corto posible.
▹ Reporta un valor por debajo del cual
ocurrieron todas o casi todas las interacciones.
@guaca #BCNWebPerf
Slide 26
Slide 26 text
Interaction to Next Paint
@guaca #BCNWebPerf
Slide 27
Slide 27 text
Interaction to Next Paint
@guaca #BCNWebPerf
Slide 28
Slide 28 text
Interaction to Next Paint
@guaca #BCNWebPerf
Slide 29
Slide 29 text
¿Qué mide el INP?
@guaca #BCNWebPerf
Slide 30
Slide 30 text
▹ Solo la primera interacción.
▹ No es perceptible para el
usuario.
▹ Reporta cuándo el hilo principal
puede empezar a procesar la
interacción.
▹ Todas las interacciones durante
toda la vida útil de la página.
▹ Es perceptible para el usuario.
▹ Reporta el valor de la
interacción más larga*.
INP
vs
FID
* Percentil 100 si hay < 50 interacciones, percentil 98
o 99 si hay > 50 interacciones
@guaca #BCNWebPerf
Slide 31
Slide 31 text
INP en el CrUX
@guaca #BCNWebPerf
Slide 32
Slide 32 text
¿Cómo medir el INP?
▹ Como el FID, es una métrica de campo - no está disponible en herramientas de
synthetic monitoring.
▹ CrUX registra datos del INP desde febrero de 2022.
▹ PageSpeed Insights muestra datos de INP.
▹ No está disponible en Search Console.
▹ Empieza a estar disponible en algunas herramientas RUM.
@guaca #BCNWebPerf
Slide 33
Slide 33 text
▹ CWV Chrome extension
¿Cómo medir el INP?
@guaca #BCNWebPerf
Slide 34
Slide 34 text
▹ Librería web-vitals.js
¿Cómo medir el INP?
@guaca #BCNWebPerf
Slide 35
Slide 35 text
¿Cómo medir el INP?
▸ Opciones de instalación
■ npm install web-vitals
■ Como desde un CDN
▸ Enviar los datos a:
■ Google Analytics (UA/GA4)
■ Google Tag Manager
bit.ly/webvitals-js
bit.ly/webvitals-report
@guaca #BCNWebPerf
▹ Librería web-vitals.js
Slide 36
Slide 36 text
¿Cómo medir el INP?
@guaca #BCNWebPerf
Slide 37
Slide 37 text
¿Cómo optimizar el INP?
@guaca #BCNWebPerf
Slide 38
Slide 38 text
¿Cómo optimizar el INP?
Investigación
Averiguar qué está causando malos
resultados de INP, identificando cuáles
son las interacciones más lentas con
datos de campo.
▹ web-vitals.js 👍
@guaca #BCNWebPerf
Slide 39
Slide 39 text
¿Cómo optimizar el INP?
Reproducir interacción
Una vez identificadas las interacciones
críticas, podemos reproducirlas en el
laboratorio
▹ Chrome Performance profiler 👍
@guaca #BCNWebPerf
Slide 40
Slide 40 text
¿Cómo optimizar el INP?
Reproducir interacción
Una vez identificadas las interacciones
críticas, podemos reproducirlas en el
laboratorio
▹ Chrome Performance profiler 👍
▹ Lighthouse en modo Timespan 👍
@guaca #BCNWebPerf
Slide 41
Slide 41 text
¿Cómo optimizar el INP?
Reproducir interacción
Una vez identificadas las interacciones
críticas, podemos reproducirlas en el
laboratorio
▹ Chrome Performance profiler 👍
▹ Lighthouse en modo Timespan 👍
@guaca #BCNWebPerf
Slide 42
Slide 42 text
¿Cómo optimizar el INP?
Reducir Input Delay
@guaca #BCNWebPerf
▹ Dividir una long task en varias tasks.
▹ Usar Scheduler API para priorizar
tareas críticas y diferir las no críticas.
▹ Valorar el usar isInputPending para
comprobar si hay algún input del
usuario pendiente de atender.
Identificar posibles tasks que estén
provocando un elevado input delay
puede ayudarnos a reducir el INP.
Slide 43
Slide 43 text
Asegurarnos de que los callbacks que se
ejecutan como respuesta a una
interacción se completan lo más rápido
posible.
¿Cómo optimizar el INP?
Minimizar el Processing time
@guaca #BCNWebPerf
▹ Limitar el código que se ejecuta a la
lógica necesaria para actualizar el
siguiente frame.
▹ Diferir todo lo demás a una tarea
posterior.
Slide 44
Slide 44 text
Es la parte del proceso donde
seguramente menos control vayamos a
tener.
¿Cómo optimizar el INP?
Minimizar el Presentation delay
@guaca #BCNWebPerf
▹ Evitar el uso de
requestAnimationFrame() para
tareas que no están relacionadas con
el renderizado.
▹ Cuidado con el uso de async/await.
▹ Cuidado con el uso de ResizeObserver.
Slide 45
Slide 45 text
En resumen…
@guaca #BCNWebPerf
Slide 46
Slide 46 text
KEY
TAKEAWAYS ▹ INP es una métrica de capacidad
de respuesta.
▹ Mide el tiempo por debajo del
cual han sucedido (casi) todas las
interacciones.
▹ Está previsto que pueda sustituir
al FID como CWV.
▹ Mide y optimiza desde ya.
@guaca #BCNWebPerf
Slide 47
Slide 47 text
Enlaces de interés
▹ Optimize long tasks: https://web.dev/optimize-long-tasks/
▹ Event Timing API: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming
▹ Prioritized Task Scheduling API:
https://developer.mozilla.org/en-US/docs/Web/API/Prioritized_Task_Scheduling_API
▹ isInputPending: https://developer.chrome.com/articles/isinputpending/
▹ requestAnimationFrame:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
@guaca #BCNWebPerf
Slide 48
Slide 48 text
¡Gracias!
¿Preguntas?
@guaca #BCNWebPerf