3

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

enter image description here

enter image description here

<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>
3
+50

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>
  • I added this but it didn't seem to make a difference... i.imgur.com/JE3GyqJ.jpg – Invariant Change Oct 25 '18 at 2:15
  • 2
    @InvariantChange This message means, that your script is only cached for 10 seconds into the browser, which is really short and requires a fresh download of the whole script after the 10 seconds. If you really want to "fix" this, you need to increase this time. But that has nothing to do with async or defer for a script tag ;). – Александр Фишер Oct 26 '18 at 7:55
4

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 ...
  }
  • How to defer scripts in a WordPress Widget is nothing to do with WordPress??? – Invariant Change Oct 24 '18 at 9:53
  • 5
    Nope. Just like a problem with your iPhone while sitting in your car has nothing to do with BMW. – cjbj Oct 24 '18 at 9:54
  • @cjbj is right what he says. – T.Todua Oct 24 '18 at 10:40
  • 1
    Both cjbj and @T.Todua are right. It's just a matter of choice. I personally favour moving the script to a file. I will upvote both solutions. – Remzi Cavdar Oct 24 '18 at 16:34
  • I was wondering if there was a defer widget codeX function or something, but I see your point! – Invariant Change Oct 25 '18 at 1:31
4

@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");

  • I just did this, but it ends up looking like this... i.imgur.com/cZ2Fszc.jpg – Invariant Change Oct 25 '18 at 1:48
  • It needs to stay within the footer widget area! Seems to jump out for some reason. – Invariant Change Oct 25 '18 at 1:57
  • 1
    @InvariantChange I've added needed part for your case in the answer, check again – T.Todua Oct 25 '18 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.