AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

Optimizing AddThis Performance

We’ll occasionally get questions about how our tools are loading on the page. Specifically, we will get questions about caching, expirations, and asynchronous loading. Our developers are always looking for new ways to not only improve the load times of our tools, but to ensure that our existing users will continue to have the latest version of the AddThis code at all times, without requiring future code changes.

Overview

The main AddThis JavaScript (addthis_widget.js) code only has a 10 minute TTL (expiration), to allow us to release new versions of our tools without requiring users to change their code. We use an unversioned URL with only a 10 minute TTL, so that browsers have to revalidate regularly. That way, when we release a new version, most of the web gets it right away. This also ensures that there aren’t multiple versions of our code on the web, which would be problematic for our users and helps with providing a cohesive experience with our tools.

If the AddThis code is already in the browser’s cache, a 304 Not-Modified status is sent, instead of having to download it again every 10 minutes. The 10 minute expiration would only apply to the addthis_widget.js script, which has a fairly small size. This main script would then make requests to load all of our other assets, which are versioned and have longer cache TTLs. These requests come from a global CDN (Cloudflare), which is very fast and only a few hops away from most users in the world.

Asynchronous Loading

Normally, AddThis executes initialization code as soon as it arrives on the page. While we strive to make this as efficient as possible, load times of more important resources can be affected. To optimize for performance and load time, AddThis can be loaded asynchronously, such that no assets are loaded and only the most essential processing occurs.

To enable asynchronous loading, add the “async” attribute to the addthis_widget.js script tag. Here’s an example, just be sure to add in your AddThis profile ID, which can be found within the AddThis Dashboard:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[Your Profile ID]" async="async"></script>

This will prevent all AddThis assets from loading, except for the initial script. Once AddThis has detected that the page has finished loading, the remaining AddThis assets will load.

The addthis_widget.js script will begin loading whenever it’s parsed by the browser. If you’re concerned about your page load time, you can place the script at the bottom of your page.

Page Speed / Performance Monitoring

According to comScore, our tools reach over 97% of the total Internet population in the United States. It’s important to note that performance monitoring tools only take into consideration the cold-cache and no cookie experience that very few users will have, due to our reach.

Optimizing AddThis Performance
2.4 (48%) 5 votes

Was this article helpful to you?