Cómo volarle la peluca a      tus usuarios con la     velocidad de tu sitio?         Optimización de frontend para devs co...
- Red social para oyentes radios.- 40,000 radios de todo el mundo.
- Empezamos hace 4 años y 1/2.
Streema Team (primeros 3 años y 1/2)Quiénes somos y hacia dónde             vamos
- Empezamos hace 4 años y 1/2.- El año pasado fue uno de grandes cambios- Hoy somos:   - Cashflow positive.   - Felices.  ...
De qué vamos a hablar hoy?- Un toque de teoría detrás de optimización defrontend.- La técnica milenaria de optimización de...
Ojo al piojo con la regla de oro“Sólo el 10-20% del tiempo de carga es invertido enbajar el documento HTML. El otro 80-90%...
Esto es muy bueno!!!!- Optimización de backendsuele implicar cambios máscomplicados y drásticosque los de frontend.- El fr...
Un poco de historia...
Steve Souders(@souders)- Co-founder - Liga dela Justicia del Frontend- Autor de la regla deoro (la 1era)- Un loco lindo- A...
Los 28 mandamientos de Souders
Los 28 mandamientos de Souders●   Make Fewer HTTP Requests●   Use a Content Delivery Network     ●   Understanding Ajax Pe...
Es clave entender el browserImporta lo básico:- Creación, parseo, rendering de la página.Y también las sutilezas (según el...
Es clave entender el browserQué factores influyen en el tiempo de carga? - Cantidad de recursos totales a bajar, por elove...
Hay que medir!Es clave:  - Para saber por dónde nos convieneempezar.  - Para entender si lo que hicimos dioresultados o no...
Medición en detalle - Sirve para entender "qué está pasando" en el cliente. - Cosas como:   - Cuántos recursos el browser ...
Medición en detalle
Medición "Big Picture"- La idea es saber, con un buen grado de confianza:  - Cuánto tiempo le tarda a los usuarios acceder...
New Relic
New Relic
New Relic
New Relic
En sintesis   =
Five Point Streema Peluca   Exploding Technique
Punto 1: Spriting mantenible- Combinar imágenes para bajar HTTP requests(uno en vez de N).- Forma fácil de bajar drásticam...
spritemapper  - http://yostudios.github.com/Spritemapper/  - Genera el sprite "con un solo botón".  - Cada vez que se agre...
Punto 2: Comprimir ImagenesDato picante: "En promedio el 50% delpeso de una página son imagenes".1) Seguir la regla genera...
Smush.it  - http://www.smushit.com/ysmush.it/  - Compresor de imagenes (lossless).  - Se suben las imagenes, y el sitio la...
Punto 3: muy largo para el titulo1) Unificar JS/CSS para disminuir # de HTTPrequests.2) Minificarlos (remueve caracteresin...
sprockets   - https://github.com/sstephenson/sprockets   - gem de Ruby, la versión anterior (1.X) tiene   una command line...
django-compress     - http://code.google.com/p/django-compress/     - Desde el template se lo invoca para incluir el     a...
Fabric- fabfile.org- Libreria Python y command-line tool quepermite uso de SSH para deploys de apps yotras tareas de Sysad...
Punto 4: JS CustomDato picante: "the average top ten U.S. website only executes 25% of the JavaScriptfunctionality before ...
Punto 4: JS Custom
Punto 5: Guarda con los Social Plugins!                       = - Cargarlos siempre asincrónicamente. - Sino frenan el pro...
Esta estudiado:+ Mejor experiencia de usuario+ Platita+
Bonus Track  Nunca está demás tirar un YSlow o un PageSpeed
Reflexiones Finales- Decir "la webapp carga en Xs en promedio"no sirve. Hay que ir más allá.- Medir el tiempo de rendering...
Para profundizar másHacerle un poquito de stalking a Super Souders:  - Seguirlo en Twitter (@souders)  - Leer sus dos tomo...
Gracias!Martin Siniawskimartin@streema.com@msinia
Cómo volarle la peluca a tus usuarios con la velocidad de tu sitio?
Upcoming SlideShare
Loading in …5
×

Cómo volarle la peluca a tus usuarios con la velocidad de tu sitio?

1,109 views

Published on

Frontend optimization para devs con poco tiempo

