INP - Qué es y cómo optimizarlo

Slides de mi presentación en el Barcelona Web Performance meetup el 28 de marzo de 2023.

Transcript

1. Interaction to Next Paint: Qué es y cómo optimizarlo @guaca #BCNWebPerf
2. guaca Estela Franco Web Performance Specialist at Schneider Electric @guaca estelafranco.com webperfimpacters.com @guaca #BCNWebPerf mujeresenseo.es
3. CORE WEB VITALS @guaca #BCNWebPerf
4. CORE WEB VITALS @guaca #BCNWebPerf
5. CORE WEB VITALS No aplica a desktop Junio 2021 Mobile Febrero 2022 Desktop @guaca #BCNWebPerf
6. “ 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
7. UX @guaca #BCNWebPerf
8. Negocio SEO IT @guaca #BCNWebPerf
9. Carga: LCP El tiempo para renderizar la imagen o bloque de texto más grande visible dentro del viewport. ▹ <img> ▹ <image> dentro de un <svg> ▹ Atributo “poster” de un tag <video> ▹ Una imagen de background que se carga con url() ▹ Elementos a nivel de bloque que contienen nodos de texto @guaca #BCNWebPerf
10. Carga: LCP El tiempo para renderizar la imagen o bloque de texto más grande visible dentro del viewport. @guaca #BCNWebPerf
11. Carga: LCP @guaca #BCNWebPerf
12. 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
13. 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
14. 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
15. Estabilidad Visual: CLS @guaca #BCNWebPerf
16. 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
17. 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.
18. Interactividad: FID @guaca #BCNWebPerf
19. Interactividad: FID @guaca #BCNWebPerf
20. 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
21. FID y desarrollo web @guaca #BCNWebPerf
22. FID en el CrUX @guaca #BCNWebPerf
23. ¿Las webs responden rápido a las interacciones? @guaca #BCNWebPerf
24. INTERACTION TO NEXT PAINT @guaca #BCNWebPerf
25. 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
26. Interaction to Next Paint @guaca #BCNWebPerf
27. Interaction to Next Paint @guaca #BCNWebPerf
28. Interaction to Next Paint @guaca #BCNWebPerf
29. ¿Qué mide el INP? @guaca #BCNWebPerf
30. ▹ 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
31. INP en el CrUX @guaca #BCNWebPerf
32. ¿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
33. ▹ CWV Chrome extension ¿Cómo medir el INP? @guaca #BCNWebPerf
34. ▹ Librería web-vitals.js ¿Cómo medir el INP? @guaca #BCNWebPerf
35. ¿Cómo medir el INP? ▸ Opciones de instalación ▪ npm install web-vitals ▪ Como <script> 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
36. ¿Cómo medir el INP? @guaca #BCNWebPerf
37. ¿Cómo optimizar el INP? @guaca #BCNWebPerf
38. ¿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
39. ¿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
40. ¿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
41. ¿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
42. ¿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.
43. 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.
44. 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.
45. En resumen… @guaca #BCNWebPerf
46. 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
47. 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
48. ¡Gracias! ¿Preguntas? @guaca #BCNWebPerf