Optimiza el ancho de banda de tu tienda online

6 Comments

Cuando te embarcas en una aventura, la cual consiste en montar una tienda de comercio electrónico, creemos que con elegir un CMS (o desarrollo propio), hosting, empresa de logística,… es suficiente. Pero hay algo de lo que no todos nos acordamos, y es el ancho de banda de nuestra web.

Libería

Un ejemplo en la vida real sería la típica librería de barrio que tiene un escaparate pequeño y una puerta aún más pequeña, tanto que sólo puede entrar o salir una persona a la vez, y en ese caso tendríamos un ancho de banda ínfimo, dando lugar a la creación de una cola en el caso de que quisiera entrar mucha gente de golpe.

El caso contrario es por ejemplo la tienda de H&M en Gran vía, en la que pueden entrar de 20 en 20 personas (apróximadamente).

Un situación real muy común en el comercio electrónico es que tengamos 200 usuarios (por ejemplo) concurrentes viendo nuestra tienda, y que cuando llegue el 201 el servidor se sature y deje de dar servicio. Podríamos decir que es un ataque DDoS involuntario (Distributed Denial of Service). En ese caso ya estamos perdiendo clientes, y no, no nos interesa esa situación.

¿Qué podemos hacer para intentar evitarlo? Veamos algunas técnicas interesantes que he recopilado, y que no requieren de grandes conocimientos técnicos:

1.- En vez de imágenes, usa CSS para colores de fondo. Las imágenes suelen consumir un ancho de banda innecesario y el CSS ¡es “gratis”!.

2.- Ajusta las imágenes a la medida que necesites. No cargues una imágen de 1MB y luego le pongas un Width:200px, estaremos perdiendo un ancho de banda precioso. Mejor tener varias imágenes cada una con una resolución adecuada para el sitio donde se encuentra, que una grande redimensionada cada vez que cargamos una página.

3.- Comprime el CSS, es decir, en vez de tener:

[code language=»css»]padding-left:10px;
padding-right:9px;
padding-top:8px;
padding-bottom:7px;[/code]

Podemos convertirlo en:

[code language=»css»]padding: 10px 9px 8px 7px;[/code]

(por si alguno no lo sabe, el orden es arriba-derecha-abajo-izquierda, como las agujas del reloj)

4.- En la medida de lo posible elimina Tags html, comentarios y espacios en blanco que sean innecesarios, pero siempre manteniendo el código limpio.

5.- Utiliza AJAX, no hace falta recargar la página entera en mucha de las ocasiones.

6.- Evita el robo de ancho de banda en imágenes, al final lo pagas tú. Hay un método sencillo que es añadiendo una regla al fichero .htaccess:
RewriteRule .(jpeg|jpg|gif|png)$ – [F]

Con esto evitaremos que otras páginas puedan enlazar nuestras imágenes.

7.- Si tienes imágenes/ficheros muy pesados, quizás te convenga cargarlos desde algún servicio web gratuito, como puede ser: Flickr, Picasa, megaupload,imageshack…

8.- Mide el tamaño de cada elemento de tu web y analiza de donde puedes recuperar un puñado de KBs.

Files Size

9.- Evitar incluir el código javascript o css en los ficheros donde se van a ejecutar, ya que se cargarán cada vez que se acceda a la página. Sin embargo, si los ponemos en ficheros aparte los navegadores los almacenarán en caché.

10.- Si utilizas AJAX, intenta que las peticiones sean GET, ya que POST necesita realizar dos llamadas: una para la cabeceras y otra para los datos, mientras que GET sólo necesita un paquete TCP.

11.- En la medida de lo posible ofrece una versión para dispositivos móviles. Va a ser seguramente más optima que la versión de escritorio, debido a que la interfaz será menor y no necesitará tanto ancho de banda. En este caso, intenta mantener el tamaño de los elementos por debajo de 25KB, ya que el iPhone (por ejemplo) no cachea elementos de un tamaño mayor.

Existen Add-ons para los navegadores más importantes que nos permiten analizar el rendimiento de la página e incluso darnos consejos sobre como mejorar. En este caso os muestro un par de capturas de pantalla de la heramienta YSlow (de Yahoo):

YSlow

Yslow

Resultados YSlow

Resultados YSlow

Resultados YSlow

Resultados YSlow

Fuentes:

6 Tips for Optimizing Bandwidth Usage on Your Online Store

Best Practices for Speeding Up Your Web Site

Yahoo! YSlow

Css-compressor

11 Tips to Reduce Server Load and Save Bandwidth

Suscríbete a nuestra newsletter

6 Comments
    • Andy
    • 18/04/2011
    Responder

    Mirad esta página tan chula que me he encontrado. Engloba Page speed y YSlow:
    https://gtmetrix.com/

  1. Gracias por las aportaciones @dagi3d!

    La verdad es que los recursos que pone google a nuestra disposición son estupendos. Ese enlace que nos dejas es un #musthave en nuestros favoritos.

  2. Responder

    Lo de usar ajax está bien siempre y cuando se ofrezca una solución alternativa para el tema de los buscadores.
    Otra buena práctica es el uso de los etags(https://en.wikipedia.org/wiki/HTTP_ETag). También se pueden empaquetar los javascripts y hojas de estilo en un sólo fichero para ahorrar peticiones. Y al igual que los css, los ficheros js también se pueden comprimir(tal como hacen con librerías como jquery, por ejemplo).
    Además Google ofrece una plataforma para cargar las librerías más usadas desde sus CDN’s(https://code.google.com/apis/libraries/devguide.html). Así, aparte de ahorrar ancho de banda, si un usuario ya ha entrado en otra página que usa la misma versión, ya la tendría cacheada, aunque en este caso es recomendable añadir la opción de poder usar la librería desde nuestro servidor en caso de que la de google no estuviese disponible por el motivo que sea.

  3. Responder

    Has probado https://code.google.com/intl/es-ES/speed/page-speed/

    Es de una empresa nueva. Por lo visto promenten :p

  4. Responder

    Excelente post agrupando muchos puntos que hay que tener en cuenta, pero que muchas veces descuidamos. Alguna otra cosilla adicional:

    * Uso de CSS sprites
    * Configurar Apache para que transfiera la info comprimida en GZip
    * En lo que comentabas de utilizar sitios tipo Flickr para tener las imágenes ahí, lo extendería a utilizar servicios como Amazon S3 o Amazon CloudFront, para tener los ficheros estáticos que se consuman mucho, almacenados de forma externa a nuestro servidor principal, y a ser posible replicados por zonas geográficas.

 

Deja tu comentario