Mejora la velocidad de carga de tus páginas web

Minimiza las peticiones HTTP de tu sitio web

El 80% del tiempo de respuesta de un sitio web depende del front-end. La mayoría de dicho tiempo lo consume la carga de todos los componentes de la página: imágenes, hojas de estilo, scripts, flash, etc. Reduciendo el número de componentes se reduce el número de peticiones HTTP para visualizar la página. Esta es la clave para obtener una web más rápida.

Un método de reducir el número de componentes en la página es simplificar el diseño de la misma. Pero… ¿hay alguna forma de crear páginas ricas en contenido que además consigan tiempos de respuesta más rápidos? Sí. Te indicamos algunas técnicas para reducir el número de consultas HTTP que soportan diseños ricos en contenidos:

  • Unir ficheros. Un modo de reducir el número de peticiones es combinar todos los scripts en un único fichero, y del mismo modo, combinar todos los CSS en un único archivo de estilos. Realmente es complicado cuando tus estilos y scripts cambian de una página a otra, pero siguiendo esta premisa se consigue mejorar el tiempo de respuesta.
  • CSS Sprites. Es el método preferido para reducir el número de peticiones de imágenes. Combina tus imágenes en un único archivo de imágenes y utiliza las propiedades del CSS background-image y background-position para mostrar el segmento de imagen deseado.
  • Mapa de imágenes. Combina múltiples imágenes en un único archivo de imagen. El tamaño final es aproximadamente el mismo, pero se reduce el número de peticiones HTTP. Este método sólo funciona si las imágenes están contiguas en la página (por ejemplo, en una barra de navegación). Definir las coordenadas de un mapa de imágenes es tedioso y lleva a errores. No se recomienda utilizar para la navegación de la página.
  • Imágenes "Inline". Utiliza el método "data: URL scheme" para embeber la imagen en la página actual. Esto puede incrementar el tamaño del documento HTML. Combinar imágenes en las hojas de estilo es una forma de reducir las peticiones HTTP evitando que el tamaño de la página aumente. Este tipo de imágenes no son todavía soportadas por los principales navegadores.

Empieza reduciendo el número de peticiones HTTP de tu página. Este es el principal punto para mejorar la experiencia de usuario de las personas que visiten tu página por primera vez.

Fuente: http://developer.yahoo.com/performance/rules.html#num_http