Asi que ya terminaste el sitio web… comprimiste todos los CSS y JS, escribiste el HTML de forma semántica, usaste sprites para las imágenes, agregaste las reglas en .htaccess, optimizaste las consultas a la DB, tienes un “A” sobresaliente en Yslow y Page Speed, todo es perfecto… justo cuando en ese momento viene el departamento de marketing y/o jefe directo y te dice:

Necesitamos agregar banners en la página (varios) También incorporar el tracking de visitas… y medir cómo estan funcionando nuestras campañas online

Nosotros, cumplimos ordenes, pero vaya sorpresa que al probar de nuevo el sitio, el “A” sobresaliente pasa a ser un “D” rotundo:

• La página aumentó en tamaño un 30% debido a los banners SWFs
• Observamos una subida en la cantidad de peticiones a servidores externos (llamados a distintos JS de tracking)
• A su vez estos scripts, resultan ser bloqueantes, por lo cual el tiempo de carga y renderizado también aumenta

Vemos (¿con un poco de impotencia?) como el trabajo que realizamos en optimización ya no se ve tan reflejado (y ni hablar cuando alguien dice – La página tarda mucho en cargar…–)

Ante esta situación no tenemos muchas alternativas, pero aquí van un par de consejos:

• No sugerir opiniones extremistas como - Debemos sacar toda la publicidad -, la web de algún lado tiene que mantenerse (monetariamente): Si no hay dinero, no hay página y si no hay página, no hay trabajo!
• De la misma forma, debemos hacer entender que una sobrecarga de publicidad perjudica la experiencia del usuario, lo mejor es buscar un balance, ya que puede ocurrir que el usuario ingrese menos seguido al sitio o comience a bloquear la publicidad, y si se reducen las visitas, hay menos clicks.
• Sugerir un peso máximo para los banners, pero por sobretodo que se respeten. Los banners por lo general son SWFs y alguién que haya trabajado con Flash conoce (o deberia conocer) técnicas para bajar el peso de los archivos (utilizar imágenes vectoriales, optimizar el código AS, disminuir el uso de imágenes de mapa de bits, etc). En la web de IAB existe una tabla con pesos sugeridos para los distintos tamaños.
• Si se está contratando un servicio de adserver, verificar que se está utilizando la última versión del JS que inserta los banners. De igual manera, si se usa un adserver interno, ya que entre versiones puede cambiar drasticamente la velocidad de inserción.
• Si finalmente se va a mostra publicidad de forma severa, podemos optar por alguna alternativa no convencional, por ejemplo, existe un plugin para jQuery que permite mostrar/cargar los banners solamente cuando se encuentran en el viewport del usuario: jQuery LazyLoad Ad. Si van a implementar esta solución, les tengo tres palabras: Testing, testing y testing. Esten seguros que todo funciona de forma correcta y no existen conflictos: una baja en las estadísticas de visualización y clicks se va a notar enseguida (y la furia caerá sobre nosotros).
• Con respecto al tracking de Google Analitycs, es de los más optimizados (sobre todo con la versión asíncrona). También hace un tiempo habia leido sobre cómo servir los JS de GA de forma local, no sé si existirá una mejora considerable pero se podria tener en cuenta.
• Tal vez una solución íntegra puede ser utilizar Gatling Analytics, (también) un plugin para jQuery que permite a través de su API, centralizar las llamadas a diferentes sistemas de tracking (GA, Chartbeat, Bing, Facebook) y hacerlas de forma asincrónica. No tuve oportunidad de probarlo, pero suena interesante y como decia antes, realizar testing.

¿Algún consejo más? ¿Alguna experiencia similar? ¿Otra solución que no dependa de jQuery? Puedes sugerirlo a travéz de Twitter!