Google+

Resumen

Google+ es totalmente adaptable.

Adopta un entorno responsivo

Google+ es el lugar donde las personas se reúnen por intereses comunes, desde gatos zombi hasta calculadoras vintage. Hasta hace poco, Google+ contaba con dos versiones diferentes del sitio web: una para la computadora de escritorio y otra para la Web móvil que se diseñó para los navegadores más antiguos.

Desafíos

El mantenimiento de dos sitios trajo consigo un conjunto único de desafíos. Tener versiones separadas del sitio implicaba que cada función debía implementarse dos veces. Esto dio como resultado una gran cantidad de código duplicado y un esfuerzo adicional para optimizar dos experiencias para computadoras de escritorio y la Web móvil. Y a medida que las líneas entre los dispositivos se volvían cada vez más borrosas (con computadoras de escritorio compatibles con pantallas táctiles y dispositivos móviles potentes con pantallas cada vez más grandes), tener diferentes diseños para computadoras de escritorio y dispositivos móviles tenía cada vez menos sentido.

A medida que agregamos funciones, nuestro sitio heredado para computadoras también se volvía más lento y se inflaba. A principios de este año, nuestra página principal pesaba alrededor de 5 MB y produjo alrededor de 250 solicitudes HTTP. Simplemente no tenía un buen rendimiento. Las imágenes del sitio eran pesadas y no estaban optimizadas, lo que ralentizaba aún más la página. Como resultado, nuestra transmisión era casi inaccesible en redes inestables y lentas, y la experiencia para estos usuarios fue muy decepcionante. Además, el requisito de admitir navegadores heredados en la Web móvil nos impidió confiar en JavaScript en todo el sitio y nos impidió implementar funciones muy interactivas. No podíamos confiar en los avances de los navegadores web móviles.

Solución

Comenzamos con un enfoque en el diseño responsivo: una implementación que funcionaría en dispositivos móviles, tablets, computadoras de escritorio y mucho más. Analizamos en detalle cada función, página, biblioteca de JavaScript y clase de CSS. Queríamos crear un sistema que garantizara que el sitio solo descargara lo que era absolutamente necesario para funcionar, a menos que el usuario solicitara más. El desafío era crear un sitio web que funcionara correctamente en un teléfono móvil más lento con conexión móvil, pero que, al mismo tiempo, ofreciera una gran experiencia envolvente en navegadores más rápidos y pantallas más grandes.

Este conjunto de restricciones implicaba que tuvimos que analizar cada cambio de código en el futuro. Para lograrlo, establecimos una regla de 6^5 para asegurarnos de que, en la carga inicial de la página, no se descargaran más de 60,000 de HTML, 60,000 de JavaScript y 60,000 CSS, nuestras animaciones siempre eran de 60 FPS y teníamos una latencia promedio de 0.6 s.

Para lograrlo, elegimos frameworks de JavaScript y CSS que compilaban la modularidad y la carga diferida desde el principio. Por lo tanto, nos aseguramos de que los usuarios solo descarguen JavaScript y CSS cuando usen la función que lo requiere. Esto se hace a través de un enfoque basado en plantillas que se combina con nuestro sistema de compilación y de módulos para que los desarrolladores funcionen casi sin esfuerzo.

Con este nuevo framework, comenzamos a crear el prototipo de una reimplementación de Google+ en la Web. Comenzamos a rechazar los elementos "malos" y a establecer reglas estrictas para el desarrollo. Una de nuestras reglas principales era que todas nuestras páginas debían estar renderizadas en el servidor y en el cliente. Con la renderización del servidor, nos aseguramos de que el usuario pueda comenzar a leer en cuanto se cargue el HTML y de que no sea necesario ejecutar JavaScript para actualizar el contenido de la página. Una vez que se carga la página y el usuario hace clic en un vínculo, no queremos realizar una ida y vuelta completa para volver a renderizar todo. Aquí es donde el procesamiento del cliente se vuelve importante. Solo necesitamos recuperar los datos y las plantillas y renderizar la página nueva en el cliente. Esto implica muchas compensaciones, por lo que usamos un framework que facilita la renderización del servidor y del cliente sin la desventaja de tener que implementar todo dos veces: en el servidor y en el cliente.

Otras reglas incluían la inhabilitación de animaciones de alto y ancho que causarían cambios en el diseño del navegador y tendrían efectos negativos en el rendimiento. En el caso de la manipulación y las animaciones del DOM, programamos las tareas para que se realizaran de forma sincronizada con la frecuencia de actualización de la renderización del navegador. También agrupamos todas las tareas de medición para evitar los cálculos de estilo repetidos y costosos. También dependemos en gran medida de las herramientas del generador de perfiles de Chrome para garantizar que todo funcionara según lo previsto a medida que avanzábamos. Además, creamos herramientas que calculan el efecto de los cambios de código en el espacio de JS para asegurarnos de no aumentar drásticamente el tamaño de nuestra página.

Esto tomó un tiempo, pero hubiera sido mucho más difícil si no hubiéramos tenido la capacidad de identificar y eliminar problemas a medida que construíamos.

En febrero de 2015, lanzamos nuestra versión web móvil de esta implementación responsiva. Esto nos permitió revisar los nuevos diseños y nuestro nuevo proceso. Usamos datos de este lanzamiento para validar qué funcionó y qué no. Iteramos el diseño y comenzamos a expandirnos para admitir más dispositivos. En noviembre de 2015, lanzamos esta nueva implementación en todos los dispositivos.

Resultados

Sin sacrificar el rendimiento, Google+ pudo compilar una aplicación web compleja con una IU enriquecida. Ahora, el sitio es más rápido y más eficiente que nunca.

	Antes	Después
Peso total de la página principal, en formato gzip (con imágenes)	22,600 KB	327 KB
Recuento de solicitudes	251	45
HTML (sin comprimir con gzip)	1,100 KB	362 KB
JavaScript y CSS (comprimido con gzip)	2,768 KB	111KB
Tiempo promedio de carga de página completo (latencia)	12 segundos 0.7 segundos hasta el primer byte	3 segundos 0.1 segundos hasta el primer byte