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.

Transcript

1. Cómo exprimir al máximo Lighthouse para mejorar las Core Web Vitals #WAW23 @guaca Lighthouse Core Web Vitals
2. 1. Core Web Vitals 2 #WAW23 @guaca
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
4. Core Web Vitals 4 #WAW23 @guaca
5. Core Web Vitals 5 #WAW23 @guaca
6. Core Web Vitals 6 #WAW23 @guaca Junio 2021 Mobile Febrero 2022 Desktop
7. 2. Lighthouse 7 #WAW23 @guaca
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
9. 9 #WAW23 @guaca Lighthouse
10. 10 #WAW23 @guaca Performance
11. Performance 11 #WAW23 @guaca
12. Performance 12 #WAW23 @guaca
13. Performance 13 #WAW23 @guaca bit.ly/lh-calculator
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
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
16. Extensión de Chrome Ejecución 16 #WAW23 @guaca Mismas características y limitaciones que PageSpeed Insights
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.).
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
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
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
21. 3. Exprimiendo Lighthouse 21 #WAW23 @guaca
22. Resultado HTML 22 #WAW23 @guaca Performance Score Métricas y valores View Treemap Screenshots Oportunidades y Diagnósticos Auditorías aprobadas Filtros
23. 23 #WAW23 @guaca Treemap
24. 24 #WAW23 @guaca Treemap
25. 25 #WAW23 @guaca Oportunidades
26. 26 #WAW23 @guaca Oportunidades
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.
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
29. 29 #WAW23 @guaca Oportunidades
30. 30 #WAW23 @guaca Oportunidades
31. 31 #WAW23 @guaca Oportunidades ¡OJO! Ahorro estimado total teniendo en cuenta conexión emulada en el test.
32. 32 #WAW23 @guaca Oportunidades
33. 33 #WAW23 @guaca Diagnósticos
34. 34 #WAW23 @guaca Diagnósticos También se filtran los Diagnósticos con el filtro que apliquemos por métricas
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
36. 36 #WAW23 @guaca Auditorías Aprobadas Lista de todas las oportunidades y diagnósticos aprobados
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)
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
39. 39 #WAW23 @guaca Respuesta JSON
40. 40 #WAW23 @guaca Respuesta JSON
41. 41 #WAW23 @guaca Respuesta JSON
42. 42 #WAW23 @guaca Respuesta JSON 8.526 líneas de JSON 😱
43. 43 #WAW23 @guaca Respuesta JSON audits.metrics
44. 44 #WAW23 @guaca Respuesta JSON audits.metrics
45. 45 #WAW23 @guaca Respuesta JSON audits.metrics
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
47. 47 #WAW23 @guaca Respuesta JSON Métricas sin emular conexión audits.metrics
48. 48 #WAW23 @guaca Respuesta JSON Detalle de recursos por tipo audits.metrics.resource-summary.details.items
49. 49 #WAW23 @guaca Respuesta JSON Detalle de recursos third-party audits.metrics.third-party-summary.details.items
50. 50 #WAW23 @guaca Respuesta JSON audits.server-response-time Time To First Byte (TTFB)
51. 51 #WAW23 @guaca Respuesta JSON categories.performance.auditRefs
52. 52 #WAW23 @guaca Respuesta JSON categories.performance.auditRefs
53. 53 #WAW23 @guaca ¿Y ahora qué?
54. 54 #WAW23 @guaca ¿Y ahora qué?
55. 55 #WAW23 @guaca ¿Y ahora qué?
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
57. 4. Key Takeaways 57 #WAW23 @guaca
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.
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:
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
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
62. 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
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.
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
65. Cumulative Layout Shift 65 #WAW23 @guaca
66. Lighthouse v9 66 #WAW23 @guaca
67. Performance 67 #WAW23 @guaca