Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Todo lo que Lighthouse te está mostrando (pero ...

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.

Estela Franco

May 08, 2024
Tweet

More Decks by Estela Franco

Other Decks in Marketing & SEO

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 5 Febrero 2022 Desktop Core

    Web Vitals Loading Interactivity Visual Stability Junio 2021 Mobile Core Web Vitals
  5. @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.
  6. @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
  7. @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
  8. @SearchLDN Estela Franco - @guaca 10 Performance Score Métricas y

    valores View Treemap Screenshots Diagnósticos Auditorías aprobadas Filtros PageSpeed Insights
  9. @SearchLDN Estela Franco - @guaca 16 Estos datos no afectan

    directamente a la puntuación del rendimiento. PageSpeed Insights
  10. @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
  11. @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
  12. @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
  13. @SearchLDN Estela Franco - @guaca 30 Detalle de recursos por

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

    audits.metrics.third-party-summary.details.items Respuesta JSON
  15. @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
  16. @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
  17. @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: