Asynchronously Javascript Loading for Social Button

Social buttons are most common methods to sharing your post to social networks like Facebook, Twitter, Google+. But after added your favourite social network script, be it like buttons or twitter widgets to your site or blog and then you notice that the load time of you page went drastically down. What happened?Let me start with two statements I feel strong about:

Measuring page load times is useful because it gives you insight in an important dimension of the user experience.

In order to gain useful, actionable insight from your web performance data, you need a very good understanding of how the data is collected and what exactly is measured.

Unfortunately, there’s no standard when it comes to the JavaScript code itself — some, like Google+’s +1 button are fairly sophisticated, with different ways to load and render the button, and others like LinkedIn, offer just a simple JavaScript URL to fetch.

Asynchronous JavaScript

The solution: Asynchronous JavaScript

There are solutions to this problems out there and most social networks does now offer asynchronous versions of their code. But I couldn’t find a proper guide that covered more than one social network so here I am going to explain how the ones we normally use works. This article is about loading third-party asynchronous scripts after onload, yes, but the key message really is: make sure you truly understand your web performance data.

Twitter Tweet Box

The Tweet Box/Button always started loading after onload, check out twitter.com/buttons. The Tweet Button by Twitter is loading in a blocking way so it is slowing down the page. It uses basic HTML elements and transforms them with a bit of JavaScript. We can load the JavaScript in a non-blocking way to give the user a faster page loading experience. Below is original code of Tweet Button:

Google+ Button

Combine and make Google+, Twitter, Facebook Like button loading asynchronous

With the asynchronous technique that I’ve written above, you can make LinkedIn, StumbleUpon … working like it too. Facebook Like, Tweet, Google+ are most popular on integrable social buttons for your website, so I’m trying combines them into more efficient, organized, and load faster than normal.

Another Solutions

Use jQuery to render social buttons

jQuery has ton of plugins allow you load third-party scripts asynchronous, especially social button. If you don’t know too much about it, let’s check my previous post: , you will find some jQuery plugins that load social button async.

HTML5′s async Script Attribute

HTML5 introduces the async script attribute which helps to load scripts asynchronous. In the specifications you can also find another attribute, the defer attribute, that is very similar to the async attribute but it has another purpose.

Conclusion

Loading third-party scripts async is key for having high performance web pages, but those scripts still block onload. Take the time to analyze your web performance data and understand sometimes loading third-party scripts async is not good enough. Research about increase website performance methods and combines them into your website always most right solution.

Do you know? Google is cracking down on mobile-unfriendly sites. If your site isn’t optimized for mobile, you’re losing a whole chunk of users on the go who will quickly look elsewhere if your site does’t load on their device. Here’re 3 fantastic plugins that will automatically optimize your WordPress site for all types of mobile devices. …

There are dozens of WordPress invoice plugins which you can use to turn WordPress into an excellent invoicing and billing system. They help you to generate, edit and send customized and itemized invoices to your clients without having to leave your WordPress site’s control panel. …

About NARGA.NET

NARGA is a blog dedicated to share top quality open source resources for web developer and web designer weekly (then daily asap). As a web designer or developer, you’ll find some of the best free icons, stock photos, fonts, free WordPress themes, userful WordPress plugins, best jQuery plugins, CSS3 snippets, HTML5 standard and a lot more …

Connect with Us

This site is licensed under Attribution-NonCommercial-ShareAlike 3.0 license. Feel free to change, reuse modify and extend it. Some authors will retain their copyright on certain articles. NARGA.NET utilizes affiliate links and may receive a comission if you click an affiliate link and make a purchase.