Todo lo que Lighthouse te está mostrando (pero tú no estás viendo)

Slide 1

Slide 1 text

@SearchLDN Estela Franco - @guaca @SearchLDN Estela Franco - @guaca Todo lo que Lighthouse te está mostrando (pero tú no estás viendo)

Slide 2

Slide 2 text

@SearchLDN Estela Franco - @guaca La Web Performance o Rendimiento Web es el tiempo que tarda un sitio en cargarse, ser interactivo y responsivo, y qué tan ﬂuido es el contenido durante las interacciones del usuario. MDN Web Docs 2

Slide 3

Slide 3 text

@SearchLDN Estela Franco - @guaca 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.

Slide 4

Slide 4 text

@SearchLDN Estela Franco - @guaca 4 Core Web Vitals

Slide 5

Slide 5 text

@SearchLDN Estela Franco - @guaca 5 Febrero 2022 Desktop Core Web Vitals Loading Interactivity Visual Stability Junio 2021 Mobile Core Web Vitals

Slide 6

Slide 6 text

@SearchLDN Estela Franco - @guaca Lighthouse 6 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.

Slide 7

Slide 7 text

@SearchLDN Estela Franco - @guaca 7 PageSpeed Insights (UI o API) Chrome DevTools Extensión Chrome Línea de Comandos Integración Continua Herramientas Externas Lighthouse

Slide 8

Slide 8 text

@SearchLDN Estela Franco - @guaca 8 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 PageSpeed Insights

Slide 9

Slide 9 text

@SearchLDN Estela Franco - @guaca 9 PageSpeed Insights

Slide 10

Slide 10 text

@SearchLDN Estela Franco - @guaca 10 Performance Score Métricas y valores View Treemap Screenshots Diagnósticos Auditorías aprobadas Filtros PageSpeed Insights

Slide 11

Slide 11 text

@SearchLDN Estela Franco - @guaca 11 PageSpeed Insights

Slide 12

Slide 12 text

@SearchLDN Estela Franco - @guaca 12 PageSpeed Insights

Slide 13

Slide 13 text

@SearchLDN Estela Franco - @guaca 13 PageSpeed Insights

Slide 14

Slide 14 text

@SearchLDN Estela Franco - @guaca 14 PageSpeed Insights

Slide 15

Slide 15 text

@SearchLDN Estela Franco - @guaca 15 PageSpeed Insights

Slide 16

Slide 16 text

@SearchLDN Estela Franco - @guaca 16 Estos datos no afectan directamente a la puntuación del rendimiento. PageSpeed Insights

Slide 17

Slide 17 text

@SearchLDN Estela Franco - @guaca 17 PageSpeed Insights

Slide 18

Slide 18 text

@SearchLDN Estela Franco - @guaca 18 PageSpeed Insights

Slide 19

Slide 19 text

@SearchLDN Estela Franco - @guaca 19 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.). Chrome DevTools

Slide 20

Slide 20 text

@SearchLDN Estela Franco - @guaca 20 Chrome DevTools

Slide 21

Slide 21 text

@SearchLDN Estela Franco - @guaca 21 Chrome DevTools

Slide 22

Slide 22 text

@SearchLDN Estela Franco - @guaca 22 Chrome DevTools

Slide 23

Slide 23 text

@SearchLDN Estela Franco - @guaca 23 Chrome DevTools 6.845 líneas de JSON 😱

Slide 24

Slide 24 text

@SearchLDN Estela Franco - @guaca PageSpeed Insights (UI o API) 24 Extensión Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas Respuesta JSON

Slide 25

Slide 25 text

@SearchLDN Estela Franco - @guaca 25 audits.metrics Respuesta JSON

Slide 26

Slide 26 text

@SearchLDN Estela Franco - @guaca 26 audits.metrics Respuesta JSON

Slide 27

Slide 27 text

@SearchLDN Estela Franco - @guaca 27 audits.metrics Respuesta JSON

Slide 28

Slide 28 text

@SearchLDN Estela Franco - @guaca 28 ¿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 Respuesta JSON

Slide 29

Slide 29 text

@SearchLDN Estela Franco - @guaca 29 Métricas sin emular conexión audits.metrics Respuesta JSON

Slide 30

Slide 30 text

@SearchLDN Estela Franco - @guaca 30 Detalle de recursos por tipo audits.metrics.resource-summary.details.items Respuesta JSON

Slide 31

Slide 31 text

@SearchLDN Estela Franco - @guaca 31 Detalle de recursos third-party audits.metrics.third-party-summary.details.items Respuesta JSON

Slide 32

Slide 32 text

@SearchLDN Estela Franco - @guaca 32 audits.server-response-time Time To First Byte (TTFB) Respuesta JSON

Slide 33

Slide 33 text

@SearchLDN Estela Franco - @guaca 33 Chrome DevTools

Slide 34

Slide 34 text

@SearchLDN Estela Franco - @guaca 34 Chrome DevTools

Slide 35

Slide 35 text

@SearchLDN Estela Franco - @guaca 35 Entonces…

Slide 36

Slide 36 text

@SearchLDN Estela Franco - @guaca 36 It depends…

Slide 37

Slide 37 text

@SearchLDN Estela Franco - @guaca 37 It depends…

Slide 38

Slide 38 text

@SearchLDN Estela Franco - @guaca 38 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 Trust the process

Slide 39

Slide 39 text

@SearchLDN Estela Franco - @guaca 39 ▪ Lighthouse es una herramienta automatizada para auditar distintos aspectos de una página web. ▪ Integrarla en nuestro framework de trabajo nos ayudará a mejorar la performance de nuestra web. ▪ Podemos usarla desde diferentes plataformas. ▪ Un buen score en Lighthouse no implica buenos resultados en CWV. ▪ More than meets the eye. Key Takeaways

Slide 40

Slide 40 text

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