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
styletag. 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.
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.Would love to know what you think. Chime in and share it as a comment. Don’t forget to share this guide!