Optimiza el tiempo de carga de tu página

¿De qué te sirve tener la mejor página web del mundo si tarda siglos en cargar?


Hombre, no es para tanto... pero es un factor importante, que debemos tener en cuenta.


Puede afectarnos de varias maneras posibles:

• Usabilidad: es lógico que cuando menor sea el tiempo de carga y más ágil la navegación, más agradable serán las visitas para los usuarios.
• Límite de transferencia: Este factor no afecta si tu alojamiento es gratuito, pero seguro que si pagas por él te duele el llegar al límite de transferencia mensual.
• Posicionamiento: En este punto hay opiniones dispares. No está claro si el tiempo de carga afecta al posicionamiento... pero nunca está de más cuidarlo por si acaso.

Estos días he estado investigando en algunos apartados que pueden ayudarnos a reducir el tiempo de carga. Me he centrado en reducir el consumo del CSS y del JavaScript.

En el tema del CSS, lo mejor es seguir el consejo de Andrés Nieto: "Trabaja con un CSS pero publica otro". Cuando tengas tu hoja de estilos funcionando como te guste y este totalmente acabada, comprimela.

Yo he utilizado esta herramienta en línea: CSS Optimizer. Reduce espacios, saltos de linea, información irrelevante... El ratio de compresión depende mucho de la calidad del CSS entrante, pero siempre ganas algo. Es recomendable habilitar la opción Preserve CSS.

En lo que respecta al JavaScript el procedimiento es muy parecido. Yo he eliminado casi todo el código (excepto lo indispensable) que tenía repartido a lo largo de la plantilla y el head y lo he copiado a un sólo archivo *.js para poder ejecutarlo todo de una vez. Así he sustituido pequeños fragmentos de JS por simples llamadas a funciones definidas en el archivo grande.

Si utilizas algún plugin como Lightbox o frameworks como Mootools oJQuery también es recomendable que los traslades a tu archivo.

Una vez hecho esto he utilizado Javascript Compressor para reducir el tamaño. Se come todos los saltos de línea, cambia el nombre a las variables... es decir, hace el código ilegible pero más ligero.

Espero que estos pequeños trucos os sirvan para optimizar vuestra página. Eso sí nunca olvidéis guardar la versión sin comprimir para poder hacer futuras modificaciones.

Para acabar, otro aspecto que podéis tener en cuenta es la carga de vídeos o aplicaciones en flash incrustadas. La solución que tomé yo es la de que no se carguen los vídeos hasta que no se haga click encima de una imagen evitando que cada vez que se carga la página principal se produzcan un montón de conexiones con YouTube.