WAW23 - Exprime al máximo Lighthouse para mejorar las CWV

by Estela Franco

Slide 1

Slide 1 text

Cómo exprimir al máximo Lighthouse para mejorar las Core Web Vitals #WAW23 @guaca Lighthouse Core Web Vitals

Slide 2

Slide 2 text

1. Core Web Vitals 2 #WAW23 @guaca

Slide 3

Slide 3 text

Core Web Vitals 3 Core Web Vitals es una iniciativa de Google para proporcionar una guía uniﬁcada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web. #WAW23 @guaca

Slide 4

Slide 4 text

Core Web Vitals 4 #WAW23 @guaca

Slide 5

Slide 5 text

Core Web Vitals 5 #WAW23 @guaca

Slide 6

Slide 6 text

Core Web Vitals 6 #WAW23 @guaca Junio 2021 Mobile Febrero 2022 Desktop

Slide 7

Slide 7 text

2. Lighthouse 7 #WAW23 @guaca

Slide 8

Slide 8 text

Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Puedes ejecutarlo contra cualquier página web, pública o que requiera autenticación. Chrome Developers 8 #WAW23 @guaca

Slide 9

Slide 9 text

9 #WAW23 @guaca Lighthouse

Slide 10

Slide 10 text

10 #WAW23 @guaca Performance

Slide 11

Slide 11 text

Performance 11 #WAW23 @guaca

Slide 12

Slide 12 text

Performance 12 #WAW23 @guaca

Slide 13

Slide 13 text

Performance 13 #WAW23 @guaca bit.ly/lh-calculator

Slide 14

Slide 14 text

Ejecución 14 #WAW23 @guaca PageSpeed Insights (UI o API) Extensión Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas

Slide 15

Slide 15 text

Ejecución 15 #WAW23 @guaca PageSpeed Insights https://pagespeed.web.dev/ Servidores de Google ▪ North America ▪ Europe ▪ Asia Throttling ▪ Mobile Moto G4 - Slow 4G ▪ Desktop: 1350x940 ~10 Mbps Initial and Single Page Load

Slide 16

Slide 16 text

Extensión de Chrome Ejecución 16 #WAW23 @guaca Mismas características y limitaciones que PageSpeed Insights

Slide 17

Slide 17 text

Ejecución 17 #WAW23 @guaca Chrome DevTools Nuestro dispositivo ▪ Utiliza nuestra ubicación/IP/ ▪ Memoria/CPU dispositivo Throttling* ▪ Mobile Moto G4 - Slow 4G ▪ Desktop: 1350x940 ~10 Mbps Single Page Load ▪ Estado actual de la página (login, cookies, etc.).

Slide 18

Slide 18 text

Ejecución 18 #WAW23 @guaca Línea de comandos Requisitos ▪ Node 16 LTS (16.x) o posterior ▪ Instalar el paquete: npm install -g lighthouse Nuestro dispositivo ▪ Utiliza nuestra ubicación/IP ▪ Memoria/CPU dispositivo Throttling* ▪ Mobile Moto G4 - Slow 4G ▪ Desktop: 1350x940 ~10 Mbps Initial and Single Page Load ▪ Podemos conﬁgurar opciones bit.ly/lh-cli-conﬁg

Slide 19

Slide 19 text

Ejecución 19 #WAW23 @guaca Integración Continua (CI) Documentación: bit.ly/lh-ci Cómo usarlo en un proyecto: https://slides.com/guaca/web-pe rformance-testing En la nube ▪ Levanta un servidor en la plataforma de CI Throttling* ▪ Mobile Moto G4 - Slow 4G ▪ Desktop: 1350x940 ~10 Mbps Initial and Single Page Load ▪ Podemos conﬁgurar opciones bit.ly/lh-cli-conﬁg

Slide 20

Slide 20 text

