Asynchonous Loading of Javascript

Question

I am trying to load all the Facebook/Twitter/Google paraphernalia on my pages asynchronously, in order to stop them slowing down the page loading. I thought I had the right code to do it, but it seems to be not working.

All the bits of code are held together in a php include like this:

    <!-- Facebook -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<!-- Google +1 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<!-- Twitter -->
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

<!-- Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

When I test a page on webpagetest.org the page load time is about 5 seconds and I can see that there is a shed load of requests to facebook et al occurring before the page is completed. When I delete the scripts the page load comes down to a more respectable 1.9 seconds.

Is it me?

Your question is, "is it me?". I don't know what you mean, so I'm just going to guess yes with a 50% chance of being right. — Waleed Khan
– Waleed Khan, Commented Aug 17, 2012 at 12:55

Ranjan Sarma · Accepted Answer · 2012-08-17 12:58:06Z

1

You can do one thing:

<html>
    <head>
    </head>
    <body>
      ....
      ....
      <script src='http://....'/>
      <script src=''/>
    </body>
</html>

Which will load the script immedeately after it loads the page's important contents. You can prioritise your contents and scripts to be loaded this way.

answered Aug 17, 2012 at 12:58

Ranjan Sarma

1,5955 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ranjan Sarma Over a year ago

And yes if you want to write javascript inside the script tag you can write the script inside the tag and ignore the 'url' attribute.

Paul Osborne · Accepted Answer · 2012-08-17 13:00:51Z

1

You could also try using the javascript defer attribute:

<script defer="defer"></script>

answered Aug 17, 2012 at 13:00

Paul Osborne

1,5701 gold badge10 silver badges11 bronze badges

Comments

Yaron U. · Accepted Answer · 2012-08-17 13:02:08Z

1

for modern browsers you can also use

<script type="text/javascript" async src="..."></script>

answered Aug 17, 2012 at 13:02

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

Asynchonous Loading of Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related