Primer capítulo de la serie “Reducir el tiempo de carga Web” con el que pretendemos mostrar el camino de cara a mejorar la velocidad de carga de nuestras web, reduciendo así el tiempo de espera del usuario que tanto valor tiene a día de hoy. En esta ocasión revisaremos conceptos básicos relacionados con las peticiones http… ¡No os lo perdáis!
Autor: Adrián Mato
Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.Este tutorial forma parte de una serie
- Ir a la 1ª Parte – Minimiza las Peticiones HTTP
- Ir a la 2ª Parte – Seleccionando el Formato de Imagen
- Ir a la 3ª Parte – Optimizando imágenes GIF
- Ir a la 4ª Parte – Optimizando imágenes JPEG
- Ir a la 5ª Parte – Optimizando imágenes PNG
¿Por qué deben importarnos las Peticiones HTTP?
Echando un vistazo a algunos artículos interesantes acerca de la optimización del Front-End, podemos conocer datos tan aplastantes como que el 80% del tiempo que tarda en cargar una página se debe al tiempo de descarga de componentes del Front-End.
Por otra parte, Tenni Theurer comenta en su blog que entre un 40% y un 60% de los visitantes de un sitio web tienen su cache vacía, por lo que cobra todavía mas relevancia el tiempo de respuesta en la parte del Front-End.
Cuando hablamos de Front-End nos estamos refiriendo a la parte de la web que interactúa con el usuario, principalmente: javascript, css, imágenes, flash… etc. Supone un 80% del tiempo de carga de una web.
Si el 80% del tiempo de carga de nuestro sitio web se debe principalmente a los siguientes componentes:
- Javascript
- CSS
- Imágenes
- Flash
Reducir en número todos estos componentes hará que el renderizado de nuestra página sea más ágil y que el número de peticiones HTTP disminuyan, por lo que nuestra web cargará mucho más rápido.
De buenas a primeras podemos pensar que simplificando nuestros diseños web podremos ahorrar en número de peticiones HTTP, pero en realidad necesitamos encontrar un equilibrio entre optimización y diseño.
¡Veamos algunas prácticas recomendadas para tratar de reducirlas!
Reduciendo las Peticiones HTTP
Partimos de la base de que no queremos sacrificar nuestro diseño original, sino que queremos encontrar el equilibrio entre el diseño y la velocidad de carga para ello es recomendable seguir los siguientes consejos que describimos a continuación.
Aplicando la técnica de CSS Sprites
El uso de CSS Sprites es la mejor forma de reducir el número de peticiones de imágenes. En la mayoría de nuestros diseños y maquetaciones empleamos a menudo la propiedad de CSS background-image.
Por ejemplo, si tenemos 5 divisiones en las que se le está aplicando 5 imágenes de fondo distintas mediante background-image, tenemos un total de 5 peticiones de imágenes. En muchos casos podemos simplificar esas 5 imágenes en una única imagen, por tanto reduciremos el número de peticiones de 5 a 1.
¿Cómo conseguirlo? Quizás os venga bien este tutorial sobre CSS Sprites que hemos publicado hace relativamente poco tiempo.
Combinando archivos CSS
Combinar archivos CSS es otra práctica recomendada. En algunos casos podemos tener más de un archivo CSS, encontrando la forma de juntar todo el código CSS en un único archivo hará que todo sea más rápido.
Si por ejemplo tenemos varios archivos CSS pequeños, será mucho más óptimo juntarlos todos en un único y más grande archivo CSS porque una vez cargue estará en cache para futuras visitas / sesiones, evitando cargar varios pequeños archivos de CSS según la sección en la que nos encontremos.
Combinando archivos de script
Combinar archivos de script es otra buena práctica que podemos aplicar. En algunos casos es más complicado implementar varios archivos de script en un único archivo, pero como hemos dicho es importante, el tiempo que nos ahorra puede ser considerable y es la mejor forma de optimizar tus páginas.
Recuerda que puedes / debes minimizar todos tus scripts para conseguir archivos de menos peso, en algunos casos estamos hablando de un 50% menos de espacio en disco, lo cual es muchísimo como para no tenerlo en cuenta.
Recomendación de última hora: YSlow
Para los más curiosos os aconsejo que instaléis en vuestro firefox la extensión para el plugin Firebug YSlow de Yahoo. Con YSlow podréis comprobar y comparar tiempos de carga de vuestra web, ver dónde está flojeando vuestra optimización, consejos para mejorarla… etc.
Gracias a Javier Santana por el chivatazo, yo la verdad es que la uso a menudo, pero se me había pasado por alto y lo veo altamente recomendable. Seguramente trataremos esta y otras herramientas en alguno de los próximos capítulos, pero es algo por lo que empezar.
Conclusión final
¡Esto es todo para esta primera entrega! Recordad que reducir el número de peticiones HTTP es el primer paso en el proceso de optimización, especialmente para nuevos visitantes que tienen que cargar en cache todo el Front-End de nuestra página web.
En la siguiente entrega trataremos de analizar los distintos tipos de imágenes para saber qué utilizar en cada caso para posteriormente recomendar distintas técnicas para la reducción de las mismas.
¡Nos vemos en la próxima publicación!
Te sugerimos otras entradas relacionadas...
¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!
Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.
Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.
Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.
Comentarios en esta publicación (15 comentarios)
¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.