Ejecución 20 #WAW23 @guaca Herramientas Externas Depende de la tool ▪ Usa API de PSI ▪ Ejecuta Lighthouse desde sus servidores Throttling* ▪ Mobile Moto G4 - Slow 4G ▪ Desktop: 1350x940 ~10 Mbps Initial and Single Page Load ▪ Depende de la tool, podemos conﬁgurar opciones

Slide 21

Slide 21 text

3. Exprimiendo Lighthouse 21 #WAW23 @guaca

Slide 22

Slide 22 text

Resultado HTML 22 #WAW23 @guaca Performance Score Métricas y valores View Treemap Screenshots Oportunidades y Diagnósticos Auditorías aprobadas Filtros

Slide 23

Slide 23 text

23 #WAW23 @guaca Treemap

Slide 24

Slide 24 text

24 #WAW23 @guaca Treemap

Slide 25

Slide 25 text

25 #WAW23 @guaca Oportunidades

Slide 26

Slide 26 text

26 #WAW23 @guaca Oportunidades

Slide 27

Slide 27 text

27 #WAW23 @guaca Oportunidades Estas sugerencias pueden ayudar a que tu página cargue más rápido. No afectan directamente a la puntuación de rendimiento.

Slide 28

Slide 28 text

28 #WAW23 @guaca Oportunidades ▪ Eliminar recursos render-blocking ▪ Tamaño adecuado de imágenes ▪ Aplazar imágenes fuera de pantalla ▪ Minificar CSS ▪ Minificar JavaScript ▪ Eliminar CSS no usado ▪ Codificar imágenes de manera eficiente ▪ Servir imágenes en formatos modernos ▪ Habilitar la compresión de texto ▪ Preconectarse a los orígenes requeridos ▪ Reducir los Tiempos de respuesta del servidor (TTFB) ▪ Evitar los redireccionamientos múltiples de páginas ▪ Precargar consultas claves ▪ Usar formatos de video para contenido animado ▪ Reducir el impacto del código third-party ▪ Evita las animaciones no compuestas ▪ Carga diferida de recursos de terceros con fachadas bit.ly/lh-docs

Slide 29

Slide 29 text

29 #WAW23 @guaca Oportunidades

Slide 30

Slide 30 text

30 #WAW23 @guaca Oportunidades

Slide 31

Slide 31 text

31 #WAW23 @guaca Oportunidades ¡OJO! Ahorro estimado total teniendo en cuenta conexión emulada en el test.

Slide 32

Slide 32 text

32 #WAW23 @guaca Oportunidades

Slide 33

Slide 33 text

33 #WAW23 @guaca Diagnósticos

Slide 34

Slide 34 text

34 #WAW23 @guaca Diagnósticos También se ﬁltran los Diagnósticos con el ﬁltro que apliquemos por métricas

Slide 35

Slide 35 text

▪ User Timing marks and measures ▪ Reducir el tiempo de ejecución de JavaScript ▪ Minimiza el trabajo en el hilo principal ▪ Asegúrate de que el texto permanece visible mientras carga la fuente web ▪ Evita enormes cargas útiles de red ▪ Publica activos estáticos con políticas eﬁcientes para la caché ▪ Evita un tamaño de DOM excesivo ▪ Evita encadenar solicitudes críticas 35 #WAW23 @guaca Diagnósticos ▪ Mantén el número de solicitudes bajo y los tamaños de transferencia pequeños ▪ Asegúrate de que la página se pueda restaurar desde la back/forward cache bit.ly/lh-docs

Slide 36

Slide 36 text

36 #WAW23 @guaca Auditorías Aprobadas Lista de todas las oportunidades y diagnósticos aprobados

Slide 37

Slide 37 text

37 #WAW23 @guaca Respuesta JSON Extensión Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas PageSpeed Insights (UI o API)

Slide 38

Slide 38 text

PageSpeed Insights (UI o API) 38 #WAW23 @guaca Respuesta JSON Extensión Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas

