1. O como hacer que ese sitio tan lento sea ms rpido Tcnicas de 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. Mientrasms demoraexista, el usuariose vacon mayor facilidad 7. Rapidez 8. Lainterrogantees, que hacerpara que los usuariosno dejennuestros sitios ? 9. Solo se requiere optimizacindel lado delservidor... 10. Solo se requiere optimizacindel lado delservidor... (Al menos eso se pens por un tiempo) 11. 12. 13. 14. 15. 16. Eso en unmodemde56k ... 17. Haca sentir queenvejecasy que te estabas volviendoloco 18. 19. Tambin se puede optimizar por el lado delcliente 20. Regla Nro 1 :D Regla Nro 1 :D 21. Regla Nro 1 :D Regla Nro 1 Reduce la cantidad de peticiones HTTP :D 22. Por qu? 23. Mucha espera e informacin innecesaria por cada peticin! :D :D 24. Como reducir? :D Con las siguientes tcnicas... :D 25. 1 Unifica tus archivos CSS y JS 26. 2 CSS Sprites! 27. CSS Sprites! Como Funciona? .option1, .option2, .option3 { padding-left:20px; } .option1 { background:url(iconos.png) 0 0 no-repeat; .option2 { background:url(iconos.png) 0 -30px no-repeat; .option3 { background:url(iconos.png) 0 -60px no-repeat; http://http://css-sprit.es 28. 3 Usar GET en peticiones AJAX 29. Regla Nro 1 :D Regla Nro 2 Reducir el peso en KB de todo el sitio :D 30. 4 Minifica tus archivos CSS y JS www.refresh-sf.com 31. 5 Utiliza CDN para archivos estticos 32. Utiliza CDN para archivos estticos 33. Utiliza CDN para archivos estticos 34. 6 No ocupen imagenes gigantes redimensionadas a un menor tamao 35. 7 Reducir el tamao en KB de imgenes con compresiones lossless www.smushit.com 36. 8 Comprime la transferencia de datos con GZIP 37. :D SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip # BrowserMatch bMSIE !no-gzip !gzip-only-text/html BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary 38. :D gzipon; gzip_min_length1000; gzip_proxiedexpired no-cache no-store private auth; gzip_typestext/plain application/xml; gzip_disable"MSIE [1-6]."; 39. Regla Nro 3 :D Cache! :D 40. 9 Externaliza los estilos CSS y el cdigo Javascript 41. 10 Agrega fecha de Expiracin a archivos y configura su ETag 42. Regla Nro 4 :D El orden SI altera el producto :D 43. 11 Deja al principio del HTML los estilos CSS 44. 12 Deja al final del HTML los archivos Javascript 45. Herramientas 46. YSlow http://developer.yahoo.com/yslow 47. Page Speed http://code.google.com/speed/page-speed 48. Comentarios Finales 49. Preguntas? 50. Gracias!