Decrease AddThis Widget's Load Time Through YSlow

Addthis.com provides a popular, free social networking "favorites" widget (you can see an example in the block to the right of this article.) It's a great, fast and easy way to allow people to favorite yoru content on Digg, Facebook, Twitter and so on. Unfortunately, YSlow doesn't like AddThis.

YSlow is a Yahoo-supported tool that analyzes websites to identify what causes them to load slowly. It grades your site from A-F in a number of categories, giving you a heads-up view of where to concentrate your resources to improve page load times.

Why doesn't YSlow like AddThis? Take a look at Yahoo's best practices guidelines. AddThis's JavaScript code is generally included partway through the document, for example in a block, and this violate's Yahoo's Put Scripts at the Bottom guideline.

Solution 1: Move the script!

The easiest thing to do is to move the bulk of your AddThis JavaScript to the bottom of the page, after the bulk of the HTML body. Delete this line from your block, and place it just before the closing body tag:

<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>

Solution 2: Defer the script!

Can't move the JavaScript? Try using the defer="true" attribute in one of AddThis's JavaScript tags. According to Yahoo,

The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute.

For example, the code on my site, originally this:

<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub = "schwong";</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="" width="125" border="0" height="16"></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->

...would change to this:

<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub = "schwong";</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="" width="125" border="0" height="16"></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js" defer="true"></script>
<!-- AddThis Button END -->

7 Comments

Did you enjoy this post? Please spread the word.