Inicio > Internet > El tamaño sí importa a la hora de crear una página web.

El tamaño sí importa a la hora de crear una página web.


El tamaño de tu página web influye mucho en la navegación del mismo, mientras menos espacio ocupen los archivos que componen tu web, menos tardará el usuario en cargarlo y menos ancho de banda se consume. Todos sabemos lo incómodo y molesto que son las páginas web con mucho contenido, porque a veces, duran su tiempito para cargar. Chequeen algunos consejos y métodos para ahorrarse unos kilobytes en las imágenes, hojas de estilo o scripts, gracias a los colegas de mundogeek.net.

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:

1.JPG

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):

2.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:

3.JPG

Para volver a tener un css legible, de forma que podamos hacer cambios fácilmente, podemos ejecutar csstidy con las opciones por defecto:

4.JPG

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:

5.JPG

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

6.JPG

y editar el archivo .htaccess para que el servidor sirva las versiones comprimidas cuando el navegador del cliente mande la cabecera Accept-Encoding.

7.JPG

Anuncios
Categorías:Internet
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: