No me hagas esperar!

F8a70e01eddbadc5e4f9876ff34494fa?s=47 Guille Paz
May 28, 2014
49

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.

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

May 28, 2014
Tweet

Transcript

  1. 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/
  2. 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/
  3. 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/
  4. 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/
  5. 10.
  6. 12.
  7. 13.
  8. 14.
  9. 16.

    CSS

  10. 17.

    CSS En el <head>, lo antes posible Un archivo externo

    Combinar y Minificar Usar <link>, evitar @import
  11. 19.

    JavaScript Justo antes del </body> Un archivo externo Combinar y

    Minificar Inline, sólo algunas cosas o librerías async
  12. 25.
  13. 27.
  14. 34.
  15. 35.
  16. 36.
  17. 37.

    Async: aload.js Img -----> src Script y Link -----> src

    || href Background Images -----> magic! Audio y Videos -----> src Iframe -----> src
  18. 42.
  19. 44.
  20. 45.
  21. 51.
  22. 52.
  23. 53.
  24. 54.
  25. 55.
  26. 56.
  27. 60.

    Pensar en los usuarios Resumen Pensar en el critical path

    Async: JavaScripts y todas las mejoras Minificar y comprimir
  28. 61.

    Pensar en los usuarios Resumen Pensar en el critical path

    Async: JavaScripts y todas las mejoras Minificar y comprimir Performance === requirimiento!
  29. 62.