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

No me hagas esperar!

Guille Paz
May 28, 2014
120

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. 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. 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. 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. 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. CSS

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

    Combinar y Minificar Usar <link>, evitar @import
  7. JavaScript Justo antes del </body> Un archivo externo Combinar y

    Minificar Inline, sólo algunas cosas o librerías async
  8. Async: aload.js Img -----> src Script y Link -----> src

    || href Background Images -----> magic! Audio y Videos -----> src Iframe -----> src
  9. Pensar en los usuarios Resumen Pensar en el critical path

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

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