Google+ goes completely responsive.
Going Responsive #
Google+ is where people come together around shared interests, from Zombie Cats to Vintage Calculators. Until recently, Google+ had two different versions of their website - one for desktop, and one for the mobile web that was designed for older browsers.
Maintaining two sites brought with it a unique set of challenges. Having separate versions of the site meant that each feature had to be implemented twice. This resulted in a lot of duplicate code and additional effort optimizing two experiences for desktop and mobile web. And as the lines between devices became increasingly blurry - with desktops that support touch and powerful mobile devices with ever larger screens - having different designs for desktop and mobile made less and less sense.
Other rules included disallowing height and width animation that would cause browser re-layouts and have negative effects on performance. For DOM manipulations and animations we scheduled tasks to be done in-sync with the render refresh rate of the browser. We also group all measure tasks together so that we can avoid expensive repeated style calculations. We also relied heavily on Chrome profiler tools to ensure everything was working as intended as we went along. In addition, we created tools that calculate the effect of code changes on JS-footprint to make sure we do not drastically increase our page size.
This took some time, but it would have been much more difficult if we hadn’t had the ability to identify and eliminate problems as we built.
We launched our mobile-web version of this responsive implementation in February, 2015. This allowed us to vet the new designs and our new process. We used data from this launch to validate what worked and what did not. We iterated on the design and started expanding to support more devices. In November, 2015 we launched this new implementation across all devices.
Without sacrificing performance, Google+ were able to build a complex web app with rich UI. The site is now faster and leaner than ever before.
|Total home page weight, gzipped (with images)||22,600 KB||327 KB|
|HTML (not gzipped)||1,100 KB||362 KB|
|Average complete page load time (latency)||12 seconds|
0.7 seconds to first byte
0.1 seconds to first byte