AddThis is a very popular social media tool that allows you to add buttons to your site for visitors to both share, follow, and even receive recommendations on your content. The downside is that AddThis can be incredibly slow and there is not much that can be done to optimize the script its self. While the developers have made great strives in recent times to improve the load time, such as reducing the total size of assets, and using CloudFlare to serve the files there is still more to be done on your side to further improve your load time.

AddThis has also made it to where you can change the way it is loaded by adding Asynchronous loading but in addition to that you still need to follow the best practices on handling the placement of scripts.

Remember that while AddThis is lighter you should still only load it when needed while it is tempting to simply load it everywhere all the time think carefully on your needs, where its actually going to be needed and if you need it at all on your website.

To begin we need to look at your script as a whole if you are placing the script in the header you have already made a grave mistake by loading it in the header you are preventing your website from loading as the script is now render blocking. The best place to place the script is right before the closing </body> tag. This will prevent the script from blocking the rendering of the rest of your website.

In addition the script can be optimized from the way its written make sure the script is over SSL (for no reason other than security) and you will want to make your script tag look like this.

<script type=”text/javascript” src=”https://s7.addthis.com/js/250/addthis_widget.js#async=1″></script>

As you notice there is a #async=1 this will prevent the rest of the AddThis assets from loading and will only load the initial script. The reason we allow this is because the script still has some important resources to be served on the initial load.

When you are ready you can call the script with a JavaScript function.
function initAddThis() {
addthis.init()
}

// Load the rest of AddThis
initAddThis();
You could place this immediately after the page after the DOM content has loaded and therefore off load the remaining assets in order to improve the load time even more.

Now your website should be considerably faster in terms of rendering time while the total page weight and the testing tools will still ding you the optimization of this tool will lead to a considerable increase in performance.

LEAVE A REPLY

Please enter your comment!
Please enter your name here