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

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

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

Slides de mi charla en el evento WAW23 de Zaragoza en la que hablé sobre cómo exprimir al máximo Lighthouse para mejorar las Core Web Vitals.

Estela Franco

May 11, 2023
Tweet

More Decks by Estela Franco

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 1. Core Web Vitals
    2
    #WAW23 @guaca

    View full-size slide

  3. 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.
    #WAW23 @guaca

    View full-size slide

  4. Core Web Vitals
    4
    #WAW23 @guaca

    View full-size slide

  5. Core Web Vitals
    5
    #WAW23 @guaca

    View full-size slide

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

    View full-size slide

  7. 2. Lighthouse
    7
    #WAW23 @guaca

    View full-size slide

  8. 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

    View full-size slide

  9. 9
    #WAW23 @guaca
    Lighthouse

    View full-size slide

  10. 10
    #WAW23 @guaca
    Performance

    View full-size slide

  11. Performance
    11
    #WAW23 @guaca

    View full-size slide

  12. Performance
    12
    #WAW23 @guaca

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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

    View full-size slide

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

    View full-size slide

  17. 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.).

    View full-size slide

  18. 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 configurar
    opciones
    bit.ly/lh-cli-config

    View full-size slide

  19. 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 configurar
    opciones
    bit.ly/lh-cli-config

    View full-size slide

  20. 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 configurar
    opciones

    View full-size slide

  21. 3. Exprimiendo Lighthouse
    21
    #WAW23 @guaca

    View full-size slide

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

    View full-size slide

  23. 23
    #WAW23 @guaca
    Treemap

    View full-size slide

  24. 24
    #WAW23 @guaca
    Treemap

    View full-size slide

  25. 25
    #WAW23 @guaca
    Oportunidades

    View full-size slide

  26. 26
    #WAW23 @guaca
    Oportunidades

    View full-size slide

  27. 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.

    View full-size slide

  28. 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

    View full-size slide

  29. 29
    #WAW23 @guaca
    Oportunidades

    View full-size slide

  30. 30
    #WAW23 @guaca
    Oportunidades

    View full-size slide

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

    View full-size slide

  32. 32
    #WAW23 @guaca
    Oportunidades

    View full-size slide

  33. 33
    #WAW23 @guaca
    Diagnósticos

    View full-size slide

  34. 34
    #WAW23 @guaca
    Diagnósticos
    También se filtran los Diagnósticos
    con el filtro que apliquemos por
    métricas

    View full-size slide

  35. ▪ 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
    eficientes 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 39
    #WAW23 @guaca
    Respuesta JSON

    View full-size slide

  40. 40
    #WAW23 @guaca
    Respuesta JSON

    View full-size slide

  41. 41
    #WAW23 @guaca
    Respuesta JSON

    View full-size slide

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

    View full-size slide

  43. 43
    #WAW23 @guaca
    Respuesta JSON
    audits.metrics

    View full-size slide

  44. 44
    #WAW23 @guaca
    Respuesta JSON
    audits.metrics

    View full-size slide

  45. 45
    #WAW23 @guaca
    Respuesta JSON
    audits.metrics

    View full-size slide

  46. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 53
    #WAW23 @guaca
    ¿Y ahora qué?

    View full-size slide

  54. 54
    #WAW23 @guaca
    ¿Y ahora qué?

    View full-size slide

  55. 55
    #WAW23 @guaca
    ¿Y ahora qué?

    View full-size slide

  56. 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

    View full-size slide

  57. 4. Key Takeaways
    57
    #WAW23 @guaca

    View full-size slide

  58. 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.

    View full-size slide

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

    View full-size slide

  60. 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

    View full-size slide

  61. 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

    View full-size slide

  62. 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

    View full-size slide

  63. 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.

    View full-size slide

  64. 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

    View full-size slide

  65. Cumulative Layout Shift
    65
    #WAW23 @guaca

    View full-size slide

  66. Lighthouse v9
    66
    #WAW23 @guaca

    View full-size slide

  67. Performance
    67
    #WAW23 @guaca

    View full-size slide