Archivo

Archivo para Sábado, 12 de junio de 2010

Optimizaciones del lado del cliente en aplicaciones web

Sábado, 12 de junio de 2010
4 comentarios

(Si señor, no todo es en el lado del servidor)

Hace poco me tocó tratar con una empresa Venezolana de desarrollo de páginas web, debido a un sitio web con el cual tengo el gusto de trabajar. En una de las discusiones técnicas uno de sus programadores este sostenía que el uso de técnicas como compresión de archivos no era necesaria y que en muchos casos podía afectar a los usuarios finales. El cache en todo caso se encargaba de mejorar la experiencia después de la primera carga.

Una verdad a medias debo decir; Si el archivo a entregar al usuario es muy pequeño (por el orden de 1KB) entonces la compresión puede afectar negativamente el rendimiento ya que el archivo comprimido resultante puede ser más grande o el esfuerzo por descomprimir en tiempo real es costoso en CPU comparado con el tiempo que toma en bajárselo.

¿Pero que pasa si tiene mucho archivos pequeños? (pista, póngalos juntos en un sólo archivo, más eficiente)
¿Qué pasa si los archivos si son grandes? (compresión estática, dinámica)

Primero que nada, no hay balas de plata, cada solución tiene cosas buenas y cosas malas. A continuación les enumero algunas, en particular las que apliqué (les dejo Google para que busquen la explicación de que hace cada una de ellas, me gusta más mostrar los pedazos de código):

  • Compresión en HTTP usando PHP gzip: Esto lo ponen en la cabecera de sus archivos de PHP. 
    1

    < ?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>;

    Lo que hace esto es definir el mime-type de la página como un archivo comprimido y inicia la compresión en el lado del servidor.

  • Si usa Apache, entonces pídale que comprima sus archivos en HTTP con gzip o mod_deflate
  • Si tiene Javascript u hojas de estilo grandes quizas no necesita comprimir los archivos con gzip, quizas pueda optimizarlos con yui compressor (hay otras implementaciones): 
    1
2

    # Primero hacemos un respaldo de todos los archivos, copiandolos a .orig. Luego iniciamos la conversión
auyan:yuicompressor-2.4.2 josevnz$ for file in `find /Users/josevnz/Documents/bocaproyectos/currentwebsite/ -name '*.css.orig' -follow|sed 's#.orig##'`; do java -jar /Users/josevnz/Downloads/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --nomunge --type css -o $file --verbose ${file}.orig && echo $file; done

    El tamaño se redujo considerablemente, sin usar gzip:

    1
2
3

    auyan:yuicompressor-2.4.2 josevnz$ ls -l /Users/josevnz/Documents/bocaproyectos/currentwebsite//css/style.css /Users/josevnz/Documents/bocaproyectos/currentwebsite//css/style.css.orig
-rwx---r-x@ 1 josevnz  josevnz  2624 Jun 12 20:55 /Users/josevnz/Documents/bocaproyectos/currentwebsite//css/style.css
-rwx---r-x@ 1 josevnz  josevnz  3893 May 31 15:37 /Users/josevnz/Documents/bocaproyectos/currentwebsite//css/style.css.orig

De nuevo no tiene que tomar mi palabra en serio. ¿Pero que tal la gente de Google? También hágase amigo de herramientas como FireBug.

¿Qué otros consejos tiene sobre la optimización de contenido en el lado del cliente que quiera compartir? (*hay un montón y este pequeño escrito no pretende ser una guía sobre todo lo que puede hacer*)

–José

internet, java, programación