Behind Facebook’s Faster Recommendations Plugin

Facebook continued its efforts to boost the speed of its social plugins, with Software Engineer Stoyan Stefanov detailing in a post on his blog how he was able to double the speed of the social network’s recommendations plugin.

Facebook continued its efforts to boost the speed of its social plugins, with Software Engineer Stoyan Stefanov detailing in a post on his blog how he was able to double the speed of the social network’s recommendations plugin.

Stefanov was also behind the effort in February to boost the performance of Facebook’s like box plugin.

He wrote of the process of speeding up the recommendations plugin:

The techniques used to make it faster are simple and effective: better resource packaging, reducing number of requests, inlining CSS, reducing the amount of CSS and JavaScript by untangling dependencies, cleaning up, and sometimes simply rewriting. You can read more about these in the previous posts.

The total payload change is drastic, mainly due to better packaging, and better JS modules and dependencies.

The number of requests is reduced by one-third — not as drastic, but not too bad either. Most of the requests are images, which is OK. They don’t block anything and whenever they arrive, they are welcome. But they are not on the critical path. The reduced requests are all JavaScript. We already had a previous optimization, so CSS was already inlined. But thanks to rewrites, now the HTML payload (including inline CSS) is 6.2K gzipped, down from 9.4K, which means the initial paint can start sooner.

The initial paint (render start) now happens in one-half the time. And, even better, the initial paint is a complete plugin, except for the images, while before, it was just partial content. This is because CSS is here early and all JS is out of the way (async loaded, also take a peek here).

The fully loaded time is not all that important, since the user has a usable list of recommendations already delivered with the initial paint. But it’s still two times faster, which makes me happy.

Image courtesy of Shutterstock.