TALK: Over-optimizing for the fastest website rendering ever

[joaojeronimo]

I came to Mozambique for holidays and the internet here is painfully slow with +350ms latency to everywhere, and the websites we're all used to stumble every now and then take forever to load here.

In times like this you really start to appreciate caching mechanisms and all the savings count.

Because of this and because I love to over-optimize, I tried something crazy which is to inline everything I could. Think about it: your website finishes rendering when all images are downloaded, CSS rules are applied and all JS is executed. If you're going to make requests for this (yes some of them are parallel, which is cool) and if everyone of these take a hit of 400ms of latency plus super slow downloads, you're going to wait about 30 seconds for a website to load, which sucks. By inlining everything and gzipping on the end I went from about 10 Javascript files and 4 CSS files (AngularJS, CodeMirror, jQuery, bootstrap were among them) to one asset and ~200kb which means the website loads nearly instantly.

Even in first world countries I expect to go from the average ~2 seconds to ~100ms of load time, which is impressive.

For that I wrote a module and a gulp plugin which I'm going to release (have to clean up a bit).

And If there's time on the next meetup I could give a tiny 10 minute talk about this with a demo and before-after benchmarks ;)

[fbaiodias]

:+1: Sounds awesome!

[daviddias]

Totally have to record this one!

[soarez]

:+1:

[daviddias]

@joaojeronimo want to do it next week's Thursday?

[joaojeronimo]

That's too early, I need one more week to get this ready. It's a 10 minute talk let's just attach it to the next meetup

[sericaia]

seems cool :dancer:

[joaojeronimo]

Done, if anyone wants the screencast: https://dl.dropboxusercontent.com/u/463581/aggressive-inliner.mov and the slides http://joaojeronimo.github.io/aggressive-inliner-presentation/