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

No me hagas esperar!

Guille Paz
May 28, 2014
1
130

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
200
User First
pazguille
1
170
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
3k
CSS Sprites vs. Data URIs
pazguille
0
400
Hello, Style Guides!
pazguille
0
230
Decoupling your JavaScript
pazguille
0
150
Progressive Enhancement - Is it still important?
pazguille
0
100

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
KATA
mclloyd
29
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How STYLIGHT went responsive
nonsquared
99
5.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
640
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
BBQ
matthewcrist
88
9.6k
Scaling GitHub
holman
459
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k

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