Slide 1
Slide 1 text
Cómo exprimir al máximo
Lighthouse para mejorar
las Core Web Vitals
#WAW23 @guaca
Lighthouse
Core Web Vitals
Slide 2
Slide 2 text
1. Core Web Vitals
2
#WAW23 @guaca
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Core Web Vitals
4
#WAW23 @guaca
Slide 5
Slide 5 text
Core Web Vitals
5
#WAW23 @guaca
Slide 6
Slide 6 text
Core Web Vitals
6
#WAW23 @guaca
Junio 2021
Mobile
Febrero 2022
Desktop
Slide 7
Slide 7 text
2. Lighthouse
7
#WAW23 @guaca
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
9
#WAW23 @guaca
Lighthouse
Slide 10
Slide 10 text
10
#WAW23 @guaca
Performance
Slide 11
Slide 11 text
Performance
11
#WAW23 @guaca
Slide 12
Slide 12 text
Performance
12
#WAW23 @guaca
Slide 13
Slide 13 text
Performance
13
#WAW23 @guaca
bit.ly/lh-calculator
Slide 14
Slide 14 text
Ejecución
14
#WAW23 @guaca
PageSpeed
Insights (UI o API)
Extensión
Chrome
Chrome
DevTools
Línea de
Comandos
Integración
Continua
Herramientas
Externas
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Extensión de Chrome
Ejecución
16
#WAW23 @guaca
Mismas características y
limitaciones que PageSpeed
Insights
Slide 17
Slide 17 text
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.).
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
3. Exprimiendo Lighthouse
21
#WAW23 @guaca
Slide 22
Slide 22 text
Resultado HTML
22
#WAW23 @guaca
Performance Score
Métricas y valores
View Treemap
Screenshots
Oportunidades y
Diagnósticos
Auditorías aprobadas
Filtros
Slide 23
Slide 23 text
23
#WAW23 @guaca
Treemap
Slide 24
Slide 24 text
24
#WAW23 @guaca
Treemap
Slide 25
Slide 25 text
25
#WAW23 @guaca
Oportunidades
Slide 26
Slide 26 text
26
#WAW23 @guaca
Oportunidades
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
29
#WAW23 @guaca
Oportunidades
Slide 30
Slide 30 text
30
#WAW23 @guaca
Oportunidades
Slide 31
Slide 31 text
31
#WAW23 @guaca
Oportunidades
¡OJO! Ahorro estimado total
teniendo en cuenta conexión
emulada en el test.
Slide 32
Slide 32 text
32
#WAW23 @guaca
Oportunidades
Slide 33
Slide 33 text
33
#WAW23 @guaca
Diagnósticos
Slide 34
Slide 34 text
34
#WAW23 @guaca
Diagnósticos
También se filtran los Diagnósticos
con el filtro que apliquemos por
métricas
Slide 35
Slide 35 text
▪ 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
Slide 36
Slide 36 text
36
#WAW23 @guaca
Auditorías
Aprobadas
Lista de todas las oportunidades y
diagnósticos aprobados
Slide 37
Slide 37 text
37
#WAW23 @guaca
Respuesta JSON
Extensión
Chrome
Chrome
DevTools
Línea de
Comandos
Integración
Continua
Herramientas
Externas
PageSpeed
Insights (UI o API)
Slide 38
Slide 38 text
PageSpeed
Insights (UI o API)
38
#WAW23 @guaca
Respuesta JSON
Extensión
Chrome
Chrome
DevTools
Línea de
Comandos
Integración
Continua
Herramientas
Externas
Slide 39
Slide 39 text
39
#WAW23 @guaca
Respuesta JSON
Slide 40
Slide 40 text
40
#WAW23 @guaca
Respuesta JSON
Slide 41
Slide 41 text
41
#WAW23 @guaca
Respuesta JSON
Slide 42
Slide 42 text
42
#WAW23 @guaca
Respuesta JSON
8.526 líneas de
JSON 😱
Slide 43
Slide 43 text
43
#WAW23 @guaca
Respuesta JSON
audits.metrics
Slide 44
Slide 44 text
44
#WAW23 @guaca
Respuesta JSON
audits.metrics
Slide 45
Slide 45 text
45
#WAW23 @guaca
Respuesta JSON
audits.metrics
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
47
#WAW23 @guaca
Respuesta JSON
Métricas sin
emular conexión
audits.metrics
Slide 48
Slide 48 text
48
#WAW23 @guaca
Respuesta JSON
Detalle de
recursos por tipo
audits.metrics.resource-summary.details.items
Slide 49
Slide 49 text
49
#WAW23 @guaca
Respuesta JSON
Detalle de recursos
third-party
audits.metrics.third-party-summary.details.items
Slide 50
Slide 50 text
50
#WAW23 @guaca
Respuesta JSON
audits.server-response-time
Time To First Byte (TTFB)
Slide 51
Slide 51 text
51
#WAW23 @guaca
Respuesta JSON
categories.performance.auditRefs
Slide 52
Slide 52 text
52
#WAW23 @guaca
Respuesta JSON
categories.performance.auditRefs
Slide 53
Slide 53 text
53
#WAW23 @guaca
¿Y ahora qué?
Slide 54
Slide 54 text
54
#WAW23 @guaca
¿Y ahora qué?
Slide 55
Slide 55 text
55
#WAW23 @guaca
¿Y ahora qué?
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
4. Key Takeaways
57
#WAW23 @guaca
Slide 58
Slide 58 text
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.
Slide 59
Slide 59 text
59
#WAW23 @guaca
guaca
@guaca
estelafranco.com
mujeresenseo.es
¡Gracias!
¿Preguntas?
Estela Franco
Web Performance Specialist
at Schneider Electric
You can find me at:
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
El tiempo para renderizar la imagen o bloque de texto
más grande visible dentro del viewport.
▹ ![]()
▹ ![]()
dentro de un
Slide 63
Slide 63 text
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.
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
Cumulative Layout Shift
65
#WAW23 @guaca
Slide 66
Slide 66 text
Lighthouse v9
66
#WAW23 @guaca
Slide 67
Slide 67 text
Performance
67
#WAW23 @guaca