When I first learned about social plugins, I thought that they were a really cool idea and thought that they had a lot of potential. If they use a ton of memory though, I feel like it’s a bit of a deal breaker to using them. So, being the curious engineer that I am, I decided to test this out myself. I conducted these tests in a new Firefox profile and I was not signed into Facebook (to try and replicate the experience Dietrich had).

One Like Button

For my first test, I had a very simple page for the default like social plugin pointing to my site.

One like button doesn’t seem to add much, which is good!

Two Like Buttons

The next test I tried was duplicating the like button so it showed up twice. This code is a bit naive since I duplicate a <div> element with the same id and don’t need to include the JavaScript twice. However, it shows what someone who would just copy and paste will end up with, which I think is valuable.

As you can see, memory usage nearly doubled. This is a bit surprising since the exact same JavaScript is included. I would expect there to not be any additional shapes, but that nearly doubles. scripts and mjit-code also all double, and I would expect that at least the latter to not.

A more interesting version of this test would be to not include the JavaScript twice, and just add one additional <fb:like> button that doesn’t like the same url.

Interestingly, memory usage did not change significantly from the duplicate resource case! So, what exactly is going on here? This page ends up loading four additional resources:

File	HTTP Status	Size	Mime Type
all.js	304	143KB	application/x-javascript
login_status.php	200	58b	text/html
like.php	200	33KB	text/html
like.php	200	33KB	text/html

That is 209KB of HTML and JavaScript that is being sent for two like buttons. Something tells me that part of the problem here is that Facebook is sending more than it needs to for this (I did not look into exactly what was being sent). The good news is that 143KB comes from the browser’s cache.

Send Button

The last test I did was the send button pointing to my website.

Given that the like button test includes a send button as well, I’m not surprised to see that this used even less memory.

Summary

I think there are are two problems here:

1. Firefox should create less shapes and do a better job of not duplicating the same JavaScript code in a given compartment.
2. Facebook needs to send less data down for their social plugins. I have a hard time believing that that much JavaScript is needed in order to display a like button, a share button, and a faces of your friends who have liked a page.

It’d be interesting to see how these numbers change when you are logged in, but I don’t have time to do that analysis. I’ve provided all the code and steps I used to get these results, so it shouldn’t be too hard for someone else to come along and do that if they are interested. Another interesting test would be to see how the Twitter and Google+ integrations break down too (but I leave that as an exercise for the reader).

]]> http://shawnwilsher.com/archives/549/feed 3 http://shawnwilsher.com/archives/547 http://shawnwilsher.com/archives/547#comments Sat, 13 Aug 2011 17:05:01 +0000 Shawn Wilsher

Done:

• Reviewed bug 598794 - Intermittent failure in uriloader\exthandler\tests\unit\test_punycodeURIs.js | test failed (with xpcshell return code: 0), see following log: Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIFileInputStream.init]
• Reviewed bug 665549 - Fix unused variable warning for 'shutdownObserved' in mozStorageService.cpp
• Reviewed bug 665328 - Remove the unused Storage string
• Reviewed bug 665219 - Helper App Service should accept a filename hint on a channel
• Reviewed bug 658368 - Expand console object with time and timeEnd methods
• Reviewed bug 662989 - Avoid crashing if a DB connection isn't asyncClose()d when it should be
• Reviewed bug 655658 - NetUtil.readInputStreamToString should have aCharset argument as optional
• Reviewed bug 665580 - Hide http:// and single trailing slashes in the location bar
• Reviewed bug 668906 - NULL dereference in openUnsharedDatabase with functiontimer
• Reviewed bug 663612 - clicking a group should zoom into the group's active tab
• Reviewed bug 591289 - Save chosen download file name and other metadata in Places history

June 1st will be my last day at Mozilla. I’ve learned so much over the years working there, and choosing to leave was the hardest decision I’ve had to make. I do not intend to disappear from the project, however, but my activity level will decrease. Feel free to continue to send review requests my way and cc me to bugs you want my opinion on, and I’ll do my best to reply in a timely manner.

So long, and thanks for all the fish.