z

Why did I create Browser Diet?

• 1,070 views

Leia em português.

We developers talk a lot about HTML5, CSS3, EcmaScript 6 news that we almost forget to talk about other things that are also very important, but aren't as novelty just like web performance.

After a huge effort, we finally launched a community-driven performance guide called browserdiet.com and today I'm here to share my experience leading this awesome project.

Motivation

2012 was a very different year for me, I spent 1/3 of my time traveling to give talks and I found a lot of bad internet connections in hotels and airports. It made me very angry. And of course I always cursed the hotel/airport, until realize that's actually our fault.

We developers are selfish. We spend all day at the office with a high speed connection and forget that there are other people in the world experiencing different speeds.

The beginning

I started to study more about Web Performance Optimization (WPO) and came across the following scenario. In english, excellent references like High Performance Websites and Even Faster Web Sites books, both by Steve Souders. Besides Yahoo! and Google's online guides. In portuguese, a dozen of lost blogposts.

So I thought: "What if I created the ultimate community-driven performance guide?" But it didn't make sense to do it alone, so I started to talk with some friends.

Conception

One thing was very clear to me, I wanted to do a fun project.

First, I conviced a designer called Briza Bueno (Americanas.com) to help me. She developed an identity much more funny than those boring guides that exist today. All based in Scott Johnson's illustrations, whom I asked permission to use images.

Then it came time to develop the structure of this website, Iraê Lambert (Yahoo!) helped me on that part writing a static generator in Python. But I didn't master that code and the barriers I encountered for not knowing what was manipulating started to keep me away from the project, while other ideas were emerging.

Result: the project was stopped for one year until I decided to rewrite everything using another static generator in Node.JS called DocPad. Like any other open source project, if you want to do something with the collaboration of people you'll need to eliminate as many barriers as possible. So, inspired by HTML5 Please, I decided that all tips would be written in the simplest format in the world, Markdown.

Content

Design and development were ready, we had everything except what really matters, content. So I invited many great friends who face performance challenges everyday, Davidson Fellipe (Globo.com), Giovanni Keppelen (Peixe Urbano) and Jaydson Gomes (Terra). The initial categories HTML, CSS, JavaScript and jQuery were divided between us.

My eternal dilemma between Portuguese and English also persisted in this project. I even bought this small domain comoperderpesonobrowser.com.br, but it clearly wouldn't work for an english content too. That's why I opted for something shorter and universal.

Revision

After much improvement I decided to invite other guys to review, like Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google) and Sérgio Lopes (Caelum). Everyone was excited and insanely contributed, including questions related to the code of the website were extremely debated like CSS Sprites vs Lazy Load.

Launch

I was planning to launch this project at least in April. But when I saw that the first contributors (Briza, Davidson, Giovanni and Jaydson) would be present at Rio.JS I changed my presentation title and started running against time.

Fortunately everything worked out and we launched the project!

The final result you can see at: browserdiet.com.

Source code, as always, is available at Github.

PS: My slides are also online for those who weren't there.

Conclusion?

I'm very excited to see how the community will receive and benefit from these great tips that we prepared.

So, let's make the web faster?

Reactions

Stoyan Stefanov, Engineer - Facebook

Mathias Bynens, Web Developer - Freelance

Ilya Grigorik, Developer Advocate - Google

Mike Taylor, Web Opener - Opera