Google+

Resumo

O Google+ agora é totalmente responsivo.

Use a responsividade

No Google+, as pessoas se reúnem em torno de interesses compartilhados, de gatos zumbis a calculadoras Vintage. Até recentemente, o Google+ tinha duas versões diferentes do site: uma para computador e outra para a Web para dispositivos móveis, desenvolvidas para navegadores mais antigos.

Desafios

A manutenção de dois locais trouxe um conjunto exclusivo de desafios. Com versões separadas do site, cada recurso precisava ser implementado duas vezes. Isso resultou em muito código duplicado e esforço extra para otimizar duas experiências na Web para computadores e para dispositivos móveis. E à medida que as linhas entre os dispositivos se tornavam cada vez mais tênues, com computadores compatíveis com toque e dispositivos móveis potentes com telas cada vez maiores, ter designs diferentes para computadores e dispositivos móveis tornava cada vez menos sentido.

À medida que adicionamos recursos, nosso site para computador legado ficou lento e pesado. No início deste ano, nossa página inicial pesou cerca de 5 MB e produziu cerca de 250 solicitações HTTP. Simplesmente não estava tendo uma boa performance. As imagens do site eram pesadas e não otimizadas, deixando a página ainda mais lenta. Como resultado, nosso stream ficou quase inacessível em redes lentas e instáveis, e a experiência desses usuários foi, na melhor das hipóteses, decepcionante. Além disso, o requisito de compatibilidade com navegadores legados na Web para dispositivos móveis nos impediu de confiar em JavaScript em todo o site e nos impediu de implementar recursos altamente interativos. Não poderíamos confiar nos avanços dos navegadores da Web para dispositivos móveis.

Solução

Começamos com foco no design responsivo: uma implementação que funcionaria em dispositivos móveis, tablets, computadores e muito mais. Analisamos detalhadamente cada recurso, página, biblioteca JavaScript e classe CSS. Queríamos criar um sistema para que o site fizesse o download apenas do que fosse absolutamente necessário para funcionar, a menos que o usuário solicitasse mais. O desafio era criar um site que funcionasse corretamente em um smartphone mais lento com uma conexão celular, mas que ainda oferecesse uma ótima experiência imersiva em navegadores mais rápidos e telas maiores.

Esse conjunto de restrições significava que tínhamos que examinar detalhadamente cada mudança de código daquele ponto em diante. Para isso, estabelecemos uma regra de 6^5 para garantir que, no carregamento inicial da página, não fizéssemos o download de mais de 60 mil HTML, 60 mil JavaScript e 60 mil CSS, nossas animações sempre tinham 60 fps e tivéssemos uma latência média de 0,6s.

Para isso, escolhemos frameworks de JavaScript e CSS que criaram modularidade e carregamento lento desde o início. Por isso, garantimos que os usuários façam o download de JavaScript e CSS somente quando usarem o recurso que precisa deles. Isso é feito usando uma abordagem baseada em modelos, combinada com nosso sistema de build e módulos, para que as coisas funcionem sem esforço dos desenvolvedores.

Com essa nova estrutura, começamos a prototipar uma reimplementação do Google+ na Web. Começamos a proibir coisas “ruins” e a definir regras rígidas para o desenvolvimento. Uma das nossas principais regras era que todas as nossas páginas precisavam ser renderizadas pelo servidor e pelo cliente. Com a renderização do lado do servidor, garantimos que o usuário possa começar a ler assim que o HTML for carregado, e que nenhum JavaScript precise ser executado para atualizar o conteúdo da página. Depois que a página é carregada e o usuário clica em um link, não queremos fazer uma viagem de ida e volta completa para renderizar tudo novamente. É aqui que a renderização do lado do cliente se torna importante. Basta buscar os dados e os modelos e renderizar a nova página no cliente. Isso envolve muitas desvantagens. Por isso, usamos um framework que facilita a renderização do lado do servidor e do lado do cliente sem a desvantagem de ter que implementar tudo duas vezes: no servidor e no cliente.

Outras regras incluíam a proibição de animações de altura e largura, que causariam relayouts do navegador e afetariam o desempenho de forma negativa. Para manipulações e animações DOM, agendamos tarefas para serem feitas em sincronia com a taxa de atualização de renderização do navegador. Também agrupamos todas as tarefas de medição para evitar cálculos de estilo repetidos e caros. Também confiamos nas ferramentas do Chrome Profiler para garantir que tudo funcionava conforme o esperado à medida que prosseguimos. Além disso, criamos ferramentas que calculam o efeito das alterações de código na pegada de JS para garantir que não aumentemos drasticamente o tamanho da nossa página.

Isso levou algum tempo, mas seria muito mais difícil se não tivéssemos a capacidade de identificar e eliminar problemas à medida que construímos.

Lançamos nossa versão da Web para dispositivos móveis dessa implementação responsiva em fevereiro de 2015. Isso nos permitiu examinar os novos designs e nosso novo processo. Usamos os dados desse lançamento para validar o que funcionou e o que não funcionou. Iteramos o design e começamos a expandir o app para oferecer suporte a mais dispositivos. Em novembro de 2015, lançamos essa nova implementação para todos os dispositivos.

Resultados

Sem sacrificar o desempenho, o Google+ conseguiu criar um aplicativo da web complexo com uma interface avançada. O site está mais rápido e enxuto do que nunca.

	Antes	Depois
Peso total da página inicial, compactado em gzip (com imagens)	22.600 KB	327 KB
Contagem de solicitações	251	45
HTML (não compactado com gzip)	1.100 KB	362 KB
JavaScript e CSS (gzip)	2.768 KB	111KB
Tempo médio de carregamento da página concluído (latência)	12 segundos 0,7 segundo até o primeiro byte	3 segundos 0,1 segundo até o primeiro byte