AddThis Can Cause Your Site To Not Load

Over the last few days, I have run across quite a few websites that seem to never finish loading. After waiting for 20 seconds or more, I give up, realizing that whatever content was on the site wasn’t worth it anymore for me to stare at a blank white browser until it loaded however much longer. Unfortunately for those websites, they are losing traffic that they will never get back.

There was one consistent aspect of each of these websites, though. Whoever developed the sites took a bit of a shortcut when it came to adding social sharing buttons to the site. Instead of adding only the social media support the site was active on and implementing this support locally on the site, they used a third-party social sharing provider, AddThis . AddThis does make an attractive set of sharing icons that seem to work well when they are loaded on the site.

However, when these sites implemented the code, the part they forgot to handle was the case when AddThis.com was unresponsive, which is what caused the issues I was seeing. When the web browser makes a request for a standard JavaScript file, all browser rendering and activity is stopped until the JavaScript file is returned. AddThis was responding somewhat in that it was not immediately returning an error, which would have allowed the website in question to continue loading, instead it was responding as if it were going to deliver the JavaScript file eventually, but never did.

When using third-party JavaScript to handle some aspect of your site, always make sure to use the async attribute on the <script /> tag where you include the JavaScript. This tag will ensure that the rendering of the page is not potentially blocked by a slow-loading resource, and will help visitors get access to your site more quickly in many scenarios.

comments powered by Disqus

Related Posts

Window.Open Causes Browser Compatibilty Issues

One of the things that always annoys me as a web developer is when native browser functions that are accesible from JavaScript do not share the same function signature. One perfect example of this is the window.open function. When you are using non-Microsoft browsers such as Firefox and Chrome, you are able to make a call something like this window.open(url, 'window name', 'dimensions or other settings');. The window name parameter is important because it allows you to open multiple links in the same external window/tab.

Read More

Optimize Magento Time To First Byte

When looking at the performance of your site, waterfall charts are one of the first places you should investigate. The first thing that is represented on these charts is that the HTML for the website is the first resource that is downloaded every time. As a result of being the first resource downloaded every time, this is the logical first place to look to improve the performance of your Magento website.

Read More

Hover Effects in JavaScript?

One of the things that can be annoying when looking at someone else’s code is when a more complex technology is used to solve a problem that can be handled more simply with another method. An example of this is when you utilize JavaScript to implement a hover effect on some elements. I know of one scenario when you would need JavaScript to trigger a hover effect, and that would be when you want to trigger the hover effect with a touch event.

Read More