Mucho se ha hablado a través de los años sobre como hacer un website más liviano. Este articulo es para ti.

Hubo una época en la web donde cada página estaba contenida en un gran colofón de texto plano, todo estaba en línea, era lento, pesado y para nada bonito. La web en su infancia total era un sitio hostil, Google apenas daba sus primeros pasos como gran índice biblioteca de contenido y la web sinceramente era un lugar bastante feo en comparación con su contraparte impresa.

Hoy día la web es un sitio tan complejo, frameworks, código de servidor, índices internos, bases de datos, portales completos basados en CMS, frameworks y más frameworks de javascript y CSS, de ser un lugar sencillo, paso a ser un lugar inmensamente complejo y de nuevo hoy día regresamos a la sencillez.

Pero la pregunta que todos nos hacemos todos los días es: ¿cómo hago para que mi website sea más liviano y el hardware donde corre sufra mucho menos estrés?

Pues hay muchas formas, y una de ellas la exploraremos hoy día, el paralelismo.

El Paralelismo como Técnica de Construcción

El paralelismo no es más que hacer que el navegador haga varias cosas al mismo tiempo, Google Chrome, Mozilla Firefox, y aunque muchos se sorprendan Internet Explorer hacen esto de forma esplendida (me límito a enumerar estos tres que son los más usados pero safari y opera y los demás también tienen una forma)

Pero el paralelismo inicialmente no es más que bajar todo el contenido de la página al mismo tiempo, regularmente el navegador hace un barrido del DOM y decide que es lo más factible para bajar. Lo primero que hace es bajar el contenido del header, luego el del body de la página, y finalmente imagenes y contenido multimedia.

Para poder tomar ventaja del paralelismo nativo, tenemos que hacer un par de cambios fundamentales en nuestro sitio web, que quizás no afectan demasiado el sitio de producción a nivel de construcción, pero la diferencia de usabilidad para el cliente final es notable.

Punto 1: Minificar el Código

para minificar el código solamente hay que refabricar la sección legible de un programa por algo que sea mucho más liviano y que se preste mejor a la comprensión. Pero un ejemplo vale más que una explicación

Código legible para humanos no minificado

