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

No me hagas esperar!

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Guille Paz Guille Paz
May 28, 2014
1
180

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.

Avatar for Guille Paz

Guille Paz

May 28, 2014
Tweet

More Decks by Guille Paz

See All by Guille Paz
The Road to Node
Avatar for Guille Paz pazguille
0
250
No me robes el Scroll!
Avatar for Guille Paz pazguille
0
260
User First
Avatar for Guille Paz pazguille
1
210
#OfflineFirst
Avatar for Guille Paz pazguille
3
5.9k
ES6 in Production
Avatar for Guille Paz pazguille
10
3.2k
CSS Sprites vs. Data URIs
Avatar for Guille Paz pazguille
0
440
Hello, Style Guides!
Avatar for Guille Paz pazguille
0
270
Decoupling your JavaScript
Avatar for Guille Paz pazguille
0
180
Progressive Enhancement - Is it still important?
Avatar for Guille Paz pazguille
0
130

Featured

See All Featured
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.9k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
640
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
140
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
440
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k

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