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:

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

¿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!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

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.

He leido sobre el tema y ultimamente es mi preocupación en la etapa de optimizacion. Lo que no me queda claro es el proceso de minimizar los archivos .js y .css, es decir agrupar todos los plugins jquery en un solo archivo y ademas minimizarlos, he visto jsmin y mynifi. Conoces alguna otra manera de hacerlo mas facil?

Que tal.. he intentado esto de minimizar los scripts algunas veces con los JavaScript desde el sitio http://www.xmlforasp.net/JSCompressor.aspx pero no se si nos podrias dar ejemplos de cómo lograr esto con archivos CSS y como implementarlos. Gracias muy buen artículo.

A mi me parece muy bien combinar los javascript y los CSS.

Lo que ya me parece un poco “coñazo” es el tema de las imágenes como sprites, para botones y cosas puntuales sí, pero sino paso.

La diferencie entre poner un simple versus el “lío” que hay que hacer para los sprites… la verdad es que paso de hacerlo.

Yo si soy fan de los sprites, me parecen fundamentales.

@josepzin yo creo que hay que tener un término medio y que depende del proyecto pero… cuando hablamos de optimizar para reducir tiempos de carga, los sprites de CSS se notan un montón, y ya no depende de preferencias personales sino de que si te dicen “redúceme por favor el tiempo de carga” no te queda otra :P

Respecto a la minificación o combinación de archivos CSS… yo suelo mezclarlos a mano, si tienes bien claro las clases e IDs que usas a lo largo de la web no hay mayor problema.

Si, claro, si no queda otra hay que optimizar donde se pueda :)

Yo una vez hice una prueba concienzuda con los íconos “sociales” de http://www.retroinvaders.com, y la diferencia en tiempos de carga era MUY apreciable (usando un programa que miden estas cosas, yo no es que notara demasiado), pero hasta que no me llegue la hora de optimizar, la verdad es que paso de complicarme la vida con eso.

Sobre combinar CSS y JS, he visto unas librerías muy monas que se encargan de unirlos en un solo archivo y por lo tanto se genera una sola llamada. Lo bueno del tema es que el trabajo lo hace PHP a petición en el momento, no hay que ponerse a combinar css ni js.

@josepzin.. pues sería bueno que nos compartieras las ligas para ponernos a leer un poco sobre ello ya que sería muy util. gracias.

Os recomiendo YUI Compressor para la compresion de ficheros JS o CSS. Es una herramienta de Yahoo UI y funciona muy bien.

Un saludo a todos!

Otra técnica que se puede usar es convertir las imagenes a base64, recomendable para archivos de muy bajo tamaño que suman tiempo a la carga por las peticiones.

@Pudinet Tu web parece que está reconocida como web atacante por mi firefox… nosé que tendrás por ahí pero revísalo!

Un artículo de lujo si señor :)

Otra de las cosas que podemos hacer es pedir los archivos de librerías comunes desde un servidor externo común, como por ejemplo, jquery del servidor de google.

¿Qué tiene de bueno?
Si un usuario ya ha pasado por otra web que haga lo mismo, no tiene que bajarse tu copia de jQuery (en este ejemplo), por que ya tiene la del servidor de google en caché.

¿Qué tiene de malo?
Dependes de un servidor externo que no está bajo tu control. Si peta google (que suele pasar un par de veces al año, durante algunas horas) tu web deja de funcionar.

Aquí un listado del API de bibliotecas AJAX de Google:

http://code.google.com/intl/es-ES/apis/ajaxlibs/documentation/index.html#jqueryUI

otro consejo que les puedo dar yo es que si usan WP reduscan los PHP Queries de su tema y si quieren hacer pruebas de cuanto tarda su sitio en cargar lo pueden hacer desde aqui http://tools.pingdom.com/

Hola, os aconsejo probar http://www.gtmetrix.com te recomienda lo que debes hacer para optimizar tu página web, incluye también yslow…

Un saludo :)