Comprimir un sitio web, aumentar la velocidad de descarga de un sitio Web, al mismo tiempo que ahorramos dinero en ancho de banda.
La velocidad lo es todo. Si, suena exagerado, pero no lo es. La velocidad de descarga de un sitio Web, es tan importante como su contenido. Tu sitio debería responder a cualquier petición en 5 segundos como máximo. Si esto no es así, estás en problemas.
¿Como puedes medir la velocidad de descarga de un sitio?
Con esta herramienta: http://tools.pingdom.com/fpt/
El tiempo de respuesta obviamente puede variar dependiendo de la zona en la que uno esté conectado, además de la calidad de la banda ancha contratada. Pero son 5 segundos máximos para cualquier petición. Más largo que esto, perderás el 10% de tus visitantes cada segundo. ¿Exagero? A nadie le gusta "esperar a que una página se descargue para empezar a leerla", es más fácil, rápido y tentador tocar el botón "atrás".
¿Has hecho la cuenta de cuanto dinero gastas en banda ancha con tu sitio Web no optimizado?
Seguramente no, porque me atrevería a decir que el 90% de las paginas de Internet son sitios no optimizados que gastan millones y millones de bytes en información que podría ser resumida, compactada y enlatada. Me atrevería a decir que tú eres uno de ellos, y "si me apurás", me atrevería a decir que eres fanático de las estadísticas de tu sitio.
Este post es una guía para que ahorres dinero en ancho de banda y para que tus usuarios descarguen un 30% y hasta un 50% más rápido tu sitio Web.
Se trata de una "mejor experiencia para el usuario".
¿Quiénes deberían leer esto?
Si tienes un sitio Web, o un blog, o eres webmaster, seguramente esto te será interesante.
He preparado una lista de "Tips" a la hora de optimizar un sitio Web para exprimirle hasta el último byte posible.
Aprenderás no solo a comprimir js y comprimir css, sino a usar eficientemente cada byte de tu página.
El servidor también quiere dormir.
Antes de empezar, vale aclarar y definir ¿que son las "peticiones al servidor"?.
Cuando entras a un sitio Web, tu navegador está enviando una petición de información al servidor que provee el hosting, este le contesta a tu navegador con la información correspondiente.
Esa "contestación" requiere de una serie de pasos:
"Tomar pedido – analizar que el pedido llegó completo – buscar información en el disco – procesarla – enviarla – cerrar conexión"
La velocidad con la que estos pasos se ejecutan no significa que no exista un gasto de recursos, tanto de conexión como de procesamiento.
Imagínate a 1000 usuarios haciendo peticiones al servidor al mismo tiempo. El servidor debe procesar y enviar la información a cada uno de esos 1000 usuarios… Sin embargo, para un sitio Web no optimizado, esas peticiones se multiplican por la cantidad de imágenes, javascript, CSS, y otras yerbas agregadas al sitio de tal manera que un usuario produce hasta 20 peticiones al servidor en el mejor de los casos. ¿Te imaginas a 1000 usuarios haciendo 20 peticiones cada uno? Si la matemática no me falla, son 20.000 peticiones (incluyendo imágenes, procesamiento en php,css, js, etc).
Cada imagen en tu sitio, es una petición, un gasto de recursos, y en la mayoría de los casos, un gasto injustificado.
La idea de estos tips es disminuir esas peticiones al mismo tiempo en que comprimimos la información enviada. Dicho de otra manera lo que queremos hacer es "Comprimir un sitio Web".
En cada recomendación habrá un porcentaje de "ahorro" a modo de ejemplo, lo cual no significa que consigas esos márgenes, todo depende de tu sitio, ya que cada sitio es diferente.
Reducir el número de colores de una imagen.
Esto se logra con programas como "Photoshop" dándole clic al "Guardar para página Web" y reduciendo hasta ajustar, el numero de colores de una imagen.
Si tu imagen contiene degradados, o fondos de muchos colores, el PNG en la mayoría de los casos es la mejor opción.
Si tu imagen contiene pocos colores, o partes transparentes, el GIF a veces resulta más liviano que otros formatos.
El JPG normalmente es el más recomendado para fotos, pero todo depende de la foto.
Lo importante es ir probando hasta encontrar el mejor formato para tu imagen. Expongo aquí dos ejemplos de imágenes que fueron comprimidas hasta el máximo posible sin perder calidad, para comparar que formato ha sido el ganador en cada imagen. (A menos colores en cada formato, la calidad de la imagen disminuye).
 |
 |
 |
| JPG 60 12.03 KB |
PNG 256 colores 6.51 KB RECOMENDADO |
GIF 256 colores 12.25 KB |
 |
 |
 |
