Optimize AddThis Social Sharing Script for Faster Page Loading Speed

If you are a blogger, you probably have heard about AddThis, which is a pretty neat third party tool to enable your blogging site to offer various social sharing options at your wish.

View fullsize

Different styles of AddThis Social Sharing tool

However, there is a big catch. Loading additional third party script to your site is very likely to slow down your page loading speed. As Google’s search algorithm evolves to favor websites/pages with Good Page Experience (src1, src2), slower page loading speed will negatively impact your site’s SEO performance.

AddThis’s official integration code snippet looks like below

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5f8c897e5222d6e8"></script>

There is no async or defer attribute on the script tag so the web page needs to wait to download the whole script, parse the script and run the script before it can render anything else after the script tag 🐌

So the first performance optimization you can make is adding async attribute to the script tag so this sharing tool can be loaded into your site asynchronously! async is better than defer in this case because this is a self-contained tool and there isn’t any other functionality depending on it.

An advanced optimization worth thinking about is is it really necessary to show the social sharing sidebar/icons as part of the initial page loading ? In my own experience, it is not. I only want to show this tool if the visitor has been staying on the page for a while (a strong indication that they find the blogs/articles useful). It’s common to find visitors leaving a page within a few seconds if they don’t find the page relevant to their search. This insight means we can further delay the loading of AddThis script till an event that signals the visitors are likely to use this sharing tool.

As an simple example, below is my final optimization code for qingdan.nyc:

window.addEventListener('load', function(event) {
  const script = document.createElement('script');
  script.async = 'true';
  script.src = '//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5f8c897e5222d6e8';
  // lazily load AddThis script 5s after current page is fully loaded
  setTimeout(function() {
    document.head.append(script);
  }, 5000);
});

Some readers might ask why AddThis team doesn’t offer the async version in their official code snippet? My guesses are 1) their engineers are not aware of this trick 2) it’s not in their interest to offer any kind of lazy loading optimizations because it might negatively impact their revenue. As a famous quote in tech industry goes:

If you are not paying for the product, you are the product.

As a freemium product, AddThis company makes money by collecting visitor view/click history across all websites which have installed their tool. Based on my experience of such FREE blogging plugins, they might perform link hijackings (replace amazon.com with their own amazon affiliate link, for instance). The earlier a website loads AddThis’s script, the higher their chance of monetization ability.

Hope this post helps! If you have any question or comment, feel free to leave in the Comment Section below!

---