Airbnb Perf Notes:
@samccone 9/13/2016
-----------------------------
airbnb does some really cool stuff to get the page to render really fast, however the site then does a bunch of uncool stuff mitigating the entire gains of SSR (server side rendering)
I like to think I summarized my feeling quite well here ;)
So let's go ahead and look at the two main bad actors on the page and see what we can do to make the world happy again!
Why the page feels so slow even though it looks like it is done:
When I try and interact once you show me something
Nexus 5x while trying to scroll after initial load
Well we are downloading a whole bunch of code and the main thread is totally stuck evaluating JS.... Do we really need all of this code? How much is actually being run?
I made a thing to answer this! https://github.com/samccone/coverage-ext
Link to the coverage results: https://drive.google.com/open?id=0Bw-Xl8QWLgisRHZpN3BSVGdLamc
Turns out we are running well under 40% of the code that we ship to the user, more like 25%.
So this one is really easy -- ship less code, be faster!
Why does nothing respond on my phone when I touch?:
The Airbnb website on my mobile phone is a painful experience. On my nexus 5x it takes on wifi over 10 seconds for the page to actually respond to my touches.
You can see many attempts to scroll, but the browser didn't ship a frame at all for >7 seconds
Nexus 5x on wifi results:
9s js lockout
Browserify js pattern --- chrome devtools makes you think that the real cost is here, however when you drop down into chrome://tracing and do a recording you can see that most of your time is actually spent parsing the javascript!
var e = function(e) {
function t(r) {
if (n[r])
return n[r].exports;
var a = n[r] = {
exports: {},
id: r,
loaded: !1
};
return e[r].call(a.exports, a, a.exports, t),
a.loaded = !0,
a.exports
}
var n = {};
return t.m = e,
t.c = n,
t.p = "",
t(0)
}([function(e, t, n) {
e.exports = n(1514)
}, …..])
Read more about optimization tricks here:
https://github.com/rollup/rollup/pull/774
https://twitter.com/s3ththompson/status/775791141916516352
