Delay the Social Gratification

December 21, 2012 Link to post  Permalink

Delayed Gratification Cartoon I was trying something out with this blog to speed up the loading of the pages. What I was measuring didn’t really make a large difference in the page load time, but I did notice a huge amount of time spent loading all of the social pieces of the page - Disqus, Twitter and Google Plus.

Since I’m not using JQuery on this blog, I don’t have an easy $(document).ready() way to run all these pieces after the page has loaded, yet just putting the script into the page causes it to run inline and delay the page being ready for interaction.

<script>
// Google Analytics
// Disqus code
// Twitter
// Google Plus
</script>

WebPageTest reported that the page was taking between 3.5 and 4 seconds to get to the ‘loaded’ state, with 2 of those seconds being the social pieces.

With a quick rearrangement of the code to put the initialization inside a window.onload() function call, I get code that looks like this:

<script>
window.onload = function() {

  // Google Analytics
  // Disqus code
  // Twitter
  // Google Plus

}
</script>

Now the page load time is recorded as being between 1.5 and 2 seconds, with 2 seconds more work being done after that point.

Caveats

One of the features you get with JQuery’s ready() method is that you can have many of them. When you strip that away, you have to be more careful to get your entire code into a single unload() function definition. For my blog, this is really easy, because there isn’t much code to disrupt, but for an non-trivial application, this isn’t likely to be an option.

Summary

Delaying the loading of scripted pieces that are not needed for the initial rendering of the page can significantly improve the measured load time of your pages. If you aren’t using JQuery, then you have to remember how to use the old-school methods of getting things done.