Upgrade to Pro — share decks privately, control downloads, hide ads and more …

No me hagas esperar!

Guille Paz
May 28, 2014
1
120

No me hagas esperar!

La performance de nuestros front-ends impactan directamente en la experiencia del usuario. Revisemos juntos los puntos y las buenas practicas que tenemos que tener en cuenta para que los usuarios no esperen una eternidad al acceder a nuestro contenido.

Guille Paz

May 28, 2014
Tweet

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
pazguille
0
210
No me robes el Scroll!
pazguille
0
190
User First
pazguille
1
170
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
2.9k
CSS Sprites vs. Data URIs
pazguille
0
380
Hello, Style Guides!
pazguille
0
210
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
91

Featured

See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bash Introduction
62gerente
608
210k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Gamification - CAS2011
davidbonilla
80
5k
Done Done
chrislema
181
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Documentation Writing (for coders)
carmenintech
65
4.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k

Transcript

  1. No me hagas esperar! @pazguille #BAFrontend

  2. http://f2em.com/#user-first

  3. Cómo perciben los usuarios?

  4. Delay Reacción del usuario http://www.nngroup.com/articles/response-times-3-important-limits/

  5. Delay Reacción del usuario 0 - 100ms Instantaneo http://www.nngroup.com/articles/response-times-3-important-limits/

  6. Delay Reacción del usuario 0 - 100ms 100 - 300ms

    Instantaneo Un mínimo delay http://www.nngroup.com/articles/response-times-3-important-limits/

  7. Delay Reacción del usuario 0 - 100ms 100 - 300ms

    300 - 1000ms Instantaneo Un mínimo delay Bueno, hay delay http://www.nngroup.com/articles/response-times-3-important-limits/

  8. Delay Reacción del usuario 0 - 100ms 100 - 300ms

    300 - 1000ms 1 seg + Instantaneo Un mínimo delay Bueno, hay delay mmm… qué onda? http://www.nngroup.com/articles/response-times-3-important-limits/

  9. Delay Reacción del usuario 0 - 100ms 100 - 300ms

    300 - 1000ms 1 seg + 10 seg + Instantaneo Un mínimo delay Bueno, hay delay mmm… qué onda? Fibertel y la *$@*# http://www.nngroup.com/articles/response-times-3-important-limits/
  10. None

  11. Performance

  12. None

  13. Front-end

  14. HTML

  15. HTML Usar tags semánticos La menor cantidad de tags Evitar

    divitis Minificar

  16. CSS

  17. CSS En el <head>, lo antes posible Un archivo externo

    Combinar y Minificar Usar <link>, evitar @import

  18. JavaScript

  19. JavaScript Justo antes del </body> Un archivo externo Combinar y

    Minificar Inline, sólo algunas cosas o librerías async

  20. Critical Path

  21. Critical Path http://www.w3.org/TR/DOM-Parsing/

  22. Critical Path

  23. Critical Path

  24. Critical Path

  25. None

  26. Critical Path

  27. Async

  28. Async Fonts JavaScripts Background Images Imgs y Videos Todo lo

    que sea una mejora!

  29. Async: JavaScripts

  30. Async: JavaScripts

  31. Async: JavaScripts

  32. Async: JavaScripts https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

  33. aload.js https://github.com/pazguille/aload

  34. None
  35. None
  36. None

  37. Async: aload.js Img -----> src Script y Link -----> src

    || href Background Images -----> magic! Audio y Videos -----> src Iframe -----> src

  38. Async: backgrounds

  39. Async: backgrounds

  40. Async: backgrounds

  41. Async: backgrounds

  42. None

  43. http://getmango.com

  44. None

  45. Estándar

  46. W3C Lazyload http://www.w3.org/TR/resource-priorities/

  47. W3C: Lazyload http://www.w3.org/TR/resource-priorities/

  48. W3C Lazyload http://www.w3.org/TR/resource-priorities/ Postpone

  49. W3C Lazyload http://www.w3.org/TR/resource-priorities/ resource-priorities: (css) normal lazyload postpone Postpone

  50. W3C http://dev.w3.org/csswg/css-font-loading/ https://github.com/bramstein/fontloader (polyfill) @font-face

  51. Prefetch

  52. Prefetch

  53. Prerender

  54. Prerender

  55. None

  56. Resumen

  57. Pensar en los usuarios Resumen

  58. Pensar en los usuarios Resumen Pensar en el critical path

  59. Pensar en los usuarios Resumen Pensar en el critical path

    Minificar y comprimir

  60. Pensar en los usuarios Resumen Pensar en el critical path

    Async: JavaScripts y todas las mejoras Minificar y comprimir

  61. Pensar en los usuarios Resumen Pensar en el critical path

    Async: JavaScripts y todas las mejoras Minificar y comprimir Performance === requirimiento!
  62. None