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

No me hagas esperar!

Guille Paz
May 28, 2014
88

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

Transcript

  1. No me hagas esperar!
    @pazguille #BAFrontend

    View Slide

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

    View Slide

  3. Cómo perciben los usuarios?

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/

    View Slide

  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 *[email protected]*#
    http://www.nngroup.com/articles/response-times-3-important-limits/

    View Slide

  10. View Slide

  11. Performance

    View Slide

  12. View Slide

  13. Front-end

    View Slide

  14. HTML

    View Slide

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

    View Slide

  16. CSS

    View Slide

  17. CSS
    En el , lo antes posible
    Un archivo externo
    Combinar y Minificar
    Usar , evitar @import

    View Slide

  18. JavaScript

    View Slide

  19. JavaScript
    Justo antes del

    View Slide

  20. Critical Path

    View Slide

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

    View Slide

  22. Critical Path

    View Slide

  23. Critical Path

    View Slide

  24. Critical Path

    View Slide

  25. View Slide

  26. Critical Path

    View Slide

  27. Async

    View Slide

  28. Async
    Fonts
    JavaScripts
    Background Images
    Imgs y Videos
    Todo lo que sea una mejora!

    View Slide

  29. Async: JavaScripts

    View Slide

  30. Async: JavaScripts

    View Slide

  31. Async: JavaScripts

    View Slide

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

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Async: aload.js
    Img -----> src
    Script y Link -----> src || href
    Background Images -----> magic!
    Audio y Videos -----> src
    Iframe -----> src

    View Slide

  38. Async: backgrounds

    View Slide

  39. Async: backgrounds

    View Slide

  40. Async: backgrounds

    View Slide

  41. Async: backgrounds

    View Slide

  42. View Slide

  43. http://getmango.com

    View Slide

  44. View Slide

  45. Estándar

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. Prefetch

    View Slide

  52. Prefetch

    View Slide

  53. Prerender

    View Slide

  54. Prerender

    View Slide

  55. View Slide

  56. Resumen

    View Slide

  57. Pensar en los usuarios
    Resumen

    View Slide

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

    View Slide

  59. Pensar en los usuarios
    Resumen
    Pensar en el critical path
    Minificar y comprimir

    View Slide

  60. Pensar en los usuarios
    Resumen
    Pensar en el critical path
    Async: JavaScripts y todas las mejoras
    Minificar y comprimir

    View Slide

  61. Pensar en los usuarios
    Resumen
    Pensar en el critical path
    Async: JavaScripts y todas las mejoras
    Minificar y comprimir
    Performance === requirimiento!

    View Slide

  62. View Slide