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:
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:
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
© 2006 – 2009 unijimpe – Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.
Related posts:
- Optimización: Agregar Headers de Expiración Los Header de expiración son utilizados para indicar cuando expira...
- Optimización: Utilizar compresión Gzip Para optimizar la carga de una página web es necesario...
- Optimizar Carga de Paginas Web La optimización de los sitios web es un punto muy...
- Facelift: Reemplaza texto por imagenes Facelift es una librería PHP/Javascript que permite reemplazar dinámicamente textos...
- HTTP Redirect Viewer HTTP Redirect Viewer es un herramienta que te permitirá visualizar...
Related posts brought to you by Yet Another Related Posts Plugin.