Website

AddToAny Asynchronous Loading – Improve Load Time Of AddToAny

In our previous article, we went over how to asynchronously load AddThis which greatly improves your load time so long as you do it correctly and pay attention to the use of the script. In this article, we will be covering on how to do the same thing but with AddToAny another popular sharing tool that is wildly popular on WordPress.

While AddToAny is considerably lighter than AddThis it’s just as guilty when it comes to affecting your load time through the use of large scripts that pull in too many assets that are not needed for the initial load.

To begin recall from the previous article where we went over on how to move AddThis to the footer of the page in order to remove the render blocking aspect of the script. AddToAny is actually the same process move this line until its right before the closing </body> tag. You want it after everything else to avoid any and all possibility of the script being render blocking.

<script src="//static.addtoany.com/menu/page.js"></script>
Then make sure to keep your div tags that it gives you in their desired positions. After the script is moved to the footer you need to set the script to load asynchronously which is much easier than AddThis but there are a number of ways to go about doing so. To do this in AddToAny simply change the above script to look like this.
<script src="//static.addtoany.com/menu/page.js" async></script>
 As you can see the script has an added async tag which will tell the browser to load it with async. However, some formats may not support this method such as Blogger in which case you need to set it to async=”async” where the async tag is set to its self in order to validate properly. Some platforms or browsers won’t support the async tag at all in which case you can fall back to JavaScript.
If you are stuck in an area where JavaScript is required to asynchronously load scripts then you will need to use the below function to do so.
// Load AddToAny script asynchronously
(function(){
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.async = true;
    a.src = '//static.addtoany.com/menu/page.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);
})();

As you can see the script is being loaded with JavaScript with an a.asyc = true tag which reads to load the script asynchronously. The downside of this method is you are creating additional inline JavaScript to load more JavaScript which is an annoyance but sometimes its your only option.

Tags
Show More

Scott Hartley

Scott Hartley is the developer and owner of The Daily Exposition who is also a tech enthusiast and writes the majority of content found on the website. When he isn’t keeping up to date with the latest and breaking technology news, he is working on his own WordPress plugins, themes, or out exploring the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close
Close