Content Marketing, Search Marketing, , Technology

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:

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 = 'http://buttondomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
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.

Leave a Reply