Social sharing buttons play a big part on the web today. They are used to drive traffic to the site, and if done correctly can be very successful. Unfortunately, the loading of these buttons has its downsides on performance. Having many social sharing buttons on your site can slow it down because it will block any other scripts from loading while it is waiting for the document to render the social media from the different domains.
There are some great samples on the site that run through an onload demo, hover demo, and scroll demo. In this post we are going to run through a scroll demo - this is pretty similar to lazy loading images and only loads the buttons when the user's viewport comes into place. In order to add it to your page, you will first need to add a reference to the script. Next, create an element with the class socialite and a class like twitter-share to specify the social network and type of widget.
In order to get it to simply load asynchronously, all you need to do is call it like so:
However, as we are going to run through the scroll demo we need to do things slightly differently. At the bottom of your page, include the following code.
In order to view a working demo, please click the following link. There is now no excuse not to load these social sharing buttons asynchronously - no more PageSpeed loading scores being affected by these buttons!
Add your comment