Adding Google +1 Button Slows Page Load Time

Question

This article says Google +1 tags can add a second to page load time, which means a 10% decline in visitors.

The article authors say they use smart tag loading to reduce page load time.

Does anyone know of an open source method to do this rather than a proprietry method?

Answer 1

While tag management has its value for large sites/organizations that may be using lots of tags for various purposes (web analytics, customer tracking, ad networks, social media integration, etc.) from disparate sources, this is a separate issue from smart javascript loading. You can certainly load your JavaScript optimally without using an expensive tag management system like Tagman or Ensighten.

There are 2 components to what I'd consider "smart tag loading". One is loading tags as needed, which means that you're not just embedding all tags in the layout and loading them on every single page. This is fairly easy to do. The other (slightly) harder component is loading the JavaScript in a non-blocking manner without causing race conditions due to dependencies

To do this, you can use the defer or async attributes of the <script/> element or use JavaScript to load the tags dynamically:

• defer will load in a non-blocking manner and only run the code once the page has finished loading, typically in the order they appear on the page.
• async and dynamic loading with JS will both run the code as soon as it's downloaded, so execution order is not guaranteed, and it will not wait for the page to finish loading.

Some additional complications include:

• In IE, defer will not necessarily execute in the order they appear on the page.
• async is an HTML5 attribute that has limited browser support.
• All 3 techniques will block the window.onload event, which extends the page load time.

One work around for the latter is to use a timer with a delay of 0. This won't guarantee that the tag is executed before or after window.onload, just that it doesn't block the load event.

For the Google+ tag, you don't need to worry about execute order, so you can use either defer or dynamic loading, depending on whether or not you care about blocking window.onload. If you have UI-related JS that has to be triggered on onload, I would probably use the timer technique to minimize the delay.

Answer 2

Google recommends the following:-

<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>

There is also a useful article discussing the topic at phpied.com, you can also find some more information on defering javascipt loading for social media buttons with this query