I’ve come up with a solution of sorts to add async or defer attributes to script source tags, at least for those of you with smaller sites. First, bring a page of your site in your browser and open developer tools to inspect the document’s elements. On a piece of paper, write the numbers 0 – 40 ish in a column(s). Looking at the document through the inspector, begin in the head and carefully count the total number of script tags all the way to the closing html tag. Start your count with the number zero, as you are counting indexes for Javascript. As you do so, make a note on your list as to whether each script tag already has an async attribute (A), doesn’t require one (--), or needs one (N). I would recommend not to include the jQuery CDN for async, and certainly not for defer, as it will likely break site functionality.
Once you’ve made your list, add the index numbers of those script tags requiring an attribute to the Javascript below.
<script>
function addAsync(){
var getscript1 = document.getElementsByTagName('script')[0];
var getscript2 = document.getElementsByTagName('script')[8];
var getscript3 = document.getElementsByTagName('script')[44];
….etc.
getscript1.setAttribute('async','async');
getscript2.setAttribute('async','async');
getscript3.setAttribute('async','async');
…etc.
}
addAsync();
</script>Place this file in the footer input of each page's editor. This script must be at the end of the document, as it only accesses the script tags that come before it. This can be used to add ‘defer’ in the same way.
Unfortunately, you will probably have to do this for each page, as content will differ.
