Optimización Web (+ HTML5)

1,467 views

Published on

Lightning talk: "Optimización Web (+ HTML5)" en #startechconf

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,467
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Optimización Web (+ HTML5)

  1. 1. O como hacer que ese sitio tan lento sea más rápido Optimización Web Rodrigo Ayala Desarrollador http://blog.rodrigo-ayala.com
  2. 2. @RodrigoAyala http://blog.rodrigo-ayala.com http://continuum.cl
  3. 3. Hoy en día, nadie está para esperar, queremos todo rápido
  4. 4. ¡Incluso no nos gusta esperar la carga de un sitio web !
  5. 5. ¿Cuanto esperan los usuarios? 3 seg. 6 - 10 seg. 11 - 15 seg. 20 seg.
  6. 6. La interrogante es, ¿ que hacer para que los usuarios no dejen nuestros sitios ?
  7. 7. No sólo se requiere optimización del lado del servidor...
  8. 8. Sino optimizar el sitio por el lado del cliente
  9. 9. Regla Nro 1 :D Regla Nro 1 :D
  10. 10. Regla Nro 1 :D Reduce la cantidad de peticiones HTTP :D
  11. 11. ¡Mucha espera e información innecesaria por cada petición! :D :D
  12. 12. 1 Unifica tus archivos CSS y JS
  13. 13. 2 ¡CSS Sprites!
  14. 14. Regla Nro 1 :D Regla Nro 2 Reducir el peso en KB de todo el sitio :D
  15. 15. 3 Minifica tus archivos CSS y JS
  16. 16. 4 Evitar datos header HTTP innecesarios.
  17. 17. Utiliza CDN para archivos estáticos
  18. 18. Evitar Cookies, usar Web Store HTML5 (When possible) sessionStorage.setItem('someKey','someValue');
  19. 19. Evitar Polling, usar Web Sockets HTML5 GET /PollingStock//PollingStock HTTP/1.1 Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://www.example.com/PollingStock/ Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false
  20. 20. Evitar Polling, usar Web Sockets HTML5
  21. 21. 6 Utilizar CSS3
  22. 22. 6 Utilizar CSS3 <ul><li>Box-shadow
  23. 23. Background
  24. 24. CSS3 Animations </li></ul>
  25. 25. Herramientas
  26. 26. YSlow http://developer.yahoo.com/yslow
  27. 27. Page Speed http://code.google.com/speed/page-speed
  28. 28. “ Por una web más rápida” Campaña
  29. 29. (y para que desarrolladores app nativas no odien tanto la web) Campaña
  30. 30. ¡Gracias!

×