Dev tool to measure website performance

1. Dev Tool to measure
website
performance

2. Bienvenid@
s!
Ana Encinar
FullStack developer en Idealista
@jnisabe
2

3. Chrome
Visita express a su interior

4. CPU vs GPU
4

5. Arquitectura multiproceso
5

6. Memoria
6

7. Site Isolation
7

8. Proceso de renderizado (I)
8
1. Analizador

9. Proceso de renderizado (I)
9
1. Analizador
2. Carga de recursos

10. Proceso de renderizado (I)
10
1. Analizador
2. Carga de recursos
3. Cálculo de estilos

11. Proceso de renderizado (I)
11
1. Analizador
2. Carga de recursos
3. Cálculo de estilos
4. Diseño

12. Proceso de renderizado (I)
12
1. Analizador
2. Carga de recursos
3. Cálculo de estilos
4. Diseño
5. Pintado

13. Chrome DevTools

14. Administración de tareas
14

15. DevTools para medir la performance
 Record loading and using an app
◂ Networks, Frames, Interactions
◂ Summary
◂ Call tree
◂ Bottom-up
 CPU
 Layers
 Performance monitor
 Rendering
15

16. Ejemplo: análisis de una aplicación web real
16

17. 17

18. 18

19. 19

20. 20

21. 21

22. Perfil de javascript: HEAP
22

23. 23

24. Perfil de javascript: Allocations
24

25. 25

26. 26

27. 27

28. 28

29. Firefox

30. Performance tools
30
• Waterfall
• Call tree
• Memory

31. 31

32. 32

33. 33

34. 34

35. Internet Explorer
Microsoft Edge

36. 36

37. 37

38. Recursos
◂ Chrome performance
◂ https://developers.google.com/web/tools/c
hrome-devtools/evaluate-
performance?hl=es
◂ Firefox performance
◂ https://developer.mozilla.org/es/docs/Tools
/Desempe%C3%B1o
◂ Microsoft Edge
◂ https://docs.microsoft.com/en-us/microsoft-
edge/devtools-guide/performance
38

39. 39
GRACIAS!