Posicionamiento en buscadores - Tiempo de carga de una pagina web

Esta es un área muy técnica que debe ser atendida con mucha paciencia por parte del desarrollador, pero cada vez vale más la pena tomarla en cuenta porque según el nuevo motor de google llamado Caffeine este es uno de los factores más importantes al momento de posicionar la pagina en el buscador.

Hay miles de factores que perjudican el tiempo de visualización promedio de una página web: Que tan pesadas son las imágenes y recursos, la cantidad de peticiones que hace la pagina, la cantidad de scripts externos que se importan, la velocidad del servidor, la presencia de consultas a la BD muy pesadas, etc.

Podríamos estar todo el día nombrando cosas, pero como hay muchos artículos que hablan sobre optimización de consultas SQL, hosting de servidores, etc. Yo les voy a mencionar solo algunos tips que no parecen tan obvios, pero pueden ayudar bastante a disminuir el tiempo de carga de tu página.

• Bajar el tamaño y calidad de todas tus imágenes de la pagina (Y utilizar la menor cantidad posible).
• Comprimir códigos CSS y Javascript: Comprimir los códigos tiene como inmediata consecuencia lógica que pesen muchísimo menos, y por lo tanto que sean mucho mas rápidos de descargar. Para hacer esto hay un programa muy recomendado llamado YUI Compresor, este programa con un algoritmo logra eliminar todos los espacios en blanco, códigos que sobran, etc. De una página web.
• Unificar tus imágenes en una sola: Una de las metas para hacer más veloz la carga de tu pagina es reducir el número de request que se hacen antes de cargarla o justo al momento de cargarla, si uno tiene 5 imágenes diferentes en una misma página web, es posible unificarlas en una sola imágenes y hacer 5 request a la misma imagen, entonces, como el navegador tiene memoria cache, en realidad solo pide la imagen al servidor la primera vez y de ahí en adelante la carga directamente desde la cache. Para poder poner todo en una sola imagen, deben recorrer la imagen con una propiedad llamada backround-position: 0px 0px; (Primero el movimiento de la posición en X y luego en Y). Por ejemplo ,a siguiente imagen de la figura 1:

Figura 1

Tiene 12 imágenes azules diferentes, donde cada una explica algún punto de la herramienta http://www.tucondominio.com.

Para optimizar esto debemos realizar una sola imagen que vamos recorriendo con el backgroundposition y se le pone el width y height necesario para que la imagen deseada se vea correctamente.

Figura 2

El codigo css para lograr una pagina web como la mostrada en la figura 2 es el siguiente:

.functionTitle{ font-size: 16px;font-weight: bold; padding: 0; margin: 0px;}
#content{ position: relative;display: block;}
#content ul{padding: 0; margin: 0;}
#content li{display: inline-table;width: 350px; margin: 0;margin-left: 50px;padding: 0; font-size: 12px;}
div#calendario{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 0px 0px;height: 80px; margin-right: 30px;}
div#balances{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 0px;height: 80px; margin-right: 30px;}
div#votaciones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 182px 0px; height: 80px;margin-right: 30px;}
div#peticiones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 243px 0px; height: 80px;margin-right: 30px;}
div#servicios{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 90px; height: 80px;margin-right: 30px;}
div#condominio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 182px 90px;height: 80px;margin-right: 30px;}
div#reglamentos{position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 243px 90px;height: 80px;margin-right: 30px;}
div#edificio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: -60px 0px; height: 80px;margin-right: 30px;}
div#espacios
{position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 1px -80px; height: 80px;margin-right: 30px;}
div#cartelera
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: -60px -80px;height: 80px;margin-right: 30px;}
div#asociacion
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px; background-position: 121px 88px;height: 80px;margin-right: 30px;}
div#perfil{ position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 121px 0px; height: 80px;margin-right: 30px;}
h2{ color: #F0BC60; font-size: 20px;text-transform: uppercase;
background: url(../../images/tucondominio/imagenes-contacto.png) no-repeat; background-position: 0px 18px;}

• Carga lazy-load de imagenes con JQuery: Jquery es una librería o framework para Javascript que permite programar funcionalidades geniales con unas pocas líneas de código, uno de los “plugins” o componentes que se han desarrollado hasta el momento es llamado laztload. Este plugin permite cargar solo las imágenes de una página web que están siendo visualizadas por el navegador, es decir, si la pagina es muy larga y tiene imágenes por todo el sitio, entonces este plugin no cargará las imágenes si no haz llegado a esa parte de la pagina (haciendo scroll). Esto reduce los tiempos de carga por aunque no haz cargado muchas imágenes, google Jura que ya la pagina termino de visualizarse y lo da por terminado. El mejor ejemplo de lazyload lo consigues en la página web http://www.mashable.com

Para revisar el tiempo de caga de una web les recomiento esta herramienta gratuita.