El tamaño sí importa

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 On

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+)$ $1.gz [L]
</IfModule>

17 pensamientos en “El tamaño sí importa”

  1. Muy buen tutorial. ¿Me podrías solventar una dudilla?, estoy usando kumbia para un proyecto web y se me han quedado css sin usar. ¿Como se haría para saber que css no se usan en el proyecto entero?,una opción es cargar todas las templates en la principal y mirarlo con dust-me, aunque es bastante incómodo. Bueno si no sabes pues nada.Saludos.

  2. Pingback: El tamaño sí importa (en las páginas web)

  3. ¿Has probado las closure tools de Google para comprimir javascript?

    El fichero completo de Open Layers, una biblioteca de webmapping, es un js realmente grande, 900KB descomprimido. Originalmente se comprime con jsmin (una herramienta en python) y gané como 100KB usando esa utilidad de google dejándolo en unos 500KB o algo menos, que luego además con la compresión de apache acaban viajando 93KB por la red… vamos que se nota, y mucho.

  4. Recientemente estoy intentando solucionar mis problemas con la herramienta de Google Page Speed.

    Lo que me falta es indicarle al navegador cliente que cachee las imágenes para que no las descargue en cada visita.

    Estaria bueno igual enfocarse en wordpress y sus plugins.

  5. Ah, ojalá más desarrolladores web leyeran estas cosas. La verdad que a veces nos lanzan páginas más pesadas que un camión, sin consideración alguna para con los que navegamos con enlaces lentos.

  6. Buenos consejos, tomo nota de esos comandos y utilidades que has puesto. Yo uso diariamente Page Speed para optimizar el rendimiento y va realmente de perlas.

    No obstante, tengo una pregunta, ¿vale la pena comprimir en gzip los archivos de una web que estoy realizando (la podéis ver en mi nick) y actualmente con poco tráfico, a costa de reducir unos cuantos kbs (no se exactamente cuanto comprime gzip pero supongo que debe ser un percentaje alto)? Sale realmente a cuenta? Necesito opiniones varias, gracias.

    Un saludo.

  7. Buena recopilación, la verdad es que si este proceso se puede automatizar en la publicación de un sitio web es lo ideal.

    Respecto al PNG, pngout creo que es el que mejor funciona de todos y consigue prácticamente él solo toda la compresión, claro que si la web tiene muchísimas visitas (Wikipedia), cualquier byte es valioso.

    En cuanto a la compresión de js, a parte del YUI Compressor añadiría el Closure Compiler de Google, que a parte de minimizar intentar optimizar el funcionamiento.

    Y añadir que el YUI Compressor, desde la versión 2.0 tiene compresión también de CSS, aunque es una pena que ninguna de estas herramientas “entienda” realmente la CSS y pueda encontrar etiquetas duplicadas, innecesarias, etc.

  8. Yo utilice también la web smushit.
    Le das la url y te puedes bajar un zip con todas la imagenes de tu web reducidas y (teoricamente) sin perdida de calidad.

    Muy útil y facil de utilizar.
    http://www.smushit.com

    Lo preguntaba alguien por arriba, para conseguir que el cliente cachee las imagenes se puede hacer modificando el fichero .htaccess. Busca en google cache y htaccess.
    Pues encontrar cosac como:

    ExpiresActive On
    ExpiresDefault "access plus 2 months"
    Header set Cache-Control "max-age=5184000, public"

  9. Pingback: El tamaño sí importa | Omeyas Web

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.