Optimización: Reducir peticiones HTTP

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 loading="lazy" src="empresa.gif" width="59" height="20" alt="Empresa" /></a>
<a href="productos.php"><img loading="lazy" src="productos.gif" width="59" height="20" alt="Productos" /></a>
<a href="servicios.php"><img loading="lazy" src="servicios.gif" width="59" height="20" alt="Servicios" /></a>
<a href="contacto.php"><img loading="lazy" 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 loading="lazy" 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 loading="lazy" 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 loading="lazy" 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:

Comentarios Total 11 comentarios

Activania
Publicado: 26/01/2010 8:26 am

Mis felicitaciones por tu blog, tienes artículos muy buenos y realmente interesantes. Ya estás agregado a mis favoritos !

Saludos.


[…] This post was mentioned on Twitter by Andrés Nieto, Esteban Sáiz, Rubén González, Rubén González, ovalus and others. ovalus said: RT @aNieto2k: Despues de leer (http://bit.ly/6QX4pp) sobre reducir peticiones HTTP hice una prueba (http://bit.ly/5F5aOU) y el resultado me ha sorprendido […]

Nicolas
Publicado: 26/01/2010 1:17 pm

Otra posible forma de optimizar nuestro sitio a través de css es utilizando distintas hojas e importándolas:

@import url(‘a.css’);
@import url(‘b.css’);

via: anieto2k

Metal
Publicado: 26/01/2010 4:13 pm

Pero no entiendo, no es mejor dividir en pequeños pedazos las imágenes para que se descarguen mas rápido???

Jawira Portugal Michaux
Publicado: 26/01/2010 4:41 pm

@Nicolas creo que estás equivocado, eso no disminuiría el número de peticiones ya es que el navegador primero cargará el archivo a.css y luego el b.css de forma separada, y eso es exacatamente lo que pasa cuando usas la etiqueta para cargar hojas de estilo.
Por otro lado el uso de CSS Sprites me pareció interesante, pero lo de las Imágenes Inline no me lo sabía, estuvo excelente.

Jawira Portugal Michaux
Publicado: 29/01/2010 7:53 am

Revisando mis feeds encontré que se puede utilizar la técnica de las Imágenes Inline con CSS.
Les dejo el enlace: http://sentidoweb.com/2010/01/18/cssembed-incrustar-imagenes-en-tus-css.php
El único problema es que no funciona bien en IE8.

Pepe
Publicado: 09/02/2010 1:25 am

Hola, muy buenos consejos.

Me podrías recomendar algún lugar para ampliar un poco mas sobre los mapas de imágenes.

En particular, la forma en la que se puede calcular las coordenadas.

Saludos.

Pepe
Publicado: 02/05/2010 12:52 pm

Lo que mas suele ralentizar una web son las imágenes pesadas. Por eso es muy importante optimizar imágenes para web. Además esto ahorra ancho de banda y dinero.

cubasdc
Publicado: 23/11/2011 12:50 pm

cunado hago un include en php, también es necesario evitar peticiones http ??

por ejemplo
include(«cabecera.php»);
es igual a:
include(«http://miweb.com/cabecera.php»); ?????

Genaro
Publicado: 11/11/2012 6:07 pm

Siempre me eh preguntado por que no existe (o almenos yo desconozco) una funcion o librieria en php que se encargue de comprimir todos nuestros css y todos nuestros js, esa funcionalidad la eh visto en drupal y esta muy buena. pero para php solito no la encuentro y la eh buscado por cielo mar y tierra.
Tienes idea si existe algo ya asi?

Estela Silva
Publicado: 15/11/2013 6:56 am

otro aspecto a vigilar para mejorar la carga de una pagina web es que las imágenes cuenten con la etiqueta Alt y que sus dimensiones estén definidas. (ancho y alto) esta es una de las directrices de Google.

Les invito a utilizar la herramienta seo imagen

herramienta seo imagen

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)