O como hacer que ese sitio tan lento sea más rápido Técnicas de optimización Web Rodrigo Ayala Desarrollador http://blog.r...
@RodrigoAyala http://blog.rodrigo-ayala.com http://continuum.cl
Hoy en día, nadie está para esperar, queremos todo  rápido
¡Incluso  no nos gusta esperar  la carga de un  sitio web !
¿Cuanto  esperan  los usuarios? 3 seg. 6 - 10 seg. 11 - 15 seg. 20 seg.
Mientras  más demora  exista, el usuario  se va  con mayor facilidad
Rapidez
La  interrogante  es, ¿ que hacer  para que los usuarios  no dejen  nuestros sitios ?
Solo se requiere optimización  del lado del  servidor...
Solo se requiere optimización  del lado del  servidor... (Al menos eso se pensó por un tiempo)
 
 
 
 
 
Eso en un  modem  de  56k ...
Hacía sentir que  envejecías  y que te estabas volviendo  loco
 
También se puede optimizar por el lado del  cliente
Regla Nro 1 :D Regla Nro 1 :D
Regla Nro 1 :D Regla Nro 1 Reduce la cantidad de peticiones HTTP :D
¿Por qué?
¡Mucha espera e información innecesaria por cada petición! :D :D
¿Como reducir? :D Con las siguientes técnicas... :D
1 Unifica tus archivos CSS y JS
2 ¡CSS Sprites!
¡CSS Sprites! ¿Como Funciona?      .option1, .option2, .option3 { padding-left:20px; }      .option1 { background:url(icon...
3 Usar GET en peticiones AJAX
Regla Nro 1 :D Regla Nro 2 Reducir el peso en KB de todo el sitio :D
4 Minifica tus archivos CSS y JS www.refresh-sf.com
5 Utiliza CDN para archivos estáticos
Utiliza CDN para archivos estáticos
Utiliza CDN para archivos estáticos
6 No ocupen imagenes gigantes redimensionadas a un menor tamaño
7 Reducir el tamaño en KB de imágenes con compresiones lossless www.smushit.com
8 Comprime la transferencia de datos con GZIP
:D <Location /> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip...
:D gzip  on; gzip_min_length  1000; gzip_proxied  expired no-cache no-store private auth; gzip_types  text/plain applicati...
Regla Nro 3 :D ¡Cache! :D
9 Externaliza los estilos CSS y el código Javascript
10 Agrega fecha de Expiración a archivos y configura su ETag
Regla Nro 4 :D El orden SI altera el producto :D
11 Deja al principio del HTML los estilos CSS
12 Deja al final del HTML los archivos Javascript
Herramientas
YSlow http://developer.yahoo.com/yslow
Page Speed http://code.google.com/speed/page-speed
Comentarios Finales
¿Preguntas?
¡Gracias!
Upcoming SlideShare
Loading in …5
×

Workshop "Técnicas de optimización web" en Webprendedor 2011

964 views

Published on

"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.

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
964
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Workshop "Técnicas de optimización web" en Webprendedor 2011

  1. 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. 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. Mientras más demora exista, el usuario se va con mayor facilidad
  7. 7. Rapidez
  8. 8. La interrogante es, ¿ que hacer para que los usuarios no dejen nuestros sitios ?
  9. 9. Solo se requiere optimización del lado del servidor...
  10. 10. Solo se requiere optimización del lado del servidor... (Al menos eso se pensó por un tiempo)
  11. 16. Eso en un modem de 56k ...
  12. 17. Hacía sentir que envejecías y que te estabas volviendo loco
  13. 19. También se puede optimizar por el lado del cliente
  14. 20. Regla Nro 1 :D Regla Nro 1 :D
  15. 21. Regla Nro 1 :D Regla Nro 1 Reduce la cantidad de peticiones HTTP :D
  16. 22. ¿Por qué?
  17. 23. ¡Mucha espera e información innecesaria por cada petición! :D :D
  18. 24. ¿Como reducir? :D Con las siguientes técnicas... :D
  19. 25. 1 Unifica tus archivos CSS y JS
  20. 26. 2 ¡CSS Sprites!
  21. 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
  22. 28. 3 Usar GET en peticiones AJAX
  23. 29. Regla Nro 1 :D Regla Nro 2 Reducir el peso en KB de todo el sitio :D
  24. 30. 4 Minifica tus archivos CSS y JS www.refresh-sf.com
  25. 31. 5 Utiliza CDN para archivos estáticos
  26. 32. Utiliza CDN para archivos estáticos
  27. 33. Utiliza CDN para archivos estáticos
  28. 34. 6 No ocupen imagenes gigantes redimensionadas a un menor tamaño
  29. 35. 7 Reducir el tamaño en KB de imágenes con compresiones lossless www.smushit.com
  30. 36. 8 Comprime la transferencia de datos con GZIP
  31. 37. :D <Location /> 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 </Location>
  32. 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;;
  33. 39. Regla Nro 3 :D ¡Cache! :D
  34. 40. 9 Externaliza los estilos CSS y el código Javascript
  35. 41. 10 Agrega fecha de Expiración a archivos y configura su ETag
  36. 42. Regla Nro 4 :D El orden SI altera el producto :D
  37. 43. 11 Deja al principio del HTML los estilos CSS
  38. 44. 12 Deja al final del HTML los archivos Javascript
  39. 45. Herramientas
  40. 46. YSlow http://developer.yahoo.com/yslow
  41. 47. Page Speed http://code.google.com/speed/page-speed
  42. 48. Comentarios Finales
  43. 49. ¿Preguntas?
  44. 50. ¡Gracias!

×