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

No me hagas esperar!

Guille Paz
May 28, 2014
1
110

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
200
No me robes el Scroll!
pazguille
0
180
User First
pazguille
1
160
#OfflineFirst
pazguille
3
5.7k
ES6 in Production
pazguille
10
2.8k
CSS Sprites vs. Data URIs
pazguille
0
360
Hello, Style Guides!
pazguille
0
170
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
81

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
How to Ace a Technical Interview
jacobian
273
22k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
The Invisible Side of Design
smashingmag
294
49k

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