el 33

Optimiza la carga de tu sitio web

Un estudio de Yahoo revela que en los sitios web más populares el tiempo de carga total de una página viene condicionado por un 20% del lado del servidor y un 80% del cliente. Esto no quiere decir que dejemos de optimizar el servidor, pero sí que tengamos en cuenta consejos o buenas prácticas para que tu sitio web cargue más rápido.

El tiempo de respuesta de una página es muy importante de cara al usuario, no suelen tener mucha paciencia ( yo tampoco… ), por lo que la primera carga se debe tener muy en cuenta (sin ningun elemento cacheado en el navegador) . En Yahoo han creado una serie de pautas para que tengamos en cuenta a la hora de analizar el rendimiento de nuestro sitio:

Han añadido muchos consejos más que podéis ver en la página
para desarrolladores de Yahoo, me acuerdo que hace poco sólo estaban éstas 13 y ahora ya van sobre las 40. Cito sólo éstas, porque existe una extensión para Firefox en la que comprueban las trece pautas puntuándolas y con la teoría necesaria para poder solucionarlas. Se llama YSlow y la derecha podéis ver una captura evaluando mi sitio web, parece que no tengo muy buena puntación…

Ésta extensión se basa en FireBug, para los que no la conozcan es una extensión impresionante que te ayuda a depurar tu sitio web. Puedes controlar el HTML y CSS en tiempo real, analizar las peticiones que se realizan e incorpora un completo debugger de JavaScript.

Una de las prácticas importantes es reducir las peticiones HTTP, los navegadores sólo aceptan dos peticiones concurrentes del mismo dominio, por lo que a mayor número de archivos mayor número de peticiones y por consecuencia, mayor tiempo de carga.

Sitios web con mucho tráfico como Google y Yahoo reducen el número de peticiones HTTP para los iconos, botonos, pequeñas imágenes con una técnica basada en la propiedad de CSS background-image y background-position, en la que combinan las imágenes en una para después mostrar sólo el segmento adecuado.

En un principio no había encontrado una aplicación web en la que subier mis imágenes a combinar y me devolviera las propiedades CSS necesarias para cada imagen. Ya me había apuntado contento otra cosilla a hacer en mi libreta, para aprender un poco de la librería para gráficos GD de PHP. Pero me resultaba un poco raro que no lo hubiera hecho nadie por lo que buscando un poco más, me he encontrado con que un desarrollador de Yahoo ya la había implementado. La verdad es que la aplicación funciona muy bien, y está disponible hasta el código fuente, otra vez será ; )