Copa Mundial de la FIFA Brasil 2014

El eslogan “UNITED BY TEAM, DRIVEN BY PASSION” utilizado por la selección de EEUU durante el recién terminado mundial de fútbol, bien podría aplicarse al equipo de medios digitales de Canal 13 que trabajó en la plataforma web desarrollada para cubrir dicho evento.

Como miembro de ese equipo, fue mi responsabilidad la dirección, ejecución y control global de:

Sitio web

Plataforma tecnológica para la distribución de los contenidos on demand. Desarrollada sobre el CMS Drupal7, se le dotó de una interfaz de usuario adaptada a su dispositivo. Esta adaptación se realizó en dos niveles:

• Nivel 1: Detección de la familia del dispositivo en nuestra cache Varnish y entrega de contenidos desde el origen específico para cada una de ellas: escritorio, tablet y mobile 
• Nivel 2: Técnicas de responsive design para adaptar el despliegue gráfico a cada equipo particular, dentro de su correspondiente familia

Live streaming

Transmisión en vivo de los 64 partidos del mundial, con bitrate adaptativo y perfiles multidispositivo. Dos equipos Elemental (primario y backup) se encargaron del enconding, produciendo streams bajo protocolos HLS y RTSP. La distribución la realizamos a través de dos CDN: GrupoZ y Akamai. Para la reproducción de las señales, dos simultáneas en varios días del torneo, utilizamos dos tipos de players:

• HTML video players: Flowplayer y Grind, con plugin HLS Provider 
• App para dispositivos móviles iOS y Android 

Junto a nuestra transmisión oficial, los usuarios pudieron disfrutar durante los partidos de una experiencia multicámara compuesta por 6 streams: uno general, otro táctico y los cuatro restantes dirigidos a destacar detalles de los dos equipos en juego. Este desarrollo se realizó en coordinación directa con la FIFA, siguiendo todos sus estándares de calidad (bitrate hasta 3.8mbps) y seguridad (protección de streams mediante token de sesión y protocolo pHLS).

Caché web y geobloqueo

Para mejorar los tiempos de respuesta de nuestro sitio web, soportar sin sobresaltos los peaks de tráfico esperados y cumplir con los requisitos de geobloqueo impuestos por FIFA, implementamos los servicios provistos por la empresa Akamai. Como se detalló anteriormente, era necesaria la detección de dispositivos, por lo que el servicio de caché web de Akamai también contó con la tecnología necesaria para ello.

Data center de respaldo

Como medida de protección extraordinaria, decidimos replicar la plataforma 13.cl en la nube de Gigas y sincronizar sus datos en tiempo real. En caso de que algún hecho catastrófico dejase fuera de servicio nuestras instalaciones en Santiago, el sistema de failover de Akamai activaría la carga de contenidos de la caché desde esta infraestructura de respaldo.

En pocas ocasiones habíamos tenido la oportunidad de contar con tiempo extra para planificar un desarrollo. Aprovechamos ese tiempo para que en su definición participáramos todas las áreas relacionadas. Estos factores, unidos a la envergadura del evento, nos transformaron en un grupo humano motivado que se involucró al 100% en sus tareas. Y como suele ocurrir, el trabajo vino acompañado de los buenos resultados los que, de paso, me ayudaron a quitar las telarañas a mi blog y publicar este post. Algunos datos para cerrar:

• Más de un millón de navegadores únicos accedieron al sitio web por contenidos on demand. 
• Cerca de 4 millones de visitas siguieron el streaming online a lo largo del evento. 
• Alcanzamos un peak de concurrencia en transmisiones en vivo de 135.000 dispositivos simultáneamente conectados, récord absoluto en Chile y Sudamerica (estadísticas entregadas por operador)

Incremento en el performance de la nueva portada de chilevision.cl

A primeros de marzo publicamos la nueva portada del sitio web chilevision.cl. Aprovechamos los meses de verano para hacer un trabajo intenso en el nuevo diseño cuyo resultado está a la vista.

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.