The best way to inject scripts in a page for faster performance

Bad Blocking Script

<!-- BAD: blocking external script -->
<script src="//somehost.com/awesome-widget.js"></script>

Good Async Inline Script

<!-- GOOD: remote script is loaded asynchronously -->
<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

The bad example above blocks DOM construction.
The good example above doesn’t block the rest of the site’s content from downloading BUT executes only after CSSOM construction and thus.. only starts loading our widget scripts very late.

Better Async Script

<script src="https://cdn.somewhere.com/3rdpartyscript.js" async></script>
<script src="https://cdn.somewhereelse.com/fancyscript.js" async></script>

Further Reading