Facebook has announced the release of a new Like Box plugin, rewritten “from the ground up” to be up to four times faster with smaller components, less CSS (now inline) and asynchronously loading JavaScript.
So what changed?
- New, smaller components. The plugin is made of little components (box, buttons, etc), and we’ve simplified and cleaned those up to use fewer bytes in HTML markup and CSS.
- The total CSS is reduced to the point of being small enough to go in the HTML as a
style
tag. This may seem controversial (external stylesheets can be cached, inline styles cannot), but in our experiments we’ve seen it’s better to have the (small amount of) CSS inline. Otherwise the browsers block the rendering of the page, waiting for yet another HTTP request to complete. - Reduced overall JavaScript size.
- Better JavaScript packaging. We now have only one JavaScript to load with a single HTTP request.
- Asynchronous non-blocking JavaScript loading.
- Perceived performance. Inline CSS and non-blocking JavaScript make the first browser paint happen faster. This helps deliver the first impression to the user faster. The rest (handling clicks and showing the page stream) can wait.
1. Take a look at the simplest form of the Like Box: no stream, no friend faces, almost like a Like Button:
As you can see, there are much fewer resources now: 4 down from 15. The whole plugin loads in 0.5 seconds, as opposed to 2.3 seconds (a 4x improvement). Additionally, the perceived performance is better because the first paint (initial impression) is now at 0.3 seconds, as opposed to 2.1s (a 7x improvement!). Finally, the total payload in terms of bytes is 46K, or 5x fewer bytes than before (when it was 245K).
2. Next, take a look at the waterfalls when the show_faces option is true:
We have more requests because of the friend’s photos, but the initial paint is 0.3s (was 2.1s) and the onload
fires at 0.75s (was 2.4s).
My Facebook Members WordPress Plugin is fully compatible with this change. There isn’t any update required.