Uno de las formas de optimizar la carga de una página Web consiste en reducir el número de peticiones HTTP. Esto lo podemos conseguir reduciendo el número de ficheros CSS, JavaScript e imágenes que cargamos en nuestra página.
CSS y JavaScript
Cuando se trata de CSS y JavaScript la opción consiste en unir los ficheros de un mismo tipo en un único fichero y comprimirlos, de esta manera tendríamos un único fichero CSS y un único fichero JavaScript.
En estos casos el problema suele ser combinar el entorno de desarrollo con el de producción. Es decir, durante el desarrollo de la Web es evidente que resulta más sencillo trabajar con varios ficheros que con uno sólo comprimido. El momento de unificarlos y comprimirlos debería realizarse en el momento de instalar la aplicación en producción.
Imagenes
Por tanto, para reducir el número de peticiones sólo nos queda buscar fórmulas para reducir el número de imágenes que utilizamos en nuestra Web. Para ello tenemos 2 opciones.
CSS Sprites
CSS Sprites consiste en combinar varias imágenes en un único fichero. A continuación mediante el uso desde la CSS de la propiedad backgroun-position mostraremos sólo parte de esa imagen.
Pero esta forma de trabajar aunque útil, tiene 2 problemas:
- En algunas ocasiones resulta difícil combinar varias imágenes en una sola.
- Hay que tener en cuenta el tamaño de la imagen. En algunas ocasiones y sobre todo para sprites grandes podemos tener problemas de memoría en el navegador (To Sprite or not Sprite).
Convertir las imágenes a base 64 e incluirlas en la CSS o HTML
Es la técnica que comentaba en mi anterior artículo, Conversión automática de imagenes a Data URis.
En este caso, el problema que tenemos es que no es soportado por todos los navegadores.
Data Uris es soportado en los siguientes navegadores:
- Firefox 2+
- Safari – all versions
- Google Chrome – all versions
- Opera 7.2+
- Internet Explorer 8+
Es decir, no es soportado en nuestros amigos los IE6 e IE7. Aunque para este caso existe la posible opción de utilizar MHTML aunque (yo no lo he probado) parece que no termina de funcionar del todo bien.
Y luego tenemos la limitación de tamaño en el IE8, que no acepta Data Uris de más de 32 Kilobytes.
Bueno, en cualquier caso, las opciones están ahi y la mejor solución dependerá de cada situación particular y supongo que en muchas ocasiones la combinación de ambas técnicas.
Enlaces
Este post es un resumen de un estupendo artículo How To Reduce The Number Of HTTP Requests de Robert Nyman.
En un próximo artículo pasaremos de la teoría a la práctica.
Jbravomontero's Blog 