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

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. @RodrigoAyala http://blog.rodrigo-ayala.com http://continuum.cl

3. Hoy en día, nadie está para esperar, queremos todo rápido

4. ¡Incluso no nos gusta esperar la carga de un sitio web !

5. ¿Cuanto esperan los usuarios? 3 seg. 6 - 10 seg. 11 - 15 seg. 20 seg.

6. La interrogante es, ¿ que hacer para que los usuarios no dejen nuestros sitios ?

7. No sólo se requiere optimización del lado del servidor...

8. Sino optimizar el sitio por el lado del cliente

9. Regla Nro 1 :D Regla Nro 1 :D

10. Regla Nro 1 :D Reduce la cantidad de peticiones HTTP :D

11. ¡Mucha espera e información innecesaria por cada petición! :D :D

12. 1 Unifica tus archivos CSS y JS

13. 2 ¡CSS Sprites!

14. Regla Nro 1 :D Regla Nro 2 Reducir el peso en KB de todo el sitio :D

15. 3 Minifica tus archivos CSS y JS

16. 4 Evitar datos header HTTP innecesarios.

17. Utiliza CDN para archivos estáticos

18. Evitar Cookies, usar Web Store HTML5 (When possible) sessionStorage.setItem('someKey','someValue');

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. Evitar Polling, usar Web Sockets HTML5

21. 6 Utilizar CSS3

23. Background

24. CSS3 Animations

25. Herramientas

26. YSlow http://developer.yahoo.com/yslow

27. Page Speed http://code.google.com/speed/page-speed

28. “ Por una web más rápida” Campaña

29. (y para que desarrolladores app nativas no odien tanto la web) Campaña

30. ¡Gracias!