Presentación entry level de performance en el web. Sin el audio no tiene tanto sentido pero estoy trabajando en ello.

1. 1
JUSTIA

2. 2
Angel Ponce

3. 3

4. 4

6. 6
¿QuéeselWebPerformance?

7. “ 7
Es el arte de hacer que
un sitio web cargue
rápidamente.

8. 8

9. 9

10. “ 10
Solo lo notamos cuando
es malo.

11. 11
¿Aquesedebequeunossitios
seanmasrápidosqueotros?

12. 12https://flic.kr/p/5rb5j3

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19
$2porcada1MB
http://bit.ly/LhNMQ3

20. 20
8MBx$2=$16

21. 21http://bit.ly/XwfdvK

22. 22
WITH GREAT
POWER…

23. 23http://on.mash.to/1jEvFSW

24. 24http://bit.ly/1vpDGl0

25. 25http://bit.ly/1o8ynEp

26. 26https://flic.kr/p/apkVBZ

27. 27
DesktopMobile
Archivos Independientes

28. 28
DesktopMobile
Misma Base de Archivos

29. 29http://bit.ly/1qmjdq8

30. 30
El promedio actual de una
pagina es casi 2MB.
Un incremento del 271%
desde el 2010.

31. 31
¿Aquesedebeesto?

32. 32http://bit.ly/1p7XPou
22kB
90kB
34kB
25kB
113kB
416kB
Images
Scripts
Stylesheets
HTML
Flash
Other
Noviembre 2010
Total 702kB

33. 33
142kB
74kB
59kB
57kB
295kB
1,203kB
Images
Scripts
Stylesheets
HTML
Flash
Other
Octubre 2014
http://bit.ly/1sAqY0n
Total 1899kB

34. 34
300%

35. 35
2 Segundos para que
un sitio cargue y sea
navegable.
http://nyti.ms/1ut4yO4

36. 36http://bit.ly/1rrU0df

37. 37
WITH GREAT
POWER…

38. 38
COMES GREAT
RESPONSIBILITY
…

39. 39

40. 40

41. 41
#1

42. 42
ReducirNumerodeArchivos
SolicitadosalServidor

43. 43

44. 44
ConsolidarArchivos
•Imagenes
•JavaScript
•CSS

45. 45
ImageSprites
http://bit.ly/1s60yj0

46. 46

47. 47
jQueryPlugins
•jQuery-UI
•jQuery-Carousel
•jQuery-Corner
•jQuery-Easing
•jQuery-json
•jQuery-jplayer
•jQuery-lightbox
•jQuery-miniPlayer
•jQuery-Migrate
•jQuery-Mobile
•jQuery-Placeholder
•jQuery-TouchSwite

48. 48
CSSFiles
•mi-sitio.css
•cabecera.css
•contenido.css
•pie-de-página.css
•tipografia.css
•mi-sitio.css

49. 49
#2

50. 50
CSS3
Drop
Shadows
Text
Shadows
Border
Radius
Image
Filters
Multiple
Backgrounds
Gradients

51. 51

52. 52http://bit.ly/1rDu2Un

53. 53http://bit.ly/11yFuf4

54. 54http://bit.ly/1rh6u7K

55. 55
#3

56. 56
IMAGENES
•GIF
•JPG
•PNG24 & PNG8
•WebP

57. 57
ProgramasdeOptimización
•imageoptim.com
•pngmini.com
•kraken.io
•smushit.com

58. 58
#4

59. 59
Minificación

60. 60

61. 61

62. 62
#5

63. 63
Planeación

64. 64
PresupuestodeDesempeño

65. 65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71
Thank You!
@angelux07
angelponce.com