$(function(){
$(“imagen”).backstretch(“rutaalaimagen.jpg”);
$(“#resultado”).append(“Resultado es: ” +  Convert_C_To_F(grados));});
function Convert_C_To_F(grados)
{
   var farenheit = 0;
   farenheit = (grados *1.80) + 32;
   return farenheit;
}

Código minificado legible y preciso para el navegador:

function Convert_C_To_F(e){var t=0;t=e*1.8+32;return t}$(function(){$("imagen").backstretch("rutaalaimagen.jpg");$("#resultado").append("Resultado es: "+Convert_C_To_F(grados))})

Como podemos ver los nombres de las variables fueron cambiados por letras sencillas dentro del alcance de cada función. También podemos apreciar que los espacios y saltos de páginas fueron removidos para dejar una gran línea choricera ilegible para un ser humano. Lo ideal en este caso es tener ambas versiones, trabajar en la legible, y que cuando se publique el sitio se convierta automáticamente a la versión minificada. Bien sea automáticamente o a pie.

Para esto existen varios compiladores, en javascript Closure Compiler, JSMin o YUI Compressor. En CSS: YUI Compressor and cssmin.js. Es probable que haya otros claramente, pero es cuestión de buscar y conseguir con el que se sientan cómodos.

Punto 2: Utilizar CDNs para agilizar la descarga al cliente

La web con todo lo moderna que es, sigue teniendo la misma infraestructura tras bastidores. un servidor, seguirá sirviendo las solicitudas de un cliente en especifico en una dirección especifica en orden de llegada. la pregunta: ¿Cómo hago para descargarme distintas partes del sitio web al mismo tiempo?

Es muy fácil: Poner cada cosa en un sitio diferente. De esta forma utilizamos el paralelismo en su totalidad. Por ejemplo:

Sea Jquery, una de las librerias más utilizadas en el presente como framework de Javascript el objetivo a paralelizar. Regularmente siempre la ponemos en algún sitio en una carpeta llamada scripts en nuestro website y la llamamos (algunos cometemos el error de buscar la versión no minificada y resumida de desarrollo en el ambiente de producción.)

Primer paso:

Usar la versión minificada. Esto es importante. la diferencia de tamaño puede ser la diferencia entre un sitio web lento y uno que funcione con una mejor respueta.

La diferencia de ejecución y de tamaño es un abismo. La versión minificada tiene un tamaño apróximado de 90K. la versión de desarrollo tiene 265K. Hablamos de una diferencia de casi el 70% de transferencia de datos. Si esto sumamos que la versión minificada puede recibir el tratamiento de la compresión de servidor podemos reducir su tamaño a menos de 40K.

Segundo paso:

Quizás el más importante. Usa un CDN. Content Delivery Network por sus siglas en inglés o Red de Entrega de Contenido en español.

¿Por Qué?

Razones son muchas. enumero. Google, Microsoft, Amazon y compañía siempre tendrán más ancho de banda, pulmón y músculo que cualquier cosa que puedas comprar (excepto si compras una copia de la IBM Blue) ya que ellos trabajan en redes masivas pensadas para suplir al mundo de información. Ellos en aras de hacer la web un sitio menos terrible, ponene a la disposición varios CDNs con distintos scripts, regularmente los más utilizados.

Si tu servidor además de tener que lidiar con la página, las imagenes, los scripts que ya van corriendo, encima tiene que suplir el jQuery puedes tener un impacto de un 10 a 20% en la página. Si el jQuery opuestamente viene de Google, el navegador lo bajará una sola vez, y quedará disponible a partir de ese momento para todas las demás páginas que utilizen la misma versión o si alguna ya lo bajo con anterioridad ni lo tendrás que bajar. Esto te da dos ventajas:

Empiezas a utilizar el cache del navegador y te quitas de encima preocuparte que el jQuery ocupe parte de la transferencia, bajando al mismo tiempo (e incluso primero) que tu website. De Esta forma es un proceso menos, y algo menos de lo que preocuparte en optimizar en tu website.  A continuación mis CDNs favoritos:

https://developers.google.com/speed/libraries/devguide

Este el de Google. Tienen Jquery, Jquery UI y otros tantos frameworks muy utilizados

http://www.asp.net/ajaxlibrary/cdn.ashx

Este es el de microsoft, Solían tener más scripts, pero les lanzaron un embargo hace tiempo y solo quedan Jquery y otros pocos.

http://cdnjs.com/

Este repositorio de CloudFlare, tiene cualqueir cantidad de scripts bajo el sol. Librerias de todo tipo, de muchas cosas muy utilizadas. Es aquí donde les puedo decir: Knock Yourself Out.

Cloudflare como bono te los ofrecen de forma geográfica así que los clientes fuera del continente americano se benefician también de esto.

Por supuesto no son los únicos, pero si los más conocidos, habrán otros para otras librerias, y algunos para hostear tu página completa.

Punto 3: Tratar lo más posible de estar cerca del standard y no tener código en línea

Cuando W3C implementó el spec de HTML4 y CSS, la idea detrás de esto era que se separan los objetivos de cada una de las distintas tecnologías, de esta forma: HTML quedó como el armazón y componente, CSS quedó como la parte visual, el estilo y Javascript quedó como el comportamiento de cada uno de estos componentes.

Cosas como agregar onclick=”” a un botón o font-size y font-color a un label son cosas que hacen la página más pesada, más lenta al tener que parsear cada elemento por separado, y lo más importante: convierte una actualización en una pesadilla. en vez de cambiar una sola clase en css, tendrías que buscar una por una las páginas que tienenes con el estilo y cambiarlo en línea. entonces, un ejemplo vale más que mil explicaciones

Más lento, más díficil de mantener:

<label font-size=”16px” font-color=”#FF0000” align=”center”>Ha Ocurrido un Error</label>

Más eficiente, replicable en todo el sitio y mucho más sencillo de mantener

<label class=”etiqueta-de-exito”>Éxito</label>

Adicionalmente utilizando las clases podemos hacer selectores con JQuery, el DOM se hace más ágil al no tener que ir redibujando cada cosa una vez la lee, y en total, podemos mejorar la transferencia de datos, y la velocidad de integración en un 30 o 40%

Punto  4 y Final

Utilizar tablas y frames para armar el esqueleto delimitante de un sitio web, debería estar penado por la ley. Pero este último punto lo dejamos para otro día

FAQ

¿Tu fondo es un mosaico?

Crea una sección del mismo y lo repites con alguna propiedad en CSS. Esto hace la página infinitamente más liviana al no tener que bajar un gran archivo de 1980×1020 de 3 megas. si no uno solo cuadrito de 200×200 de apenas 10K.

¿Tus imagenes usan transparencias?

Usa PNG. Deja los GIFs para los sitios con gatos.

Ah pero, ¡Mis imagenes son paisajes hermosos!

Entonces pon una versión de vista previa, y si la persona así lo desea al hacer click que vea la más grande e imponente en toda su gloria detallada.

¡Pero Mi servidor es linux!

Prende entonces la compresión de todo el sitio.

¡Pero apache come mucha memoria!

Utiliza Nginx para que tengas mejor paralelismo.

¿Y si estoy en IIS?

FastCGI contigo amigo. Ya viene con paralelismo desde la fuente de agua potable.

¿Y si quiero una clase de CSS que caiga en cascada de clase en clase hasta los hijos?

Eso escapa de este artículo pero hay dos formas:

.ClasePadre .ClaseHijo .Elemento {Propiedad}

o se la agregas con jQuery una vez haya cargado el dom

Tengo en jQuery Onload y document ready, ¿Cuál es la diferencia?

OnLoad carga luego que el Document Ready. La explicación técnica escapa este artículo pero basta con que sepas que OnLoad se ejecuta luego.

¿Qué quieres de Navidad, Luis?

Un disco Duro Sólido. O una de ron y la compartimos con hallacas. Como prefieran.

Espero que este artículo les haya sido útil y que en el futuro puedan tomar ventaja de la tecnología que soporta todo lo que hacen.