Optimización web de alto rendimiento (High performance web optimization)

A talk given at Free Software Festival in Vallarta, Mexico about techniques and tools for improving the front-end performance of your web applications

Transcript

1. OPTIMIZACIÓN WEB DE ALTO RENDIMIENTO htp://stockarch.com/images/recreaton-and-sport/mans-hand-holding-stopwatch-8113
2. <me>
3. Ing. computación @ CUCEI Software engineer @ Crowd Interactive Usuario de Linux @ PCLinuxOS || Lubuntu || OS X Promotor @ Software libre - Open Source Aprendiz @ Bajo eléctrico Amante @ Lean Startup Apasionado @ Desarrollo Web - móvil http://ferperales.net
4. <ad>
6. We are hiring!
7. crowdint.com/careers
19. Junio 2015
20. </ad>
21. </me>
22. #perfmatters
23. Paul Irish Colt McAnlis Jake Archibald Paul Lewis Addy Osmani Ilya Grigorik
24. CULTURA DEL CUIDADO DEL RENDIMIENTO htp://awesomegardening.com/wp-content/uploads/2013/05/Taking-Care-of-your-Garden.jpg
25. PRIMEROS PASOS htp://manitowoc.uwex.edu/fles/2012/07/1-babysteps.jpg
26. htp://www.businessnewsdaily.com/images/i/000/001/482/original/TAPE-MEASURE-ART.jpg MEDIR
27. Pagespeed insights
28. htps://developers.google.com/speed/pagespeed/insights Video: htps://www.dropbox.com/s/o6wq21bi8mi2qku/speedinsights.mov?dl=0
29. Webtestpage
30. htp://www.webpagetest.org/ Video: htps://www.dropbox.com/s/mmkjggdfobz7dgh/webpagetest.mov?dl=0
31. Chrome Developer Tools
32. Navegador Chrome/Chromium Video: htps://www.dropbox.com/s/q3wq0k8z809re09/chromedevtols.mov?dl=0
33. DEFINIR UN PLAN htp://www.dumblitleman.com/wp-content/uploads/2014/04/Great-To-Do-List.jpg
34. ¿Qué puedo mejorar? ¿Qué quiero mejorar? ¿Cómo lo puedo mejorar?
35. ¿Qué puedo mejorar?
36. Video: htps://www.dropbox.com/s/q3wq0k8z809re09/chromedevtols.mov?dl=0
37. Video: htps://www.dropbox.com/s/etzl1rh0jsadm2s/optmizaciones%20chrome.mov?dl=0
38. ¿Qué quiero mejorar?
39. Crítico Recomendado Extra htp://brisasdenono.com.ar/images/icono-semaforo-brisas.png
40. ¿Cómo lo puedo mejorar?
41. DETRÁS DE CÁMARAS htp://media.ainttcool.com/media/legacy/images2009/BTSshining1big.jpg
42. htps://cdn0.iconfnder.com/data/icons/jf/512/chrome-512.png
43. CRITICAL RENDER PATH htp://www.pd.infn.it/~dorigo/stra2.jpg
44. htps://www.igvita.com/posts/12/doc-render-js.png
45. htp://www.sitepoint.com/optmizing-critcal-rendering-path/
51. ¿Y la imagen?
54. JS bloquea
57. Optmizando el CRP
58. Reducir la cantdad de datos que enviamos al navegador
59. Reducir al mínimo la cantdad de bloqueos
60. HERRAMIENTAS htp://upload.wikimedia.org/wikipedia/commons/f/f4/20060513_toolbox.jpg
63. Minifcar
64. grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-htmlmin
65. Optmizar imagenes
66. grunt-contrib-imagemin grunt-svgmin
67. Uso de sprites
68. node-sprite- generator
69. `
71. Remover CSS no utlizado
72. grunt-uncss
73. Buenas práctcas
74. Pruebas de regresión
75. PhantomCSS
77. Mostrar sólo el contenido necesario
79. Tests de rendimiento
80. WebPageTest CLI
81. npm install -g webpagetest
82. webpage test <url>
83. Perf Bucket
84. npm install grunt- perfucket
85. PageSpeed insights CLI
86. npm install -g psi
87. npm install grunt- pagespeed
88. Javascript
89. jsperf.com
90. Video: htps://www.dropbox.com/s/xzr0u4rrp6vghyi/jsperf.mov?dl=0
91. Cuida a tu front-end de la misma manera en que cuidas a tu back-end Bob Marley htp://cdn.urbanislandz.com/wp-content/uploads/2012/10/bob-marley-principal.jpg?ee773b
92. Preguntas
93. Gracias! me@ferperales.net