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

WAW23 - Exprime al máximo Lighthouse para mejor...

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
  2. 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
  3. 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
  4. Ejecución 14 #WAW23 @guaca PageSpeed Insights (UI o API) Extensión

    Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas
  5. 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
  6. 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.).
  7. 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
  8. 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
  9. 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
  10. Resultado HTML 22 #WAW23 @guaca Performance Score Métricas y valores

    View Treemap Screenshots Oportunidades y Diagnósticos Auditorías aprobadas Filtros
  11. 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.
  12. 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
  13. ▪ 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
  14. 37 #WAW23 @guaca Respuesta JSON Extensión Chrome Chrome DevTools Línea

    de Comandos Integración Continua Herramientas Externas PageSpeed Insights (UI o API)
  15. PageSpeed Insights (UI o API) 38 #WAW23 @guaca Respuesta JSON

    Extensión Chrome Chrome DevTools Línea de Comandos Integración Continua Herramientas Externas
  16. 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
  17. 48 #WAW23 @guaca Respuesta JSON Detalle de recursos por tipo

    audits.metrics.resource-summary.details.items
  18. 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
  19. 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.
  20. 59 #WAW23 @guaca guaca @guaca estelafranco.com mujeresenseo.es ¡Gracias! ¿Preguntas? Estela

    Franco Web Performance Specialist at Schneider Electric You can find me at:
  21. 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
  22. 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
  23. El tiempo para renderizar la imagen o bloque de texto

    más grande visible dentro del viewport. ▹ <img> ▹ <image> dentro de un <svg> ▹ Atributo “poster” de un tag <video> ▹ 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
  24. 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.
  25. 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