Como perder peso (no browser)

Nós desenvolvedores falamos tanto das novidades do HTML5, CSS3, EcmaScript 6 que acabamos esquecendo de falar de outras coisas também muito importantes, mas que não são tão novidade assim, como performance.

por Zeno Rocha 23/08/2013 Comentários

Nós desenvolvedores falamos tanto das novidades do HTML5, CSS3, EcmaScript 6 que acabamos esquecendo de falar de outras coisas também muito importantes, mas que não são tão novidade assim, como performance.

Depois de muito esforço, finalmente lançamos um guia definitivo sobre o assunto chamado browserdiet.com e vim compartilhar um pouco da experiência de ter liderado esse projeto irado.

Motivação

O ano de 2012 foi um ano bem diferente pra mim, passei 13 dele viajando e me deparei com muita conexão ruim em hotel e aeroporto. Isso me deixava muito irritado. E é claro que eu sempre xingava o hotel/aeroporto, até perceber que a culpa na verdade é nossa.

Nós desenvolvedores somos egoístas. Passamos o dia todo no escritório com uma alta velocidade de conexão e esquecemos que existem outras pessoas no mundo enfrentando velocidades bem diferentes daquela.

O Início

Comecei a estudar mais sobre performance para escrever minha monografia e me deparei com o seguinte cenário. Em inglês, excelentes referências como os livros High Performance Websites e Even Faster Web Sites, ambos do Steve Souders. Além, é claro, dos guias da Yahoo! e Google. Já em português, uma dezena de blogposts soltos por aí.

Pensei: “E se eu fizesse um guia foda de performance voltado pra comunidade?” Mas não fazia sentido fazer aquilo sozinho, então de pouquinho em pouquinho fui conversando com uns amigos.

Concepção

Uma coisa estava muito clara pra mim, queria fazer um projeto divertido.

Convenci primeiro a designer Briza Bueno (Americanas.com) a me ajudar. Ela elaborou uma identidade muito mais divertida do que aqueles guias chatos que existem hoje. Isso tudo com base nas ilustrações do Scott Johnson, a quem eu pedi autorização para utilizar as imagens.

Depois chegou a hora de elaborar a estrutura desse site, nessa parte o Iraê Lambert (Yahoo!) me deu uma mão escrevendo um static generator em Python. Só que eu não dominava aquele código e as barreiras que eu encontrava por não saber manipular aquilo foram me afastando do projeto, ao mesmo tempo em que outras ideias iam surgindo.

Resultado: o projeto ficou parado por 1 ano até que eu decidi retomar reescrevendo todo código usando um outro static generator em Node.JS chamado DocPad. Como todo projeto open source, se você quiser fazer algo que tenha a colaboração das pessoas precisa eliminar o maior número de barreiras possíveis. Por isso, inspirado no HTML5 Please, decidi que todas as dicas seriam escritas no formato mais simples do planeta, em Markdown.

Conteúdo

Design e implementação estavam prontos, só faltava o que realmente importa, o conteúdo. Convidei então grandes amigos que enfrentam muitos desafios de performance no seu dia-a-dia, Davidson Fellipe (Globo.com), Giovanni Keppelen (Peixe Urbano) e Jaydson Gomes (Terra). As categorias iniciais divididas entre nós foram HTML, CSS, JavaScript e jQuery.

Meu eterno dilema entre português e inglês também persistia nesse projeto. Cheguei a comprar o pequenino domínio comoperderpesonobrowser.com.br, mas ele claramente não funcionaria para um conteúdo em inglês também. Por isso, optei por algo mais curto e universal.

Revisão

Depois de muito aprimoramento resolvi convidar outros caras sinistros para revisarem, como o Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google) e Sérgio Lopes (Caelum). Todos ficaram animados e contribuiram insanamente. O legal foi que a discussão não ficou apenas na parte do conteúdo, questões relativas ao código do site foram extremamente debatidas como usar CSS Sprites vs Lazy Load.

Lançamento

Eu estava planejando lançar esse projeto no mínimo em Abril. Só que quando vi que os primeiros colaboradores (Briza, Davidson, Giovanni, e Jaydson) do projeto estariam presentes no Rio.JS, mudei o tema da minha palestra e comecei a correr contra o tempo.

Felizmente deu tudo certo e lançamos o projeto!

O resultado final você pode conferir em: browserdiet.com. E o código fonte, como sempre, está aberto no Github.

PS: Os slides também estão online para quem quiser conferir.

Conclusão?

Estou bem animado para ver como a comunidade vai receber e se beneficiar desse aglomerado de dicas iradas que preparamos.

E aí, vamos fazer uma web mais rápida?

Reações

iMasters – Guia que conscientiza desenvolvedores sobre a importância da performance é lançado

Stoyan Stefanov, Engineer – Facebook

Mathias Bynens, Web Developer – Freelance

Mike Taylor, Web Opener – Opera