SOB 2025 - En busca de las Core Web Vitals

Estela Franco, Senior Technical Architect, Web Performance at Shopify, guided the audience on an "epic adventure" to "conquer the Core Web Vitals (CWV)." Her talk focused on how these metrics are crucial to the success of any website in the digital realm, as Google uses them, along with other factors, to reward ranking. Estela emphasized that the goal is to surpass three levels (load speed, visual stability, and interactivity) to earn a reward, and that we are not alone on this journey, as we have key tools at our disposal.

Transcript

1. En Busca de las Core Web Vitals
2. SPEAKER Estela Franco Rol: Hechicera WebPerf Tool: Chrome DevTools Power-up: Visión de Cuellos de Botella Equipo: Growth Services (WebPerf,SEO,CRO,Dev)
3. Tutorial Core Web Vitals
4. Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores… Érase una vez en Google para desarrolladores…
5. Las Core Web Vitals son un conjunto de métricas que miden la experiencia real que tienen los usuarios con la velocidad de carga del contenido, la estabilidad visual y la interactividad de las páginas.
6. Esto, junto con otros aspectos de la experiencia en la página, se corresponde con lo que nuestros sistemas de posicionamiento principales buscan recompensar.
7. Velocida d de Carga Est. Visual Interac- tividad LEVEL 1 LEVEL 2 LEVEL 3
8. SIDEKICK Chrome UX Report Alias: CrUX Cómo invocar - CrUX BigQuery / API - PSI web / API - Google Search Console - Chrome DevTools
9. TOOLKIT Real User Monitoring web-vitals.js SpeedCurve DebugBear Catchpoint RUMvision mPulse (Akamai) RUM New Relic Datadog Calibre Speetals …y muchas más! Do It Yourself
10. ¿Qué datos usa Google Search para evaluar las CWV de una página web? A. Herramienta RUM B. Lighthouse score C. Experiencia de Googlebot cuando rastrea D. Chrome UX Report QUIZZ TUTORIAL
11. ¿Qué datos usa Google Search para evaluar las CWV de una página web? A. Herramienta RUM B. Lighthouse score C. Experiencia de Googlebot cuando rastrea D. Chrome UX Report QUIZZ TUTORIAL
12. Comienza La Aventura
13. Level 1 Velocidad de Carga
14. LEVEL 1 LCP Largest Contentful Paint Alias: LCP Qué mide: Tiempo de renderización de la imagen, el bloque de texto o el video más grandes que se pueden ver en el viewport, en relación con el momento en que el usuario navegó a la página.
15. LEVEL 1 LCP
16. LEVEL 1 ¿Hasta cuándo se reporta el LCP? A. Hasta “load” B. Hasta “DCL” C. Hasta interacción D. Toda la navegación LCP
17. LEVEL 1 ¿Hasta cuándo se reporta el LCP? A. Hasta “load” B. Hasta “DCL” C. Hasta interacción D. Toda la navegación LCP
18. LEVEL 1 ¿Qué tipo de recurso suele ser el elemento LCP? A. Imagen (o vídeo) B. Nodo de texto LCP
19. LEVEL 1 ¿Qué tipo de recurso suele ser el elemento LCP? A. Imagen (o vídeo) B. Nodo de texto LCP
20. LEVEL 1 LCP
21. - Mejora TTFB - Optimiza recursos render-blocking - Ojo aviso de cookies y pop-ups - Utiliza poster attribute en vídeos - Evita CSR del elemento LCP - Evita lazyloading del LCP (imagen) LEVEL 1 LCP ¿Cómo vencer a LCP?
22. Level 2 Estabilidad Visual
23. LEVEL 2 CLS Cumulative Layout Shift Alias: CLS Qué mide: El aumento de actividad más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que ocurre durante todo el ciclo de vida de una página.
24. LEVEL 2 CLS Antes Después Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus, turpis ut vulputate dictum, orci massa feugiat velit, ac elementum elit ipsum at libero. In hac habitasse platea dictumst. Morbi quis maximus metus, vel bibendum nibh. Suspendisse ac maximus lorem, et condimentum ipsum. Suspendisse dolor mi, feugiat in faucibus fringilla, tincidunt a diam. Vestibulum ac ipsum a eros pellentesque vehicula. Donec dignissim ut tortor eget tristique. Suspendisse nec fermentum diam. In facilisis condimentum rhoncus. Vivamus faucibus eros sed commodo faucibus. Sed lobortis diam a magna aliquet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vehicula eros ut nibh viverra, ac pharetra arcu bibendum. Nunc sed massa rutrum dolor mattis maximus eget eget risus. Curabitur suscipit augue vitae felis imperdiet iaculis. Curabitur mollis commodo metus, quis congue lacus sagittis ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus, turpis ut vulputate dictum, orci massa feugiat velit, ac elementum elit ipsum at libero. In hac habitasse platea dictumst. Morbi quis maximus metus, vel bibendum nibh. Suspendisse ac maximus lorem, et condimentum ipsum. Suspendisse dolor mi, feugiat in faucibus fringilla, tincidunt a diam. Vestibulum ac ipsum a eros pellentesque vehicula. Donec dignissim ut tortor eget tristique. Suspendisse nec fermentum diam. In facilisis condimentum rhoncus. Vivamus faucibus eros sed commodo faucibus. Sed lobortis diam a magna aliquet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vehicula eros ut nibh viverra, ac pharetra arcu bibendum. Nunc sed massa rutrum dolor mattis maximus eget eget risus. Curabitur suscipit augue vitae felis imperdiet iaculis. Curabitur mollis commodo metus, quis congue lacus sagittis ac. BANNER IMAGE
25. LEVEL 2 CLS
26. LEVEL 2 CLS ¿Hasta cuándo se reporta el CLS? A. Hasta “load” B. Hasta “DCL” C. Hasta interacción D. Toda la navegación
27. LEVEL 2 CLS ¿Hasta cuándo se reporta el CLS? A. Hasta “load” B. Hasta “DCL” C. Hasta interacción D. Toda la navegación
28. LEVEL 2 CLS ¿Cómo vencer a CLS? - Tamaño explícito de imágenes. - Reserva espacio para contenido dinámico - Uso de min-height / min-width si no sabemos tamaño final - Evita animaciones con height /width/top/right/bottom/left
29. Level 3 Interactividad
30. LEVEL 3 INP Interaction to Next Paint Alias: INP Qué mide: Capacidad de respuesta de una página ante interac- ciones del usuario mediante la observación de la latencia de todas las interacciones de clic, presión y teclado que se producen durante la visita del usuario a la página.
31. LEVEL 3 INP
32. LEVEL 3 INP
33. ¿Cuál de las siguientes interacciones no es medida por INP? A. Clics con el mouse B. Pulsaciones de tecla C. Movimientos del mouse D. Taps en pantallas táctiles LEVEL 3 INP
34. ¿Cuál de las siguientes interacciones no es medida por INP? A. Clics con el mouse B. Pulsaciones de tecla C. Movimientos del mouse D. Taps en pantallas táctiles LEVEL 3 INP
35. LEVEL 3 INP ¿Cómo vencer a INP? - Evita JS que no sea necesario - Minimiza el tamaño del DOM - Optimiza las “long tasks” - Divide tareas en tareas más pequeñas - requestAnimationFrame() - Ojo con renderizar HTML con JS
36. Endgame El tesoro prometido
37. ¿Qué CWV cuesta más de mantener por debajo de los umbrales definidos por Google? A. LCP B. CLS C. INP D. Todo es easy peasy
38. ¿Qué CWV cuesta más de mantener por debajo de los umbrales definidos por Google? A. LCP B. CLS C. INP D. Todo es easy peasy
39. Datos CrUX Abril 2025 68% 79% 85% Buen LCP Buen CLS Buen INP Buenas CWV 53%
41. ¡Gracias, Estela! Pero el tesoro está en otro castillo
45. No estés triste… Has desbloqueado un power-up durante este viaje
46. Mejor UX
47. entonces...
48. Mejor CR?
49. Bonus Level Datos Internos de Shopify
51. CWV vs CR - 9 % - 2 2 % - 2 7 % - 3 4 % ALL CWV OK LCP INP OK LCP CLS OK CLS INP OK NO CWV OK
52. LCP vs CR
53. INP vs CR
54. CLS vs CR
55. Game Over