30 Facebook Like buttons on a page overburden the web browser?

Question

On a page that contains a list of about 30 entries, each of them is Facebook-likable (each entry's HTML contains a Like button), and each of them is either displayed or not (depends on a filter setting):

• The page takes several seconds to load entirely
• The page uses lots of memory, thanks to the Like buttons
• The page uses CPU even if the user doesn't interact (every 100ms or less, one of the Like buttons fires an event using Javascript)
• If I do not change the DOM tree, just change element visibility, the buttons seem to be reloaded anyway

On a PC with more than 1 GHz and 1 GB mem, the page is unusable because it is so slow (browser: Chromium). How can I change this, keeping the Like buttons?

Answer 1

1. Blame Facebook's "Like" implementation
2. Download Firefox Nightly or 'Aurora', and look at the "about:memory" tab to get an idea of the memory impact of the "Like" buttons. (Firefox has added per-compartment memory reporting to about:memory)

Answer 2

Use the JavaScript SDK

Make sure to include the like buttons via xfbml and the JavaScript SDK. This way you have more control over them.

Don't load them initially, load them explicitly when you need them

Further the documentation by default recommends that you replace the xfbml tags immediately with facebook like buttons as soon as the page is loaded. Therefore it has

    xfbml  : true  // parse XFBML

as option to almost all mentions of calling FB.init. You don't want that.

If you have so many like buttons it is quite likely that you don't need to load all of them initially. The JavaScript SDK offers a function for parsing and replacing the fbxml explicitly. You can call it on a certain DOM node instead of the whole page. See FB.XFBML.parse. This way you can load the buttons when you need them, you could even lazily only load those that are currently visible in the browser similar to image lazy loading techniques.