El objetivo es que al realizar menos peticiones HTTP el tiempo de descarga se reduce bastante. Hay que tener presente que en IPv4 se consume en muchos casos más tráfico en la petición de la información que en la transferencia de la información en sí.

COMBINAR VARIOS CSS O JS EN UNO
Categoría: Conectividad, CSS, JavaScript

Normalmente los JavaScript y los CSS se encuentran en puntos de la página como la cabecera que bloquean la descarga de otros elementos. Esto significa que cuando la página se empieza a descargar, la descarga en paralelo de estos elementos hace que se puedan bloquear otros.

Para que funcione todo más rápido, es mejor tener un único fichero .JS o .CSS de un tamaño mayor que no varios pequeños. Uno de los mayores costes de conectividad es la propia conexión y desconexión de las descargas, por lo que si lo reducimos, mejor que mejor.

Una de las formas que hay para reducir estos ficheros y combinarlos en uno es hacer uso de HttpCombiner. La idea que combinar todos los scripts en un bloque, y los CSS en otro. De esta forma tendríamos algo tal que:


<script type="text/javascript" src="HttpCombiner.ashx?s=scripts&t=text/javascript&v=1"></script>


Algo parecido ocurriría con las hojas de estilo:


<link type="text/css" rel="stylesheet" href="HttpCombiner.ashx?s=css&t=text/css&v=1"></link>


Para ello usaremos un fichero de configuración (web.config) que será similar a este:


<appSettings>
  <add key="scripts" value="js/jquery.js, js/jDate.js, js/jQuery.Core.js, js/jQuery.Delegate.js, js/jQuery.Validation.js">
  <add key="css" value="css/Theme.css, css/Common.css, css/grid.css">
</appSettings>


COMBINAR IMÁGENES O ICONOS EN CSS SPRITES
Categoría: Conectividad, CSS, Imágenes

En muchas ocasiones los sitios web tienen pequeños iconos que se van repitiendo a lo largo de las distintas páginas. Esta cantidad de iconos puede producir el efecto de un exceso de peticiones y, por ello, un número elevado de conexiones inútiles.

Como la tecnología lo permite, una buena solución es la de integrar varias imágenes en una imagen única. Esta imagen, que suele ser un PNG8, contiene una cantidad de imágenes pequeñas suficiente para no tener un tamaño excesivo y con una única imagen poder gestionar todos los elementos desde el CSS.

Este sistema, conocido como CSS Sprites permite que carguemos una única URL (que se usará en distintas zonas de la página) de forma rápida y con una única petición HTTP.

Para gestionar las imágenes, podemos hacer uso de códigos similares a los siguientes:


#nav li a {background-image:url('imagen.png')}
#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -72px;}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}


INCLUIR IMÁGENES EN HTML O CSS CON EL MÉTODO “DATA:”
Categoría: Conectividad, Contenidos, CSS, Imágenes

Siguiendo el mismo sistema que los CSS Sprites, podemos plantearnos que también son algo inefectivos en aquellos casos en los que estos pequeños iconos se utilicen de forma muy concreta. En esos momentos casi se puede considerar que incluir la imagen directamente en el código fuente del HTML sería más rápido.

El caso del data: URL scheme viene a resolver esta situación, y es que en 1998 ya se planteó este estándar que no cumplen todos los navegadores, por lo que deberemos probar en cada caso.

La idea es incluir en el propio código el elemento en sí, codificado en Base64 que hará que no tengamos que realizar peticiones externas sino que va incorporado en el propio código fuente, ya sea del HTML como del CSS.

El funcionamiento de este elemento sería algo tal que así:


data:[<mediatype>][;base64],<data>


El primero de los elementos <mediatype> corresponde con el MIME Type del contenido a mostrar (por ejemplo un image/png). Al final, en codificación Base64 irá el contenido. Quedaría algo parecido a esto::


<img src=”data:image/png;base64, iVw0SUhE...bP7WlFSCC” alt=”logo”>


Lo interesante es que se puede utilizar dentro de los CSS, por lo que las imágenes pasarían a formar parte de un CSS de un tamaño mayor y reduciendo la cantidad de peticiones.

USO DE GET EN PETICIONES AJAX
Categoría: Conectividad

El funcionamiento del HTTP es bastante complejo y permite trabajar de muchas maneras en la comunicación entre el cliente-servidor.

El funcionamiento del sistema POST se divide en dos partes: la primera en la que se mandan los encabezados y, una vez se haya llevado a cabo esto, se manda la información. Además, algunos navegadores sólo permiten un tamaño limitado de información que puede ser menor a los 2 Kilobytes.

Por esta razón se recomienda el uso del sistema GET, ya que con una única petición se envía y recibe toda la información. Además, según el RFC2616, el uso de GET está semánticamente diseñado para la recuperación de información, que es lo que habitualmente se suele querer con el uso de AJAX.

USO DE JSON EN PETICIONES AJAX
Categoría: Conectividad

Las peticiones en AJAX pueden enviar y recibir cualquier tipo de información, pero debido a la forma de trabajar de los distintos motores JavaScript por parte de los navegadores, la mejor forma de enviar y recibir información es mediante JSON.

Lo interesante de JSON (JavaScript Object Notation) es que es mucho más sencillo a la hora de analizar que XML, y mucho más sencillo de utilizar cuando hay un intercambio de datos fluido entre el cliente y servidor.