Correo electrónico instantáneo: cómo hicimos a Hotmail 10 veces más rápido

Recientemente anunciamos una nueva versión de SkyDrive, en la cual SkyDrive se rediseñó desde cero para ofrecer un gran desempeño en navegadores modernos. Al igual que el equipo SkyDrive, también hemos trabajado arduamente para encontrar formas de acelerar Hotmail.

Medimos qué tan rápido se cargan nuestras páginas de Hotmail en todo el mundo y cómo nos comparan con nuestros competidores en un ambiente estandarizado, y después nos enfocamos en los números. En algunos de ellos tuvimos muy buenos resultados, pero en un gran número de acciones la velocidad era muy baja.

Haciendo más rápido a Hotmail

Redujimos contenido en nuestras páginas para acelerar el tiempo de descarga y eliminamos un viaje redondo de la red en el registro para ganar aún más velocidad. Sin embargo, nuestro objetivo era hacer que Hotmail se sintiera instantáneo y sabíamos que acelerar las descargas sólo nos llevaría a la mitad del camino. Incluso con las velocidades de banda ancha de la actualidad, la red es el cuello de botella y necesitábamos evitar que nuestros clientes experimentaran dicha latencia.

El enfoque que decidimos tomar fue acercar los datos del usuario al navegador y, cuando los datos no están disponibles en el navegador, llevarlos ahí de forma más eficiente, sin que lo note el usuario. También decidimos aprovechar navegadores modernos como Internet Explorer 9 para parecernos más a una aplicación, haciendo más trabajo en el navegador y menos en el servidor.

Después, identificamos tres técnicas específicas a seguir: almacenamiento en caché, precarga y operaciones asincrónicas.

Almacenamiento en caché

El antiguo Hotmail solicitaba datos frescos del servidor cada vez que era necesario. Por ejemplo, cuando el usuario se registraba y llegaba a su bandeja de entrada, Hotmail pedía al servidor la lista de mensajes más recientes. Cuando el usuario abría y después cerraba un mensaje, lo hacíamos esperar mientras pedíamos al servidor la nueva lista de mensajes. De forma similar, si el usuario abría el mismo mensaje nuevamente, hacíamos esperar al usuario mientras recuperábamos el mensaje.

El nuevo Hotmail es ahora más parecido a una aplicación, ya que ahora almacenamos información en el caché una vez que se ha descargado. La lista de mensajes está almacenada en el Modelo de Objetos del Documento (DOM, por sus siglas en inglés) del navegador, para que ya no tengamos que descargarla cuando la necesitemos. También almacenamos en caché el correo electrónico que se ha leído, para que podamos reabrir el mensaje casi de forma instantánea.

Cuando se almacenan en caché los datos, el truco es saber cuándo actualizarlos. En el nuevo Hotmail, nuestro servidor detecta cuándo cambia la cuenta del usuario—por ejemplo, cuando se recibe un nuevo mensaje—y envía una notificación al navegador. Posteriormente, el navegador busca los datos actualizados, para que la bandeja de entrada siempre esté sincronizada.

Por último, cuando el usuario cierra el navegador o cierra la sesión en Hotmail, se limpia el caché para que no haya información que comprometa su privacidad.

Precarga

El análisis que realizamos sobre patrones de uso de Hotmail mostró que cuando los clientes se registran en su cuenta lo más probable es que su primera actividad sea leer el asunto de los nuevos correos para decidir qué mensajes abrir. En el nuevo Hotmail, usamos ese tiempo para descargar y almacenar en caché los primeros mensajes para que estén listos cuando los necesite. De esta forma, cuando elija abrir un mensaje, no tendrá que esperar la descarga.

Nuestro análisis también mostró que cuando los clientes abren un mensaje de correo electrónico, es muy posible que vean el mensaje que le sigue. Por lo tanto, en el nuevo Hotmail, mientras el usuario lee un mensaje, automáticamente descargamos y almacenamos en caché el siguiente correo en la lista.