| JPG 60 7,80 KB RECOMENDADO |
PNG 100 colores 9,40 KB |
GIF 128 colores 13 KB |
*Imagen de ejemplo provista por Divine Error - deviant art: http://divineerror.deviantart.com/
Flash y otras yerbas.
En la moda de los diseñadores Web, el Flash se hizo tan popular que existen algunos locos que hacen todo un sitio Web, puramente en Flash.
Los excesos son malos, muy malos. Ni todo en Flash, ni todo en AJAX.
Solo recomiendo Flash para banners de publicidad. No tienen otra utilidad.
La gente que entra a una pagina en donde lo primero que se ve es un "Cargando" intermitente por más de 5 segundos, una porción de ellos cliqueará en el botón atrás antes de que la pagina termine de cargarse.
En cuanto a los menús raros, o los llamados "originales", tus visitantes tienen mejores cosas que hacer como para desperdiciar 15 segundos en entender tu sistema de menú en flash.
Otra desventaja de usar flash en menús es que el usuario debe hacer doble-click para acceder a la sección que desea, y en muchos casos el usuario no está acostumbrado a esto, y se queda esperando despues del primer click (que solo activa el flash).
Ahorro: 40% - 60%
No usar imágenes para mostrar texto.
¿Por qué usarías una imagen para mostrar texto? Piensa en todas esas llamadas al servidor que se hacen tan solo para mostrar una imagen que bien podría ser sustituida por texto.
En la mayoría de los casos, un buen estilo resuelve lo que podrías hacer con imágenes.
Un ejemplo:
PNG 64 colores
1.62 KB
Vs
color: #ffffff;
background: url(fimg03.png) repeat-x;
text-decoration: none;
border: 1px solid #1f54bc;
height: 31px;
width: 116px;
display:block;
font: bold 18px Arial, Helvetica, sans-serif;
padding: 9px 4px 0px;
}
Diferencia: 1.62 KB vs. 527 Bytes.
El segundo caso además nos sirve para reutilizar el fondo y hacer más botones del mismo estilo!
Ahorro: 5% - 20%
Usar CSS para todas las imágenes usadas en el diseño del sitio.
Los navegadores usualmente descargan las imágenes a medida que van apareciendo en el documento. Esto quiere decir, que el navegador descarga primero la decoración, y luego el contenido de tu pagina.
A veces, una página bonita también es una página pesada. Para arreglar esto, podemos usar CSS para cargar un fondo luego de cargar el contenido, esto no solo acelera el proceso de bajada de una página, sino que los navegadores no realizaran más peticiones de las imágenes contenidas en un CSS por cada página vista. Eso significa muchas menos peticiones al servidor!
MAL:
BIEN:
{
background: url(mifondo.gif);
width: 200px;
height: 100px
}
Si quisieras divertirte con el atributo ALT de una imagen, aquí hay una manera de hacerlo también desde CSS:
Donde "onepixel.gif" es un gif de 1x1 transparente.
Usar herencias CSS
Una técnica poco utilizada, quizás por desconocida, quizás por olvido, es la de hacer heredar estilos a todos los hijos en HTML.
Esto es ineficiente:
color: #03c;
font-size: 2em
}
Se declara la clase "celda" para cada columna, en este ejemplo, con una fila y cuatro columnas son 4 declaraciones. En casos más reales, con 5 filas serán 20 declaraciones de la misma clase.
Esto es optimización:
color: #03c;
font-size: 2em
}
En este último ejemplo, básicamente se muestra como la fila le obliga a las celdas a heredar el estilo. También podríamos definir el estilo en el tag "Table" para que todas las filas que se creen, hereden la misma clase. Si aplicas esto en todo tu documento te aseguro ahorraras entre un 5% y 10% en el peso del archivo HTML.
Ahorro: 5% - 10%
Usar abreviaciones en las propiedades CSS.
¿Que forma crees que es la mas optimizada?
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;
La segunda forma es un 191% mas pesada que la primera.
Usar rutas relativas
Una ruta absoluta, normalmente es mucho mas larga que una ruta relativa. Tomemos un ejemplo:
Vs:
Si tu sitio usa urls amigables, entonces no te queda otra que usar rutas absolutas.
Ahorro: 10% - 15%
Compresión Gzip desde PHP
Si manejas PHP, definitivamente este es un paso importante para acelerar las descargar de tu sitio. Normalmente la compresión ahorra entre un 30% y 70% en el peso total del archivo, acelerando notablemente la descarga.
¿Que se puede comprimir con Gzip?
Comprimir Js, css y html.
Aqui un codigo de ejemplo:
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
?>
Ahorro: 30% - 70%
Borrar los espacios en blanco
Mira el siguiente ejemplo:
Optimizado seria así:
Quizás en cuanto al diseño del sitio, te resulte muy incomodo de leer, pero ganarás bastante velocidad de descarga tan solo quitando los espacios. Hay que tener cuidado con esto, el HTML es muy sensible como para dejarlo en manos de herramientas que automaticen esto, lo mejor es ir borrando los espacios a mano.
Lo mismo es para Javascript:
{
if(typeof e=='string')
e=document.getElementById(e);
return e;
};
Optimizado seria asi:
Existe una herramienta muy buena de Dean Edwards dedicada a comprimir estos archivos de manera online. En algunos casos he logrado un 30% de compresión sobre el peso del archivo.
Antes de usarla, asegúrate de que tu script tenga los ";" (punto y coma) finales en cada instrucción y función (si, finalizar una función no solo con la llave sino también con punto y coma "};")
http://dean.edwards.name/packer/
IDEM para CSS. Quitar todos los espacios y tabulaciones innecesarios.
Ahorro: 5% - 15%
Combinar múltiples archivos en uno solo
Esto es ineficiente:
<script type="text/javascript" src="vars.js"></script>
<script type="text/javascript" src="custom.js"></script>
<script type="text/javascript" src="moofx.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="template.css" rel="stylesheet" type="text/css" />
4 llamadas para los scripts, mas 2 llamadas para los estilos. ¿Cómo se puede optimizar?
Simplemente juntando (y aquí el orden importa) los 4 archivos JS en uno solo, y los dos CSS en uno solo. De 6 llamadas al servidor, pasamos a tener tan solo 2.
¿Hay alguna manera de juntar todos los javascript externos, quitarle los espacios en blanco, cachearlos y comprimirlos de manera automática?
Si la hay!
El siguiente post trata ese tema:
http://www.roscripts.com/Web_page_optimizer-109.html
CSS Sprites, la exageración de la optimización.
Según website-performance.org, los sprites CSS son una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio Web.
Más exactamente, en vez de tener 15 imágenes usadas en fondos y distribuidas en tus estilos CSS, esta herramienta genera una sola imagen que contiene a esas 15 imágenes originales, y devuelve el CSS para incluir en tu sitio.
Aprende a usar esta herramienta en el siguiente post:
http://spritegen.website-performance.org/
AJAX: Beber con moderación.
Lo he dicho mas arriba: Los excesos son malos, muy malos. Existen algunos locos que han hecho sitios enteros en Ajax, cargando y descargando datos puramente con estas técnicas. ¿Por qué? La excusa es la de "ahorrar ancho de banda" sin embargo, todo ese ancho de banda que ahorran también lo gastan en cargar los pesados scripts de los frameworks usados para hacer el sitio Web compatible con todas las plataformas de navegadores.
No hay que abusar de las nuevas tecnologías, por más buenas que sean.
Minimizando los scripts.
Quizás la parte mas pesada de un sitio web, sean las imágenes. De lo que estoy seguro, es que los scripts ocupan el segundo lugar.
En estas modas de usar frameworks para todo, se sobrecargan los sitios con muchos códigos que nunca serán utilizados.
Pongamos un pequeño ejemplo.
Tenemos un script que depende de la función DomReady, por lo cual utilizamos MooTools ya que es modular y nos permitirá cargar solo esa función.
ERROR! MooTools, al igual que todos los frameworks, cargan un Core obligatoriamente, que son funciones para agilizar la programación en javascript.
Veamos cuanto pesa ese Core más la funcion DomReady.
mootools.js con DomReady : 16.1KB
¿Se justifican 16 KB solo para usar esa función? En algunos casos si, ya que no queda otra.
En este ejemplo basta con buscar un poco, para encontrar una solución alternativa y muchísima más liviana:
http://www.thefutureoftheweb.com/blog/adddomloadevent
¿Y la archiconocida función $?
Aquí está:
¿Y si queremos usar Ajax?
Aquí hay una opción:
http://snippets.dzone.com/posts/show/2025
Con esto no digo que los frameworks puedan ser reemplazados con funciones como estas. Hablo de seleccionar exactamente lo que se necesita, si se puede, y eliminar todo aquello innecesario.
Los frameworks son muy útiles para las webapp.
Externizando los Scripts
Externizar = Dicese de aquello que se quiere hacer externo o separar de algo.
En este caso, poner todos los scripts en un archivo JS y cargarlo desde el HTML. Esta costumbre se está convirtiendo en un estándar, por la sencilla razón de "manzanas con manzanas, y naranjas con naranjas", o para que entiendas mejor, no mezclar lo que es diseño, con lo que es programación.
¿Qué ventajas en cuanto a velocidad, nos trae separar los javascript de la pagina Html?
La principal ventaja, es que los Js se pueden cachear en el navegador, esto significa que solo serán cargados 1 vez en toda la sesión del usuario.
Ultimas palabras
Gracias por leer esta mini-guia (ya que podria haber sido más larga :grin:). Espero hayas podido disminuir el peso de tu sitio web!
Si te gustó la guia, puedes dejar tu comentario, y contarme tu experiencia.
PD: Esta página pesa menos de 100KB 
.
Cargando ...
ME parece genial tu idea, es verdad que el tiempo es oro, y en internet es ya una ley, porque no queremos que algo tarde un millar en cagar, hay que ser directo simple y preciso pero eso si sin descuidar la estetica y el concepto de la pagina web.
Gran Articulo Sr. Eduardo
Que bueno, cada vez que abro dreamweaver me vengo pa aca xD. Bytessss
jajajaja
gracias numa pronto escribiré mas sobre el tema. ya no uses dreamweaver mejor el notepad2 xDDD
byee