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.
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.
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:
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:
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?
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:
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.
We Can Have Our Cake and Eat It, Too
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.
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.
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.