Slide 39

Slide 39 text

39 #WAW23 @guaca Respuesta JSON

Slide 40

Slide 40 text

40 #WAW23 @guaca Respuesta JSON

Slide 41

Slide 41 text

41 #WAW23 @guaca Respuesta JSON

Slide 42

Slide 42 text

42 #WAW23 @guaca Respuesta JSON 8.526 líneas de JSON 😱

Slide 43

Slide 43 text

43 #WAW23 @guaca Respuesta JSON audits.metrics

Slide 44

Slide 44 text

44 #WAW23 @guaca Respuesta JSON audits.metrics

Slide 45

Slide 45 text

45 #WAW23 @guaca Respuesta JSON audits.metrics

Slide 46

Slide 46 text

46 #WAW23 @guaca Respuesta JSON ¿Cómo funciona Lighthouse? 1. Gathering Recopila información con la conexión real 2. Auditing Calcula cómo hubieran sido los resultados con una conexión lenta

Slide 47

Slide 47 text

47 #WAW23 @guaca Respuesta JSON Métricas sin emular conexión audits.metrics

Slide 48

Slide 48 text

48 #WAW23 @guaca Respuesta JSON Detalle de recursos por tipo audits.metrics.resource-summary.details.items

Slide 49

Slide 49 text

49 #WAW23 @guaca Respuesta JSON Detalle de recursos third-party audits.metrics.third-party-summary.details.items

Slide 50

Slide 50 text

50 #WAW23 @guaca Respuesta JSON audits.server-response-time Time To First Byte (TTFB)

Slide 51

Slide 51 text

51 #WAW23 @guaca Respuesta JSON categories.performance.auditRefs

Slide 52

Slide 52 text

52 #WAW23 @guaca Respuesta JSON categories.performance.auditRefs

Slide 53

Slide 53 text

53 #WAW23 @guaca ¿Y ahora qué?

Slide 54

Slide 54 text

54 #WAW23 @guaca ¿Y ahora qué?

Slide 55

Slide 55 text

55 #WAW23 @guaca ¿Y ahora qué?

Slide 56

Slide 56 text

56 #WAW23 @guaca El proceso Auditoría con datos de usuarios reales Priorizamos Medimos con datos de laboratorio (antes de implementar) Medimos con datos de laboratorio (después de implementar) Validamos con datos de usuarios reales

Slide 57

Slide 57 text

4. Key Takeaways 57 #WAW23 @guaca

Slide 58

Slide 58 text

Takeaways 58 #WAW23 @guaca ▪ Lighthouse es una herramienta automatizada que nos ayudará a mejorar la performance de nuestra web. ▪ Podemos usarla desde distintos entornos. ▪ Interpretar correctamente las oportunidades y diagnósticos es clave. ▪ More info than meets the eye.

Slide 59

Slide 59 text

59 #WAW23 @guaca guaca @guaca estelafranco.com mujeresenseo.es ¡Gracias! ¿Preguntas? Estela Franco Web Performance Specialist at Schneider Electric You can ﬁnd me at:

Slide 60

Slide 60 text

La Web Performance es la medida objetiva y experiencia de usuario percibida del tiempo de carga y ejecución de un sitio web o aplicación. MDN Web Docs 60 #WAW23 @guaca

Slide 61

Slide 61 text

Web Performance Carga Tiempo que tarda un sitio en cargarse 61 Responsiveness Ser interactivo y responsivo Fluidez Fluidez durante las interacciones del usuario #WAW23 @guaca

Slide 62

Slide 62 text

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 Largest Contentful Paint 62 #WAW23 @guaca

Slide 63

Slide 63 text

First Input Delay 63 #WAW23 @guaca 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.

Slide 64

Slide 64 text

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. In short: que las cosas no se muevan de sitio inesperadamente mientras navegamos por la página. Cumulative Layout Shift 64 #WAW23 @guaca