You are hereBlogs / dave's blog / Decrease AddThis Widget's Load Time Through YSlow
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 -->
Hi, you mention about the script will slow the load time. Since firefox don't support the Defer="true" attribute will it affect the load time for firefox?
Like you say it won't affect the load time in FireFox. It should give you a better ranking on the Yslow indicator, though. If you'd like to speed it up in FireFox, place the JS at the bottom of the HTML body.
Is there a way to load the addthis script once it's clicked?
I am using the Drupal Addthis module. I tried adding defer="true" but it doesn't loads the script at all. Please help
Hi Anshul, does it load when you remove the defer=true parameter? If not, there is probably an error somewhere else in your HTML.
Post new comment