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 -->
6 Comments
How much of the slow speed is attributed to the Add This script
Submitted by JerseyDisplayCase (not verified) on
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
Submitted by Dave Nugent on
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.
Could you?
Submitted by CJ (not verified) on
Is there a way to load the addthis script once it's clicked?
Addthis Module
Submitted by anshul agrawal (not verified) on
I am using the Drupal Addthis module. I tried adding defer="true" but it doesn't loads the script at all. Please help
Without defer?
Submitted by Dave Nugent on
Hi Anshul, does it load when you remove the defer=true parameter? If not, there is probably an error somewhere else in your HTML.
headphoneon
Submitted by heigilr2010 (not verified) on
beats by dr.dre
dr dre headphones
bose in-ear headphones
Monster beats
monster headphones
bose headphones
bose earphones
Bose Headpones
Sennheiser
Monster Beats
headphones
headphones headphones
earphones
beats by dre dre
beats by dre
beats dre
noise reducing headphones
best headphones
noise cancelling headphones
monster cable
Add new comment