Cuando un visitante entra en tu página, es necesario cargar todos los elementos de la misma (por ejemplo, imágenes y scripts) y para ello hay que buscarlos. Cuantas más peticiones haya de este tipo más lenta cargará la página.
Para reducir el número de peticiones HTTP lo primero es reducir el número de objetos o elementos que se cargan de la misma. Por ejemplo, una de estas técnicas es combinar varias imágenes en una sola, también llamados Sprites CSS.
SPRITES CSS
La técnica de sprites CSS consiste en generar una imagen que contenga todas las pequeñas imágenes que usemos en nuestra web y luego al dibujar en la pantalla mediante CSS se selecciona sólo una región de la imagen. Con esta técnica se reduce el número de peticiones, por lo que mejoraremos la velocidad de carga de nuestras páginas.
Crear esta única imagen puede ser una tarea algo tediosa por lo que existen en Internet multitud de herramientas que automatizan el proceso:
CSS Sprites Generator
SmartSprites
También podemos encontrar scripts similares para instalarlos en nuestra propia máquina como puede ser CSS Sprite Generator de Project Fondue
FORMATO DE IMÁGENES
Aparte de optimizar las imágenes, debes saber que formato usar dependiendo de dicha imagen. Debes usar los formatos: GIF, PNG y JPEG, dependiendo del tipo de la imagen y del tamaño.
- JPEG: Este formato es el más usado. Fue creado para fotógrafos y personas que realizan “art-work”. Las imágenes JPEG deben ser utilizadas con fotos y con imágenes que tengan gran cantidad de colores. Si estás pensando en reducir un archivo JPEG, deberías reducirlo hasta un 50%, para que puedes tener un buen resultado.
- GIF: Este tipo de formato es el más conocido en la historia de Internet, debido a que es para archivos pequeños. JPEG soporta muchísimos colores, mientras que el formato GIF sólo integra un máximo de 256 colores. Debes usar este formato para realizar logos, botones y cualquier imagen con pocos colores. GIF es el más usado para imágenes animadas.
- PNG: Fue creado especificamente para Internet, con el objetivo de reemplazar las imágenes en formato GIF.
La diferencia entre los formatos GIF y PNG, es que PNG soporta 24-bit (colores) y la transparencia alpha. El formato PNG debe ser usado para imágenes simples que requieran más de 256 colores.
USA LAS DIMENSIONES DE LAS IMÁGENES
Cuando usas imágenes o tablas en las páginas de tu Web, siempre deberías incluir las dimensiones, el ancho y largo de la imagen. Si no las pones, el sistema tendrá que buscar el tamaño de la imagen, para así poder cargarla con el resto del contenido de la página.
HOJAS DE ESTILO CSS
Lo siguiente a comprobar para reducir las peticiones HTTP de nuestra página son las hojas de estilo CSS, y si por ejemplo usamos varias combinarlas en una sola. También conviene revisar nuestro código CSS para hacerlo más compacto, eliminar comentarios, saltos de línea innecesarios, etc… Por último puedes probar con Clean CSS, un optimizador de código CSS.
EMPLEAR EL SLASH (/) EN LOS ENLACES
Cuando un servidor abre un enlace “http://www.dominio.com/about”, nececitará averiguar cual y qué tipo de archivo o página, es la que contiene esa dirección, por lo tanto el proceso de ejecución de la página es más lento. pero si usas los enlaces con un slash (/) al final, como este “http://www.dominio.com/about/”, el servidor web, sabrá inmediatamente que archivo o página contiene ese enlace, reduciendo el tiempo de ejecución de la página.
El uso del slash (/) al final del link no aumentara muchisimo la velocidad de la ejecución de tu página, pero si ayuda a optimizarla!
