Aaron reminded us to “Get Lazy” in his article Lazy Loading: Optimal User Experience, and to use non-blocking loading patterns in, Non-Blocking Pages: Optimal User Experience. Now, let’s talk about how to put these concepts to use on Social buttons.
You may have seen the TechCrunch implementation that uses Socialite.js. This is a fine implementation, as long as you’re okay with the visual display of either:
Or
We wanted to keep our horizontal line with the numbers to the right and wanted to load a spinner in the interim. We decided to write our own Javascript to create this style:
We implemented this style of lazy loading the social buttons on our home page and it will soon be the standard style used on all of our pages.
Our current version is limited to +1, Tweet, and Like and has the horizontal display with the spinning wait indicator.
Now, I’m going to tell you why this is beneficial, give you our source code, and show you how to put it to use on your site.
Social Buttons Attract New Visitors To Your Site
Social buttons attract more visitors to your site. When users +1, Tweet, or Like your page, it advertises your page to their friends and followers. These are also picked up by search engines and may assist with improving your Search Engine Result Page (SERP) position.
The Double Standard: Pages Should Be Fast; Social Buttons Add Weight to the Page
We care about website performance. Social buttons slow down a web page load. There is a double standard at play here. Search engine guidelines praise performance and social buttons.
To address this double standard, social button providers recommend adding their code by dynamically inserting scripts, which is asynchronous by default and instructs the Javascript to be non-blocking. This means that execution of your page may continue. However, fetching the social button JavaScript still consumes your bandwidth.
The following is a load profile from WebPageTest.org for a page with only a single small 1KB image, a +1, Tweet, and Facebook social button, using 1.5Mbps bandwidth limit:
| Time | Requests | Bytes In |
| 2.783s | 21 | 304 KB |
There are 19 requests for social button objects, summing up to 300KB. This number of objects violates a web application performance principle to reduce round trips. 300KB is significant. On slower Internet connections, this will take much longer than the 2.7s in this example. Do you think this is reasonable? Should this count towards page load time? It does!
Here’s the same page without the social buttons:
| Time | Requests | Bytes In |
| 0.553s | 2 | 5 KB |
That’s a 503% speed improvement and a reduction of 300KB downloaded!
How many social buttons are on my page, all competing for the same bandwidth?
Let’s consider end user “perceived” performance. Loading the social buttons last, the way the social button providers tell us to, allows our page to appear rendered, then the social buttons come in. For the end user, is the page complete when the page is still flashing in the social buttons? For those of us with high speed Internet connections, this happens fast. But, for the majority of the world, running less than 1 Mbps, loading the additional 300KB of JavaScript, CSS, and images takes greater than 1.5 seconds. For this additional >1.5s, the page is still rendering.
Assertion: Asynchronously loaded, or loaded after the onLoad event, still counts towards page load time.
The measure should be end user perceived load time. If the visible part of the page (above the fold) is rendering, the page isn’t loaded and should count towards page load time. For this reason alone, if your social buttons are above the fold, you should use the lazy load method.
In addition to end user perceived load time, there are several reasons to lazy load your social buttons:
If you lazy load, your page load measurement won’t include social button load time. Tools that measure your page speed include Webpagetest.org, Google Analytics, and the Google Toolbar. These tools aren’t great at differentiating between “above the fold” render time and total render time. Some of these measurements are used by search engines as a SERP position algorithm factor. Do you think they don’t count the time it takes to render the social button JavaScript, CSS, and images? Think again, they do.
Load your own objects after the onLoad event. It is good design to consider non-critical components of your page, such as objects rarely accessed, and load these asynchronously or after the onLoad event. For example, a country code selection bar in your footer or images for a slideshow or carousel. See Aaron’s Lazy Loading: Optimal User Experience for more on this topic. Do you really want these objects competing for the same bandwidth as the social buttons? I don’t think you do.
Only a small percentage of visitors interact with social buttons. Why are we wasting our visitors’ valuable bandwidth? Doesn’t it make sense to only load this additional 300KB of JavaScript, CSS, and Images if and when our visitors interact with them? I believe it does.
We Can Have Our Cake and Eat It, Too
The basic concept is to asynchronously insert a small JavaScript file, <5KB when minified and compressed, which renders a sprite that looks like this:
The sprite is <1.5KB. So, we’re replacing 300KB of social button components with <6.5KB. Pretty good trade off.
Then, when the user places their mouse over any of the buttons, we display the spinning icons to indicate that the image is loading:
The spinning icon is <4KB and end users see this while the social buttons are fetched. This is not really necessary for high speed Internet connections, but for slow speed, this is a visual clue to the end user that something is coming and they should sit tight and wait. Without this, they’d just see blank canvas. A blank canvas, even for a few seconds, could lead the end user to believe the page is broken, which may result in abandonment.
Immediately after the spinning icons load, we fire off the code to fetch and load the hefty 300KB social button JavaScript, CSS, and images.
We didn’t consider loading jquery to be additional page weight because we are already using jquery on our page for other purposes.
The Source Code
We released our code as open source on github.
How to Use It:
Step 1: Get the code from https://github.com/godaddy/lazy-social-buttons/.
Step 2: Include jquery >=1.5.1 in your <head>.
Step 3: Place the decorated <div> tag where you want the buttons to show up.
Step 4: Place the simple <script>…</script> just before the </body>.
Step 5: Enjoy lazy loading social buttons on your web page.
Please refer to the documentation on github for complete instructions and various options.
WordPress Plugin – Lazy Social Buttons
Alternatively, you could load the Lazy Social Buttons WordPress plugin. It’s currently hosted in the WordPress.org Plugin Directory.
What’s Next?
At date of publish, we’re running the lazy load social buttons only on our home page and will roll it out to all of our pages over time. If you implement this on your site, we’d love to hear about it.
Great plugin, thanks for developing it! Would love to see Pintrest, Stumbleupon and Linkedin included. Would also like the ability to switch the order of the buttons and to manually insert them into a template
Thanks!
I have added an option for showing the buttons with excerpts in categories & archives. This was the changes. Please add those to your plugin updates in the future:
~~~~~
After “add_filter( ‘the_content’, array( &$this, ‘lazysocialbuttons_content’ ) );”:
$show_excerpt = get_option(‘lazysocialbuttons_show_excerpt’);
if ($show_excerpt) add_filter( ‘the_excerpt’, array( &$this, ‘lazysocialbuttons_content’ ) );
~~~~~
After “register_setting( $option_group = ‘discussion’, $option_name = ‘lazysocialbuttons_backgroundtype’ );”:
add_settings_field(
$id = ‘lazysocialbuttons_show_excerpt’,
$title = “Show also in categories?”,
$callback = array( &$this, ‘lazysocialbuttons_show_excerpt’ ),
$page = ‘discussion’
);
register_setting( $option_group = ‘discussion’, $option_name = ‘lazysocialbuttons_show_excerpt’ );
~~~~~
After function lazysocialbuttons_backgroundtype():
function lazysocialbuttons_show_excerpt();
{
$show_excerpt = get_option(‘lazysocialbuttons_show_excerpt’);
if( $show_excerpt) $shows = ‘checked=”checked”‘;
echo ‘
Match to the background color of your site for improved display of the spinner (animated gif)
‘;
};
Thanks.
Asaf.
@HT thanks for the suggestions. We hope to continue adding features and functions in coming months.
You could manually insert into a template now following the “Decorated HTML tag with full options” instructions on https://github.com/godaddy/lazy-social-buttons. The only downside is you’d have to have the lazy-social-buttons plugin activated, which forces you to pick Above or Below post content. If I simply added an option for “Manual”, then you could place the buttons anywhere you wanted in your template. Tell you what, I’ll do that right now. Look for version 1.0.5 at http://wordpress.org/extend/plugins/lazy-social-buttons/ later today, and there will be an option for Manual.
and what about the categories/ archives option that i’ve added here. is that included?
@Asaf – WordPress Plugin v1.0.6 includes your suggested
[code]add_filter( ‘the_excerpt’, array( &$this, ‘lazysocialbuttons_content’ ) );[/code]
We didn’t make it an option, it loads everytime, just like the_content.
v1.0.6 also moved the Lazy Social Buttons settings to it’s own page, instead of under Discussion.
After publishing v1.0.6 to add lazy social buttons to the_excerpt, I received complaint that this was undesirable in some cases, such as certain widgets and CPTs.
To remedy the situation fast, we published v1.0.7 to make lazy social buttons on the_excerpt an option.
It was also suggested that we make it an option on which CPTs get the lazy social buttons or an option for which widgets that use the_excerpt get the lazy social buttons. We’ll take this into consideration for future release.
Love the plugin! Thanks a lot.
Hello,
Would it be possible to do as on the Huffington post, so to show the share count in cache for 1 hour or 30 minutes before the roll over to show the relevance of pages to users ?
Thank you in advance,
@Sabrina – Yes, it would be possible to display the share counts in an rolling cache. What it would take is a background process that collects the count every hour or 30 minutes, as you suggested. And then the lazy-social-buttons JS tweaked to display the last cached counts.
Before embarking on this journey, we have a number of other features in the backlog, including more social button options and an option to display the non-FB counts post-rollover. So, yes, your suggestion is possible, but I cannot promise that we’ll be working on it soon. It is open source, however. Maybe somebody will pick it up and do it before we do.
Thanks for the plugin. Works great!
One question: is this plugin going to pass w3c validation testing if I install it?
Doc-type = xhtml 1.0 transitional.
Thanks in advance.
Barry
@Barry – I ran w3c validation on a page with the buttons, and while it wasn’t clean for other reasons, no errors or warning about the odd attributes on the DIV tag. The plugin drops a marked up DIV tag on your site, like this: ‘div class=”lazysocialbuttons” data-float=”left” data-buttons=”facebook,google,twitter” data-twshareurl=”http://www.yourdomain.tld/” data-twtext=”Check out this site” data-shareurl=”http://www.yourdomain.tld/” data-fbhideflyout=”false” data-backgroundtype=”light”‘. I believe that prefixing the DIV attribute names with “data-” is allowed and will pass w3c validation tests.
Hey, I needed the plugin to replace sociable which added huge amounts of markup, not to mention the markup that the buttons themselves were loading in their iframes.
The plugin did his job except one detail: i needed to have a way to disable the plugin for certain pages that i manually chose. Sociable has a “disable social buttons” checkbox on the edit screen.
I have manually added this option to the plugin. If you desire i can share the code.
One other change i did was to replace the static +1 button to the light theme that the active button uses (right now the lsb-preload.png file has red background for the +1 button, where the active button has light background).
Other than this the plugin is extremely useful. Thanks!
Cheers!