El tamaño es muy importante, al menos a la hora de crear una página web: cuantos menos ocupen los archivos que componen nuestra web, menos tiempo tardará en descargarlos el usuario y menos ancho de banda consumiremos. Veamos algunos métodos para ahorrar algunos kilobytes en nuestras imágenes, hojas de estilo o scripts.
Reducir el tamaño de los PNG
Últimamente, y para imágenes muy vistas, como el logo de la página, suelo utilizar este método que descubrí en su día en las recomendaciones sobre imágenes de la Wikipedia. Necesitarás las herramientas PNGOUT, OptiPNG, DeflOpt y AdvDef:
optipng -o7 imagen.png
advdef -z4 imagen.png
pngout /ks imagen.png
deflopt imagen.png
Para imagenes que no van a verse tantas veces, me basta con el plugin Save for web para GIMP.
Reducir el tamaño de los JPEG
Para reducir el tamaño de las imágenes jpg podemos utilizar, por ejemplo, jpegtran (binarios para Windows):
jpegtran -optimize -outfile optimizada.jpg imagen.jpg
Este comando no provoca pérdidas respecto de la imagen original.
Reducir el tamaño de los CSS
El primer paso debería ser, evidentemente, eliminar las reglas obsoletas que ya no se utilizan, pero que se han mantenido en la hoja de estilo, bien por despiste o bien por dejadez. Para ello puede ser útil, por ejemplo, Dust-Me Selectors, una extensión para Firefox que nos informará de los selectores no utilizados en la página actual. También puede comprobar una serie de páginas listadas en un sitemap (aún no está actualizado para Firefox 3.6, así que si lo queréis usar en esta versión, podéis actualizarlo usando mi aplicación Update XPI, por ejemplo).
Una vez hemos eliminado las reglas obsoletas, podemos pasar a reducir la hoja de estilo, usando propiedades de atajo, como font:bold 12px verdana en lugar de font-weight:bold, font-size:12px y font-family:verdana; eliminando comentarios o eliminando espacios en blanco innecesarios. Podemos hacer esto utilizando, por ejemplo, CSSTidy:
csstidy.exe estilo.css ––template=highest ––remove_last_;=true estilo-comprimido.css
Para volver a tener un css legible, de forma que podamos hacer cambios fácilmente, podemos ejecutar csstidy con las opciones por defecto:
csstidy.exe estilo-comprimido.css estilo.css
Reducir el tamaño de los JS
YUI Compressor, de la librería de YUI de Yahoo!, es posiblemente la mejor opción, aunque es necesario tener instalado el JRE o el JDK de Java para poder utilizarlo:
java -jar yuicompressor-2.4.2.jar script.js -o optimizado.js
Comprimir en el servidor
Al comprimir el contenido al vuelo en el servidor podemos reducir aún más el tamaño de los archivos, pero, a cambio, consumiremos más CPU y memoria en cada petición, lo que puede provocar que el servidor se colapse, o que se tarde más en servir cada petición. Por lo tanto, en este caso, es necesario sopesar si va a merecer la pena.
Apache cuenta con un par de módulos para comprimir el contenido en el servidor: mod_gzip y mod_deflate. mod_deflate, por defecto, comprime menos que mod_gzip, aunque es más rápido que este. Puedes comprobar si alguno de ellos está activado en tu servidor creando un archivo PHP que llame a la función phpinfo:
<?php phpinfo(); ?>
Otra opción a tener en cuenta para comprimir el contenido en el servidor es utilizar minify, un script PHP que combina, comprime y cachea las hojas de estilo y los scripts.
Por último, para archivos estáticos, otra opción, sólo recomendada para gente con algún conocimiento básico sobre Apache, sería comprimir nosotros mismos los ficheros. Sólo tenemos que usar gzip para crear los archivos comprimidos
gzip -c estilo.css > estilo.css.gz
y editar el archivo .htaccess para que el servidor sirva las versiones comprimidas cuando el navegador del cliente mande la cabecera Accept-Encoding.
AddEncoding x-gzip .gz
<IfModule mod_rewrite.c>
RewriteEngine OnRewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+)$ $1.gz [L]
</IfModule>
