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
390
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
Optimizing for Happiness
mojombo
376
70k
How STYLIGHT went responsive
nonsquared
95
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Unsuck your backbone
ammeep
669
57k
Code Review Best Practice
trishagee
65
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
The Cost Of JavaScript in 2023
addyosmani
45
7k
GitHub's CSS Performance
jonrohan
1030
460k
Speed Design
sergeychernyshev
25
670
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Typedesign – Prime Four
hannesfritz
40
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k

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