$30 off During Our Annual Pro Sale. View Details »

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

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

Fernando Perales

October 30, 2014
Tweet

More Decks by Fernando Perales

Other Decks in Programming

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>

  5. None
  6. We are hiring!

  7. crowdint.com/careers

  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  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/

  46. None
  47. None
  48. None
  49. None
  50. None
  51. ¿Y la imagen?

  52. None
  53. None
  54. JS bloquea

  55. None
  56. None
  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

  61. None
  62. None
  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. `

  70. None
  71. Remover CSS no utlizado

  72. grunt-uncss

  73. Buenas práctcas

  74. Pruebas de regresión

  75. PhantomCSS

  76. None
  77. Mostrar sólo el contenido necesario

  78. None
  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