Optimización Web (+ HTML5)

download Optimización Web (+ HTML5)

If you can't read please download the document

description

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

Transcript of Optimización Web (+ HTML5)

  • 1. O como hacer que ese sitio tan lento sea ms rpido Optimizacin Web Rodrigo Ayala Desarrollador http://blog.rodrigo-ayala.com

2. @RodrigoAyala http://blog.rodrigo-ayala.com http://continuum.cl 3. Hoy en da, nadie est para esperar, queremos todorpido 4. Inclusono nos gusta esperarla carga de unsitio web ! 5. Cuantoesperanlos usuarios? 3 seg. 6 - 10 seg. 11 - 15 seg. 20 seg. 6. Lainterrogantees, que hacerpara que los usuariosno dejennuestros sitios ? 7. No slo se requiere optimizacindel lado delservidor... 8. Sino optimizar el sitio por el lado delcliente 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 informacin innecesaria por cada peticin! :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 estticos 18. Evitar Cookies, usar Web Store HTML5 (When possible) sessionStorage.setItem('someKey','someValue'); 19. Evitar Polling, usarWeb 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, usarWeb Sockets HTML5 21. 6 Utilizar CSS3 22. 6 Utilizar CSS3

  • Box-shadow

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 ms rpida Campaa 29. (y para que desarrolladores app nativas no odien tanto la web) Campaa 30. Gracias!