Continuamos mejorando nuestro diseño para hacerlo lo más eficiente posible, por lo que sólo algunos usuarios cuentan con esta función de forma predeterminada. Si aún no ve esta función y le gustaría activarla para su cuenta, puede hacerlo desde la página de opciones.

Además de precargar mensajes, también precargamos códigos y datos en el navegador. Por ejemplo, sabemos que la mayoría de las sesiones en Hotmail tienen que ver con el envío de correos electrónicos. Entonces, mientras lee y borra correos, nosotros descargamos y almacenamos en caché el código JavaScript y HTML y datos de la agenda de direcciones que necesita para escribir un nuevo mensaje de correo electrónico. Cuando da clic en Nuevo o Responder, nosotros simplemente intercambiamos el código y los datos de la función Escribir Mensaje para que esté listo de forma instantánea.

Un problema de diseño interesante al que nos enfrentamos fue cómo pensar cómo descargar contenido sin interferir con el ancho de banda o con el uso de hilos del navegador. En caso de interferir, se puede sentir que la aplicación no responde. Hemos separado y ordenado las descargas para hacer que el navegador tenga más capacidad de respuesta y para hacer que las tareas más importantes del usuario sean rápidas y estén disponibles con la mayor rapidez posible. Ésta es un área en la que continuaremos trabajando para ofrecer más mejores en el futuro.

Si consideramos el gran número de usuarios de Hotmail, otros retos a los que nos enfrentamos fueron evitar que se sobrecargaran nuestros servidores y mantener el servicio a un precio asequible. Hemos tenido que invertir para poder ofrecer un mayor rendimiento en nuestro sistema de almacenamiento; describiremos cómo lo hicimos en una publicación futura.

Operaciones asincrónicas

El antiguo Hotmail solía esperar las respuestas del servidor antes de actualizar la IU. Por ejemplo, cuando el usuario borraba un mensaje de correo electrónico, Hotmail llamaba al servidor y le pedía que borrara el mensaje, y después esperaba una respuesta del servidor antes de actualizar la lista de mensajes. Esto hacía que Hotmail se sintiera lento, porque parecía que el usuario tenía que esperar a que se completara la operación antes de que pudiera continuar trabajando.

El nuevo Hotmail ya no espera las respuestas del servidor para la mayoría de las operaciones antes de actualizar la IU. En el nuevo Hotmail, cuando el usuario borra un mensaje, Hotmail actualiza la lista de mensajes de forma instantánea para que el usuario pueda continuar trabajando de inmediato. En el fondo, el código de cliente pone en espera las acciones y llama al servidor para borrar el correo electrónico. Por lo tanto, los mensajes se borran pero sin la espera.

Este enfoque también hace que el código de cliente sea más resistente a cambios repentinos en la actividad del servidor y mejora el desempeño para los usuarios que tienen poco ancho de banda o conexiones de alta latencia.

Por último, también usamos las increíbles mejoras que hizo el equipo IE9 e invertimos en formas de hacer que Hotmail se ejecutara más rápido en IE, como el uso del Modo de Estándares de IE9.

Resultados

Hace algunas semanas terminamos estos cambios y recientemente liberamos el código para todos nuestros usuarios (excepto la función de precarga, la cual, como mencionamos anteriormente, aún no es una función predeterminada en algunos mercados). Entonces, ¿qué es lo que logramos? Los datos hablan por sí solos:

Los datos representan medidas del cuartil .75 de cientos de ejecuciones de una prueba automatizada en comparación con un servidor de producción. El ancho de banda es de 300kb con latencia de 75 kb (alta) y 150ms (baja) y con navegador IE9. Los resultados pueden variar.

El video a continuación muestra los datos con mayor claridad:

Aún no hemos terminado. Creemos que el desempeño es una función y estamos comprometidos a hacer que Hotmail sea lo más rápido posible. Continuaremos encontrando más formas de hacer que Hotmail se cargue con mayor rapidez y también estaremos trabajando en formas de mejorar la eficiencia de más de las acciones más comunes.

Disfruten de las mejoras y estén pendientes de este espacio para recibir más información.