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

Esta es la presentación de mi charla en el Search Barcelona el 10 de mayo de 2024.

Transcript

1. @SearchLDN Estela Franco - @guaca @SearchLDN Estela Franco - @guaca Todo lo que Lighthouse te está mostrando (pero tú no estás viendo)
2. @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 fluido es el contenido durante las interacciones del usuario. MDN Web Docs 2
3. @SearchLDN Estela Franco - @guaca Core Web Vitals 3 Core Web Vitals es una iniciativa de Google para proporcionar una guía unificada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web.
4. @SearchLDN Estela Franco - @guaca 4 Core Web Vitals
5. @SearchLDN Estela Franco - @guaca 5 Febrero 2022 Desktop Core Web Vitals Loading Interactivity Visual Stability Junio 2021 Mobile Core Web Vitals
6. @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.
7. @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
8. @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
9. @SearchLDN Estela Franco - @guaca 9 PageSpeed Insights
10. @SearchLDN Estela Franco - @guaca 10 Performance Score Métricas y valores View Treemap Screenshots Diagnósticos Auditorías aprobadas Filtros PageSpeed Insights
11. @SearchLDN Estela Franco - @guaca 11 PageSpeed Insights
12. @SearchLDN Estela Franco - @guaca 12 PageSpeed Insights
13. @SearchLDN Estela Franco - @guaca 13 PageSpeed Insights
14. @SearchLDN Estela Franco - @guaca 14 PageSpeed Insights
15. @SearchLDN Estela Franco - @guaca 15 PageSpeed Insights
16. @SearchLDN Estela Franco - @guaca 16 Estos datos no afectan directamente a la puntuación del rendimiento. PageSpeed Insights
17. @SearchLDN Estela Franco - @guaca 17 PageSpeed Insights
18. @SearchLDN Estela Franco - @guaca 18 PageSpeed Insights
19. @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
20. @SearchLDN Estela Franco - @guaca 20 Chrome DevTools
21. @SearchLDN Estela Franco - @guaca 21 Chrome DevTools
22. @SearchLDN Estela Franco - @guaca 22 Chrome DevTools
23. @SearchLDN Estela Franco - @guaca 23 Chrome DevTools 6.845 líneas de JSON 😱
24. @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
25. @SearchLDN Estela Franco - @guaca 25 audits.metrics Respuesta JSON
26. @SearchLDN Estela Franco - @guaca 26 audits.metrics Respuesta JSON
27. @SearchLDN Estela Franco - @guaca 27 audits.metrics Respuesta JSON
28. @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
29. @SearchLDN Estela Franco - @guaca 29 Métricas sin emular conexión audits.metrics Respuesta JSON
30. @SearchLDN Estela Franco - @guaca 30 Detalle de recursos por tipo audits.metrics.resource-summary.details.items Respuesta JSON
31. @SearchLDN Estela Franco - @guaca 31 Detalle de recursos third-party audits.metrics.third-party-summary.details.items Respuesta JSON
32. @SearchLDN Estela Franco - @guaca 32 audits.server-response-time Time To First Byte (TTFB) Respuesta JSON
33. @SearchLDN Estela Franco - @guaca 33 Chrome DevTools
34. @SearchLDN Estela Franco - @guaca 34 Chrome DevTools
35. @SearchLDN Estela Franco - @guaca 35 Entonces…
36. @SearchLDN Estela Franco - @guaca 36 It depends…
37. @SearchLDN Estela Franco - @guaca 37 It depends…
38. @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
39. @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
40. @SearchLDN Estela Franco - @guaca @guaca estelafranco.com ¡Gracias! ¿Preguntas? You can find me at: @guaca estelafranco.com Estela Franco Web Performance Specialist at Schneider Electric /estelafranco mujeresenseo.es You can find me at: