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.

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 *$@*#
   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