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.

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/
11. Performance
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
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
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
43. http://getmango.com
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
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!