Thursday, April 13

Load Blogger External JavaScript Asynchronously

Load Blogger External JavaScript Asynchronously

<script></script> tags referes to an external resource in the middle of your HTML codes which hang the loading of your page while your browser gets the missing script.


Scripts located within the head and body section of a page can cause page load delays as the browser tries to load and execute these script(s) even before the actual content of the page. This is why these scripts are referred to as render blocking JavaScript. One way to resolve this issue is to move all your scripts to the footer of the page, but in the event that this is not possible, another option is to add a async attribute to your script tags.

Follow These Steps To Convert Any JavaScript to Asynchronous

Use below asynchronous codes for JavaScript 

<script type="text/javascript">
(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://domain.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>

Replace every script looks like below codes with the above async codes
<script type="text/javascript" src="http://domain.com/script.js"></script>