Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
1  
That TagMan site looks like a joke. Yes, the +1 buttons take a while due to its unnecessary large file size, I would give this article a read: seifi.org/javascript/…. Don't waste your time and money on that TagMan garbage. –  Tyler Crompton Dec 31 '11 at 10:44
    
Agree, if you really care about the loading time for these 3rd party thing, load it at page end –  Eric Yin Jan 11 '12 at 14:02

2 Answers 2

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.

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.