unijimpe

Una de las primeras reglas para aumentar la velocidad de carga de una web es reducir la cantidad de peticiones HTTP. Recordando lo comentado en Optimizar Carga de Paginas Web el 80% del tiempo se emplea en descargar los componentes de una pagina mientras que solo el 20% en cargar el HTML. Si logramos reducir al máximo la carga de componentes externos lograremos mejorar el rendimiento de nuestro web.

Combinar archivos CSS y JS

Si tenemos una pagina que carga múltiples archivos JS para lograr efectos e interactividad o tal vez utilizamos múltiples archivos CSS (Esto generalmente ocurre al utilizar librerías de terceros que vienen con sus archivos JS y CSS). Podríamos combinar todos los archivos JS y CSS con lo cual podríamos disminuir la cantidad de peticiones HTTP .

Por ejemplo si tenemos una página que carga múltiples archivos Javascript tendríamos un código de la forma:

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/cropper.css" rel="stylesheet" type="text/css" />
<script src="js/prototype.js" type="text/javascript"></script>	
<script src="js/builder.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<script src="js/sound.js" type="text/javascript"></script>
<script src="js/cropper.js" type="text/javascript"></script>

Uniendo todo el contenido CSS en un archivo y el contenido JS en un solo archivo podríamos tener el siguiente código:

<link href="css/cropper-complete.css" rel="stylesheet" type="text/css" />
<script src="js/cropper-complete.js" type="text/javascript"></script>

Utilizar Mapa de Imágenes

Si utilizas varias imágenes como enlaces, una solución es unir las imágenes y utilizar mapa de imágenes para los enlaces, entonces en lugar de cargar una imagen por cada enlace, cargaremos una sola imagen para todos los enlaces y utilizamos un mapa de imágenes. Por ejemplo podríamos tener un menú de la forma:

<a href="home.php"><img src="home.gif" width="59" height="20" alt="Home" /></a>
<a href="empresa.php"><img src="empresa.gif" width="59" height="20" alt="Empresa" /></a>
<a href="productos.php"><img src="productos.gif" width="59" height="20" alt="Productos" /></a>
<a href="servicios.php"><img src="servicios.gif" width="59" height="20" alt="Servicios" /></a>
<a href="contacto.php"><img src="contacto.gif" width="59" height="20" alt="Contacto" /></a>

Uniendo las imágenes y reemplazando los enlaces por un mapa de imágenes se tendría:

<img src="menu.gif" width="295" height="20" usemap="#map" />
<map name="map">
   <area shape="rect" coords="0,0,59,20" href="home.php" title="Home" />
   <area shape="rect" coords="59,0,118,20" href="empresa.php" title="Empresa" />
   <area shape="rect" coords="118,0,177,20" href="productos.php" title="Productos" />
   <area shape="rect" coords="177,0,236,20" href="servicios.php" title="Servicios" />
   <area shape="rect" coords="236,0,295,20" href="contacto.php" title="Contacto" />
</map>

Uso de CSS Sprites

Si utilizamos botones con rollover es típico hacerlo con dos imágenes una para el estado normal y otra para el rollover. Una técnica llamada CSS Sprites consiste en utilizar una sola imagen como fondo que contenga todas las imágenes a utilizar y para hacer el efecto de cambio de imagen se cambia la posición de la imagen de fondo.

Entonces al combinar las imágenes logramos disminuir la cantidad de peticiones HTTP con el consiguiente ahorro en el tiempo de carga. Pueden leer mas acerca de como funcionan los CSS Sprites en CSS Sprites: Image Slicing’s Kiss of Death

Imágenes Inline

Otra forma de disminuir la cantidad de peticiones es incluir las imágenes pequeñas como texto en el HTML, para ello se convierte la imagen en base64 y se incluye como texto. Por ejemplo normalmente incluimos una imagen con el siguiente código:

<img src="boton.gif" width="16" height="16" />

Convirtiendo la imagen en base64 podremos incluir la imagen sin llamar a un archivo externo de la siguiente forma:

<img src="data:image/gif;base64,R0lGODlhEAAQAJEAAAAAAN3d3...XZ" width="16" height="16" />

Donde R0lGODlhEAAQAJEAAAAAAN3d3…XZ texto resumido, resultado de convertir la imagen en texto codificado en base64. Ahora para reemplazar esta imagen tenemos que codificar la imagen, esto lo podemos hacer con la función base64_encode de PHP, entonces el código PHP que imprime la imagen como texto sería:

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("boton.gif")); ?>" width="16" height="16" />

Otra opción para convertir las imágenes en base64 es utilizar un convertidor online como por ejemplo Online Image to Base64 Converter. Hay que tener en cuenta que este método es recomendable para imágenes pequeñas de preferencia en formato GIF y menores a 100KB por que la codificación en base64 incrementa el tamaño del archivo.

Mas Información
Con estos pequeños cambios podemos incrementar la velocidad de carga de nuestra web. No son muy complejos de implementar y además no interfieren con el backend de la página web. Pueden encontrar mas información en:

• Minimize HTTP Requests
• How to reduce the number of HTTP requests
• Tutorial: Creating Image Maps
• CSS Sprites: Image Slicing’s Kiss of Death
• Inline Images with Data URLs

Posts Relacionados

• Optimización: Google Page Speed Online
• Optimizar Carga de Paginas Web
• YSlow plugin para Firebug
• Comprimir archivos Javascript
• Optimización: Utilizar compresión Gzip