El ancho de banda (los datos que se transfieren desde el servidor al navegador del usuario), por norma general, está limitada por los proveedores de hosting. Como propietario de una página web, debes asegurarte que el ancho utilizado por tu sitio web es el mínimo para así, no caer en posibles problemas y errores. En este artículo he compilado una serie de consejos para ahorrar ancho de banda en tu web y, por consiguiente, que tu web sea mucho más veloz.
Usa CSS en vez de imágenes
Las imágenes consumen mucho ancho de banda. Como la mayoría de los navegadores actuales son capaces de renderizar gráficos como los box-shadows o los bordes redondeados, no es mala idea utilizar las nuevas propiedades de CSS3 para sustituir imágenes, siempre que sea posible. El código CSS consume menos ancho de banda que las imágenes.
Si necesitas que tu web sea compatible con los viejos navegadores, como por ejemplo con el infame IE6, la solución es utilizar una hoja de estilo alternativa e imágenes solo para este tipo de navegadores. Utiliza comentarios condicionales para vincular esta hoja estilo específica en tu hoja de estilo actual tal que así:
<!--[if IE 6]>
<link href="ieonly.css" rel="stylesheet" />
<![endif]-->
Asegúrate siempre de que tus imágenes están optimizadas
Aunque puedas sustituir imágenes por CSS en tu web, es más que probable que no puedas hacerlo con todas. Las imágenes siempre van a ser un componente super importante en tu página web, por eso debemos asegurarnos de que están optimizadas para ser visualizadas en un sitio web.
Si utilizas Adobe Photoshop, existe una opción para ello llamada Guardar para web que lo que hace es reducir el tamaño de la imagen sin comprometer la calidad de la misma. Otra opción es utilizar servicios gratuitos online para, por ejemplo, reducir el tamaño de la imagen, manteniendo una calidad alta. Hay muchas webs para ello, pero si tuviese que recomendar alguna, te diría que echases un vistazo a Smush it. Smush it es un servicio online para optimizar imágenes que es ideal para mostrar estas en tu web.
Si eres de los que han optado por WordPress para desarrollar su página web, existe también un plugin gratuito de Smush para los mismos propósitos. Es decir, con este plugin, todas las imágenes que subas a tu WordPress, se optimizarán automáticamente, sin tener que hacer nada. Así cuando se muestren en el navegador del usuario, al pesar tan poco, no provocarán carga y la web irá mucho más rápido.
Usa un sistema de caché en tu sitio web
Llamamos cachear a la acción de recuperar datos mediante un directorio de almacenamiento (llamado caché) en lugar de utilizar los recursos para generar cada vez que se necesite, la misma información.
El siguiente código cacheará archivos como .jpg, .gif y .swf. Los archivos generados por la caché tendrán una vida de una semana. Para otros tipos de ficheros, debes modificar el tiempo de vida de la caché. Por ejemplo, en archivos que son más flexibles, como css y js, los ficheros, por norma general, deben tener un tiempo de vida de 12 horas.
Pega este snippet en tu fichero .htaccess.
<filesmatch ".(jpg|jpeg|png|gif|swf)$"="">
Header set Cache-Control "max-age=604800, public"
</filesmatch>
¿Administrador de WordPress? No te preocupes, existen soluciones para llevar esto a cabo en WordPress y de una manera mucho más compleja y profesional y, por supuesto, con mejores resultados. Se trata del plugin W3 Total Caché. Un plugin totalmente gratuito que cachea cada aspecto de tu blog o página web. Con esto te asegurarás de que tu web irá más rápida y de reducir el ancho de banda.
Prevé el robo de ancho de banda y el hotlinking
Una mala práctica muy común en Internet es el hotlinking. ¿No sabes qué es el hotlinking? No te preocupes, en programacion.net te lo explicamos a través de un sencillo ejemplo. El sitio web A alberga una imagen que muestra en una página web. El sitio web B enlaza la imagen del sitio web A, haciendo que el ancho de banda del sitio web A sea consumido cada que el sitio web B cargue.
Así que, sin duda alguna, si no quieres compartir tu ancho de banda con nadie más, ¿habrá que poner cartas sobre el asunto, verdad? Bueno, combatirlo es sencillo así que no hace falta preocuparse. Lo que debes hacer es crear una nueva imagen (que puede ser un gif transparente de 1x1 o bien una imagen que indique claramente “No me robes mis imágenes”) y subirla a tu servidor, o mejor aún, subirla a un servidor de imágenes gratuito. A continuación, debes agregar el siguiente código en el archivo .htaccess de tu sitio web. No olvides modificar el código con la URL de tu página web, y la dirección URL de la imagen que acabes de crear.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]
Utiliza minify para comprimir archivos css y js
Minify es una app de PHP5 que te ayuda a seguir varias reglas del Yahoo!’s Rules for High Performance Web Sites. Combina múltiples archivos de CSS y Javascript, elimina espacios en blanco y comentarios innecesarios, y te provee de un codificado gzip y unas cabeceras optimas del lado del cliente.
Si eres administrador de WordPress y te interesa esta característica, decirte que ya viene incluida en el plugin W3 Total Cache. Así que si ya lo tienes instalado, no tienes porqué hacer nada ya.
Usa servicios de terceros para albergar grandes ficheros
Si albergas ficheros pesados en tu web (vídeos, archivos psd, grandes imágenes) definitivamente debes confiar en servicios de terceros como, por ejemplo Dropbox, para albergar dichos ficheros. De esta manera, cuando alguien quiera descargarse alguno de estos ficheros, no consumira tu ancho de banda, sino que consumirá el ancho de banda de este servicio de terceros.
Fuente: catswhocode.com