The async attribute is available in all modern browsers as well as Internet Explorer 10+.
The article "Can I use async attribute for external scripts" lists all browsers which support the async attribute on script tags. Current worldwide support is 80%.
The impact on rendering performance is best described by this two web page tests:
- Firefox with support for async - first rendering on the page after 3 seconds
- IE9 without support for async - firs rendering on the page after 7 seconds
Steps for further improvements:
The injected script technique allows the widget.js file to load after the CSS is downloaded, parsed, and the CSSOM is constructed. It loads in a non-blocking async way and runs when it's available, without delaying a page's loading.
The article "Script-injected "async scripts" considered harmful" has a good and more detailed explanation about the drawbacks of this technique.
- Use this technique if a wide range of legacy browser support is needed, including older Internet Explorer 8 & 9
- Should a large amount of CSS block the fetching of the widget.js file, place the above code block before any CSS files in your document.
The blocking script technique is an alternative that allows the widget.js file to load immediately. It loads in a blocking synchronous manner and runs when CSSOM is constructed
This implementation is only recommended as a last resort. Blocking scripts are bad for web site performance as they block the rendering of the page until the script was fully downloaded and executed.
Should this last resort for loading widget.js as a blocking script be unavoidable, it is recommended to include it right before the closing </body> tag.
Further Reading (external articles)