Cómo reducir los costes y acelerar webs con tráfico alto

Conseguir que tu web tenga una gran cantidad de tráfico es una tarea difícil.

Algunos emprendedores empiezan con grandes inversiones en publicidad, comprando usuarios y generando tráfico mientras dispongan de dinero.

Sea cuál sea el motivo, llegarás a una situación en que tendras un tráfico considerable, el cuál te generará unos costes. En función del volumen de tráfico necesitarás más recursos, tanto máquinas como ancho de banda.

Llegados a este punto, ¿qué haras? ¿invertir en máquinas? ¿y si las alquilas? ¿te pasas a nube?
Este tema lo comenté en un post reciente, donde comparaba las distintas alternativas: Hosting, housing o cloud y analizaba las ventajas e inconvenientes de cada modalidad, te recomiendo que lo leas.

Una vez decidido el modelo, te plantarás ante el mismo problema: el ancho de banda.
Actualmente las páginas web consumen mucho ancho de banda. Nos hemos acostumbrado a visitar sitios llenos de contenido gráfico/multimedia, el cuál tiene un coste elevado. Por ello, cualquier mejora que realices para reducir este consumo tendrá un impacto muy importante en tu cuenta de resultados.

Técnicas para ahorrar en ancho de banda acelerando la web

Apretar el cinturón a nuestro HTML

No me refiero a reducir el contenido que muestras, ni a perder información, nada más lejos de esto. Una solución pasa por utilizar una buena estructura, no utilizar estilos en línea, externalizar toda maquetación y scripts...

Si además utilizas tecnologías .NET (como es mi caso), inhabilitar el "viewstate"  de las páginas hará reducir hasta un 30% el peso de nuestras páginas.



Compresión

La mayoría de los servidores web permiten comprimir la salida en formato GZIP, siempre que el navegador del usuario permita desencriptar (datos enviados en toda solicitud web hacia tu servidor).

La compresión permite reducir el peso de la página y de los recursos como hojas de estilo y javascript en más de un 50%, traduciéndose de nuevo en más ahorro.



Caché pública

Cualquier recurso que puedas cachear (es decir guardar en memoria) será un beneficio en la experiencia de usuario (ya que acelerará nuestra página web), además de un ahorro en costes si esta caché es pública y permites que sea almacenada en proxys externos y en el cliente final.

Al realizar esta acción estarás permitiendo que cualquier intermediario y el mismo cliente puedan almacenar una copia del recurso solicitado (página, imagen, hoja de estilos, script...), para que en próximas ocasiones no te solicite el recurso.



CSS sprite

Cuando desarrollamos solemos insertar  imágenes diferentes en una misma página: una para el logotipo, otra para el fondo, otra para alguna promoción, etcétera. Usando la técnica CSS Sprite podrás crear una  imagen con todas las imágenes dentro y luego mediante CSS mostrarlas.

De esta manera reducirás el número de solicitudes a tus servidores, rebajando el peso y acelerando la carga de tu página.



Combinar CSS y JS: una arma de doble filo

A priori combinar hojas de estilo y javascript en un único fichero parece beneficioso. Reducirás el número de peticiones de tu cliente, acelerarás la carga... Pero debes ser conscientes de las consecuencias de ello:

• Más coste computacional (en caso de que dicha combinación ser dinámica). Combinar los ficheros para devolver uno tendrá un coste en el procesador de tu servidor, y por lo tanto unos pocos milisegundos de retardo.
• Menos reutilización de las hojas de estilo y del javascript. Si dispones de muchos CSS y JS que vas combinando entre si obtendrás múltiples combinaciones, siendo el resultado poco reaprovechado por el usuario, y por lo tanto obligando al cliente a bajar nuevos ficheros más pesados en cada página que visita.

CDN para distribuir contenido estático

Una vez realizados los puntos anteriores un buen uso de un CDN te permitirá sin duda ahorrar costes. En mi caso los servidores tenían que hacer frente a peticiones de páginas web (html), así como imágenes, estilos, javascripts... haciendo que las máquinas necesitarán más recursos y estuvieran abriendo y cerrando conexiones frecuentemente.

¿Qué es un CDN? CDN corresponde a las siglas de Content Delivery Network (Red de distribución de contenido). Es un servicio que ofrecen algunos carriers que hacen de frontal para tus servidores. Además disponen de diferentes puntos distribuidos por todo el mundo, por lo que si un usuario accede desde Estados Unidos, es un servidor de Estados Unidos el que responde, y no uno tuyo en España (o donde esté). De esta manera además la respuesta es mucho más rápida en todos los casos.

¿Cómo funciona?

Todo y que es posible configurarlo de múltiples maneras, lo más habitual es subir el contenido que quieres que sirva el CDN a este mismo.
En mi caso el funcionamiento que tengo es distinto, y es el que recomiendo por la facilidad que tiene configurarlo y mantenerlo. Cada vez que solicitas una página, imagen, hoja de estilos o lo que sea, la solicitud la recibe el CDN, y este si la tiene la sirve (ahorrando a nuestro servidor el trabajo), y en caso que no la tenga me la solicita y se la almacena para no volverla a solicitar (hasta que yo le diga que no está vigente).

Este cambio permitió reducir el ancho de banda servido en un 95%, además el coste del ancho de banda de un CDN es mucho más económico que el que suele cobrar una empresa de hosting/housing, por lo que obtuve un ahorro económico aproximado del 90%.

¿Qué ganas además del ahorro en costes?
Si el ahorro no fuera suficiente para el cambio, el uso de un CDN te permite centrarte en lo más importante de tu web: el contenido. Además permite no preocuparte tanto de como gestionar incrementos de tráfico puntuales, ya que la mayor parte de las peticiones serán gestionadas por el CDN.

Por si te interesa, el CDN que utilizo actualmente es GoGrid, distribuidor de EdgeCast, el cuál dispone de un magnífico servicio, soporte y un coste inmejorable.

Este post forma parte de la Guía para nuevos emprendedores 

Si te ha gustado este post, compártelo ;)