Site Speed and Asynchronous Javascript


While I do a lot of development, I don't classify myself as a true developer. I can program and move stuff around on a page and make it work. A true developer understands how to develop the code so that it can be scaled, not take up a lot of resources, load quickly, be easily modified later and still work.

The tough spot that marketers are put in is to both have a very fast web site and still incorporate integrations and social elements that may create dependencies on how quickly your site will load. One such example is social buttons. On Martech, we have social buttons on every single page on the site. So… if Facebook resources load slow one day, it slows down our site. Then add Twitter, Pinterest, Buffer, etc. to that and your site's chances of loading fast are reduced to virtually nothing.

That's known as synchronous loading. You have to finish loading one element before you load the next element. If your able to load items asynchronously, you're able to load items without a dependency on one another. You can drastically improve your site's speed by loading elements asynchronously. The problem is that the out-of-the-box scripts that these companies provide you is almost never optimized to run asynchronous.

You can see what's impacting your page speed by running a test on Pingdom:
pingdom page load

Asynchronous Javascript allows you to write code that tells elements to load after the page is completely loaded. No dependencies! So, your page loads and once it's complete, a script initiates that loads the other elements – in this case our social buttons. If you're a developer, you can read a great article, Lazy Loading Asynchronous Javascript.

Here's a snippet of how to do it properly from Emil Stenström:

(function() {
  function async_load(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  if (window.attachEvent)
    window.attachEvent('onload', async_load);
    window.addEventListener('load', async_load, false);

The result is if these third party integrations are down or running slow, it never impacts your core page content from appearing. If you view the source of our page, you'll see that I'm loading all of the additional social scripts utilizing this technique. The process improved our site's speed seconds – and doesn't choke during the loading. We haven't converted all of our external dependencies to Asynchronous Javascript, but we will.

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.