Defer Code in Widgets - Page Speed

Question

How to UP Page Speed With Widget Defer?

Is there a way to defer a widget in the footer?

I have an external API in a footer widget which is slowing down my page. It is not needed until the page is loaded.

The caching plugin I use (W3 Total Cache) gives me the option to defer other scripts, but not scripts directly coded into the widget.

What is the best way to manually defer custom code API that is in the WordPress widget area of a footer?

Like This

<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
var cccTheme = {"General":{"background":"#ffffff14","borderWidth":"0","borderColor":"none"},"Tabs":{"background":"#ffffff08","color":"#eee","activeBackground":"#ffffff14","activeColor":"#fff"},"Row":{"color":"#eee","borderColor":"#016ac1"},"Trend":{"colorDown":"#b7b6b6","colorUp":"#50dcb6","colorUnchanged":"#dddddd"},"Conversion":{"color":"#006ac1"}};
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>

Answer 1

Your code shows an inline script, which adds a new script tag to the DOM, which probably slows down your website's loading time. This is not an inline script tag then. Try adding this line s.defer = true; after s.async = true; to add the defer attribute to your script tag. It should then look like this:

var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.defer = true; //add this line
var theUrl = baseUrl+'serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);

This should result in adding a new script tag (named s in your code) to all the scripts the page will load and it should look like this:

<script type="text/javascript" async defer src="https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,LBC,ETH&amp;tsyms=USD,BTC,GBP,CNY"></script>

Answer 2

This has nothing to do with WordPress. It's about browser behaviour in loading scripts. You are right in noting that defer will not work with inline scripts. So, the easiest approach is to add an event listener to the script which will hold up the execution until the page is loaded:

window.addEventListener ("load", function() {
  ... your script ...
  }

Answer 3

@cjbj is right, I upvote him. However, you can try another approach if you want - move that script into a file (i.e. wp-content/your_script.js) and then insert it into widget with defer:

<script src="https://yoursite.com/wp-content/your_script.js" defer></script>

p.s. your specific script looks not professional though(probably not written by javascript specialists). To force it to stay within your specific html area, do this:

• put the script inside div: <div id="my_cripto"><script src.......></div>

• in the .js file, do this modification:

  var embedder = document.getElementById("my_cripto");