1 Comment
2 Likes
Statistics
Notes
  • Por Marto
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,109
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
11
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Cómo volarle la peluca a tus usuarios con la velocidad de tu sitio?

  1. 1. Cómo volarle la peluca a tus usuarios con la velocidad de tu sitio? Optimización de frontend para devs con poco tiempoMartin SiniawskiCo-founder de Streema@msinia
  2. 2. - Red social para oyentes radios.- 40,000 radios de todo el mundo.
  3. 3. - Empezamos hace 4 años y 1/2.
  4. 4. Streema Team (primeros 3 años y 1/2)Quiénes somos y hacia dónde vamos
  5. 5. - Empezamos hace 4 años y 1/2.- El año pasado fue uno de grandes cambios- Hoy somos: - Cashflow positive. - Felices. Streema Team (ultimo año)
  6. 6. De qué vamos a hablar hoy?- Un toque de teoría detrás de optimización defrontend.- La técnica milenaria de optimización desarrolladaen Streema.- Compartamos experiencias, ideas, dudas, etc.
  7. 7. Ojo al piojo con la regla de oro“Sólo el 10-20% del tiempo de carga es invertido enbajar el documento HTML. El otro 80-90% se inviertebajando el resto de los componentes de la página." Los autores de otra regla de oro: "The 3-way" Justin Timberlake, Andy Samberg, et. al, The Lonely Island, Mayo 2011
  8. 8. Esto es muy bueno!!!!- Optimización de backendsuele implicar cambios máscomplicados y drásticosque los de frontend.- El frontend no será lo másfachero, pero con mejoresprácticas se puede logrargran parte del resultadototal.
  9. 9. Un poco de historia...
  10. 10. Steve Souders(@souders)- Co-founder - Liga dela Justicia del Frontend- Autor de la regla deoro (la 1era)- Un loco lindo- Autor de YSlow
  11. 11. Los 28 mandamientos de Souders
  12. 12. Los 28 mandamientos de Souders● Make Fewer HTTP Requests● Use a Content Delivery Network ● Understanding Ajax Performance● Add an Expires Header ● Creating Responsive Web Applications● Gzip Components ● Splitting the Initial Payload● Put Stylesheets at the Top ● Loading Scripts Without Blocking● Put Scripts at the Bottom ● Coupling Asynchronous Scripts● Avoid CSS Expressions ● Positioning Inline Scripts● Make JavaScript and CSS External ● Writing Efficient JavaScript● Reduce DNS Lookups ● Scaling with Comet● Minify JavaScript ● Going Beyond Gzipping● Avoid Redirects ● Optimizing Images● Remove Duplicate Scripts ● Sharding Dominant Domains● Configure ETags ● Flushing the Document Early● Make AJAX Cacheable ● Using Iframes Sparingly ● Simplifying CSS Selectors
  13. 13. Es clave entender el browserImporta lo básico:- Creación, parseo, rendering de la página.Y también las sutilezas (según el browser): - Rotura del progressive rendering. - Paralelización. - Ver "How Browsers Work": http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  14. 14. Es clave entender el browserQué factores influyen en el tiempo de carga? - Cantidad de recursos totales a bajar, por eloverhead de los HTTP requests para bajarlos. - Latencia de red. - Peso de los archivos. - Orden de los archivos.
  15. 15. Hay que medir!Es clave: - Para saber por dónde nos convieneempezar. - Para entender si lo que hicimos dioresultados o no.Se necesitan dos tipos de herramientas,ninguna es suficiente: - Para entender cómo se comporta en detallenuestras páginas. - Para entender qué le ocurre a nuestrosusuarios.
  16. 16. Medición en detalle - Sirve para entender "qué está pasando" en el cliente. - Cosas como: - Cuántos recursos el browser necesita bajar. - Peso de c/u de ellos y total. - Se está usando minificación, compresión, etc.? - Bloqueos entre recursos? Para esto, con elFirebug o Chrome Dev Tools estás:
  17. 17. Medición en detalle
  18. 18. Medición "Big Picture"- La idea es saber, con un buen grado de confianza: - Cuánto tiempo le tarda a los usuarios acceder al sitio(tiempo de backend + tiempo de frontend). - Verificar cómo impactan los cambios que vamoshaciendo en nuestros usuarios reales. Esto es clave! =
  19. 19. New Relic
  20. 20. New Relic
  21. 21. New Relic
  22. 22. New Relic
  23. 23. En sintesis =
  24. 24. Five Point Streema Peluca Exploding Technique
  25. 25. Punto 1: Spriting mantenible- Combinar imágenes para bajar HTTP requests(uno en vez de N).- Forma fácil de bajar drásticamente cantidad deHTTP requests.- Art. original: http://www.alistapart.com/articles/sprites
  26. 26. spritemapper - http://yostudios.github.com/Spritemapper/ - Genera el sprite "con un solo botón". - Cada vez que se agrega/cambia una imagen, se agrega al css original y se regenera el sprite.Permite mantener las reglas de imagenes en tu CSS de una forma sostenible!
  27. 27. Punto 2: Comprimir ImagenesDato picante: "En promedio el 50% delpeso de una página son imagenes".1) Seguir la regla general: - GIF para animaciones. - JPEG para fotos. - PNG para todo lo demás.2) Comprimir imagenes usando losslesscompression.
  28. 28. Smush.it - http://www.smushit.com/ysmush.it/ - Compresor de imagenes (lossless). - Se suben las imagenes, y el sitio las devuelve comprimidas en unos segundos. - No se puede scriptear (por ahora) pero es rápido y permite outsourcear la elección del mejor algoritmo/herramientas.Imagenes más livianas con unos minutos de trabajo
  29. 29. Punto 3: muy largo para el titulo1) Unificar JS/CSS para disminuir # de HTTPrequests.2) Minificarlos (remueve caracteresinnecesarios del código para bajar sutamaño).3) Gzippear los recursos minificados. Entre minificar y gzippear, se calcula ~ 70% de reducción del tamaño de archivo nginx sprockets django-compress (HttpGzipStaticModule)
  30. 30. sprockets - https://github.com/sstephenson/sprockets - gem de Ruby, la versión anterior (1.X) tiene una command line utility. - Declarar dependencias entre JS, para poder escribir código separado en módulos y luego "buildear" los distintos archivos. - También constantes.sprocketize -I ./lib -I ./constants src/player/player.jssrc/ui/player/Player.js > javascripts/player.js
  31. 31. django-compress - http://code.google.com/p/django-compress/ - Desde el template se lo invoca para incluir el archivo. - Maneja la concatenación, minificación y generación de nombres para evitar problemas de cacheos con nuevas versiones. - Pensando en migrar a django-pipeline o django-compressor.COMPRESS_JS = { main_scripts: { source_filenames: (javascripts/streema_main.js,), output_filename: javascripts/main_compressed.r?.js, },...{% compressed_js main_scripts %}http://d27dlc8m4co2dl.cloudfront.net/javascripts/main_compressed.r1320173653.js
  32. 32. Fabric- fabfile.org- Libreria Python y command-line tool quepermite uso de SSH para deploys de apps yotras tareas de Sysadmin.- Lo usamos para hacer nuestros deploy y susdisintas etapas, en particular lo relacionado aassets.- Llama a las distintas utilidades mencionadaspara armar los recursos estáticos listos paradeployear.
  33. 33. Punto 4: JS CustomDato picante: "the average top ten U.S. website only executes 25% of the JavaScriptfunctionality before the onload event." (2008)- Puede ocurrir que: - Se tenga un solo JS para todo el sitio. - Copado porque se cachea de una. - Puede llegar a ser muy pesado, y tal vezlas landing necesitan un % chico del archivo.- Se pierde tiempo bajando y parseandocódigo que no es requerido.
  34. 34. Punto 4: JS Custom
  35. 35. Punto 5: Guarda con los Social Plugins! = - Cargarlos siempre asincrónicamente. - Sino frenan el progressive rendering. - La mayoria ofrece forma de incluirlos async, sino se puede hacer fácil insertándolos en "domready" u "onload". - Guarda que son realmente turros.
  36. 36. Esta estudiado:+ Mejor experiencia de usuario+ Platita+
  37. 37. Bonus Track Nunca está demás tirar un YSlow o un PageSpeed
  38. 38. Reflexiones Finales- Decir "la webapp carga en Xs en promedio"no sirve. Hay que ir más allá.- Medir el tiempo de rendering de la página, yoptimizar para eso, no sólo el tiempo total.- Siempre antes de empezar, preguntarse: - Todas las páginas son igual deimportantes? - Hay alguna/s que concentren la mayoríadel tráfico? Y del revenue?
  39. 39. Para profundizar másHacerle un poquito de stalking a Super Souders: - Seguirlo en Twitter (@souders) - Leer sus dos tomos: - "High Performance Websites". - "Even Faster Websites". - Chequear el archivo en su blog.Otros interesante: - @paul_irish (Google)Google Speed: http://code.google.com/speed/Yahoo!: http://developer.yahoo.com/performance/
  40. 40. Gracias!Martin Siniawskimartin@streema.com@msinia

×