"Técnicas de optimización web", workshop realizado en Webprendedor 2011 con el fin de explicar a los desarrolladores Web que no solo hay que optimizar servidores, sino también código que está expuesto al navegador. Técnicas para reducir el tamaño en KB, reducir peticiones HTTP son solo algunas de las sugerencias dadas en esta presentación.

1. O como hacer que ese sitio tan lento sea más rápido Técnicas de 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. Mientras más demora exista, el usuario se va con mayor facilidad

7. Rapidez

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

9. Solo se requiere optimización del lado del servidor...

10. Solo se requiere optimización del lado del servidor... (Al menos eso se pensó por un tiempo)

16. Eso en un modem de 56k ...

17. Hacía sentir que envejecías y que te estabas volviendo loco

19. También se puede optimizar por el lado del cliente

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 información innecesaria por cada petición! :D :D

24. ¿Como reducir? :D Con las siguientes técnicas... :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 estáticos

32. Utiliza CDN para archivos estáticos

33. Utiliza CDN para archivos estáticos

34. 6 No ocupen imagenes gigantes redimensionadas a un menor tamaño

35. 7 Reducir el tamaño en KB de imágenes con compresiones lossless www.smushit.com

36. 8 Comprime la transferencia de datos con GZIP

37. :D <Location /> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/40[678] no-gzip # BrowserMatch MSIE !no-gzip !gzip-only-text/html BrowserMatch MSI[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 </Location>

38. :D gzip on; gzip_min_length 1000; gzip_proxied expired no-cache no-store private auth; gzip_types text/plain application/xml; gzip_disable &quot;MSIE [1-6]&quot;;

39. Regla Nro 3 :D ¡Cache! :D

40. 9 Externaliza los estilos CSS y el código Javascript

41. 10 Agrega fecha de Expiración 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!