Durante la etapa de implementación probamos por primera vez una serie de técnicas dirigidas a mejorar la rapidez de carga y despliegue de los contenidos en los navegadores de nuestros usuarios. Viendo los buenos resultados obtenidos continuamos aplicando modificaciones durante los primeros días al aire, consiguiendo ligeras mejoras que se fueron sumando. El resultado obtenido hasta el momento es objetivamente cuantificable y nos sitúa muy por encima de nuestra competencia.
Cuando un equipo técnico se propone mejorar la velocidad de carga de un sitio web lo habitual es que sus miradas se dirijan a los recursos asignados a sus servidores (hardware, software, ancho de banda,...). En chilevision.cl no éramos una excepción hasta que navegando por el canal tecnológico que tiene Google en Youtube, Google Tech Talks Channel, di con un video en el que el Exceptional Performance Team de Yahoo! exponía al personal de Google una serie de reglas y técnicas que ellos seguían para mejorar los tiempos de carga de sus páginas. Es cierto: ¡un equipo de Yahoo! explicando sus técnicas de mejora de rendimiento en las instalaciones de Google!.
Este equipo lleva trabajando en Yahoo! desde el año 2004 analizando y cuantificando el perfomance de sus aplicaciones web. En sus análilis han identificado que el tiempo que toma una página web en desplegarse en el navegador de un usuario está distribuido entre un 5% en el lado del servidor (backend) y un 95% en el lado del cliente (frontend). Este sorprendente resultado deja claro que los esfuerzos en mejorar el performance deben dirigirse al frontend, todo lo contrario de lo que habíamos estado haciendo hasta la fecha.
Trabajar en la mejora del backend es costoso en tiempo y recursos. Los resultados son complejos de analizar. Las técnicas a seguir dependen de la tecnología que se esté utilizando. La información deducida en los análisis no es extrapolable a otras infraestrucutras. Y resulta que los resultados obtenidos sólo afectan a un 5% del rendimiento.
Todo lo contrario sucede cuando se trabaja en la mejora del frontend.
- Es barato: los cambios a aplicar se realizan con los recursos ya existentes. Son sencillos y se pueden plantear desde el inicio de un proyecto sin que retrasen su desarrollo
- Los resultados obtenidos se pueden extrapolar a cualquier otro proyecto web. Yahoo ha publicado sus resultados en forma de 34 reglas a seguir agrupadas en 7 categorías
- Las mejoras son cuantificables con la herramienta YSlow, un plugin para el navegador Firefox que evalúa el perfomance de cualquier sitio web asignándole una puntuación entre 0 y 100 en función del cumplimiento de las reglas mencionadas anteriormente
Cuando comenzamos las pruebas internas de la nueva portada la calificación obtenida por YSlow era de 38 puntos. En ese momento ya estábamos utilizando algunas de las reglas: contábamos con un dominio dedicado a los elementos estáticos, habíamos utilizado imágenes sprite para todos los fondos, una parte de nuestros archivos JavaScript se cargaban al final de la página y nuestros css estaban correctamente desarrollados.
Proseguimos aplicando reglas, unificando y minimizando archivos JavaScript, llegando hasta una puntuación de 49. Finalmente comprimimos los archivos ASCII y aplicamos técnicas de caché a los archivos JavaScript, llegando hasta la puntuación actual de 58 puntos.
Aún nos encontramos lejos de los 96 puntos que marca la portada de Yahoo!, pero nos encontramos por encima de competidores directos como canal13.cl (38), beta.canal13.cl (35), tvn.cl (33), emol.com (34), latercera.com(33) y terra.cl(28).
Nos queda camino por recorrer en busca de los 100 puntos y espero informar a medida que obtengamos mejoras en la puntuación. Pero sin olvidar que a finales del año 2008 alcanzamos el millón de visitantes únicos mensuales y nuestro objetivo es superarlo ampliamente, por lo que el trabajo de mejora en nuestros servidores es, además de estimulante y desafiante, algo imprescindible en nuestro desarrollo. Seguro que escribiré sobre ello.
