skip to content
  • Optimize the Performance of Widgets, Buttons & More

    by on February 7, 2011 97 Comments

    A recent post by web site performance thought leader (and user experience expert as a result) Steve Souders reminds me of a vital nuance that’s not even clearly expressed in the popular Yahoo! performance rules; namely render the page first, THEN add JavaScript. One of the largest challenges with this objective is addressing the performance of 3rd party resources. With social media demanding more widgets, plugins, badges and buttons etc available every day and a lack of awareness on the part of developers about how to make sure that their buttons are as effective and valuable as possible, sometimes performance concerns are overlooked.

    Ask yourself, what is the value of lost visitors due to a slow loading web site? There are literally page views “locked” away in those slow loading pages of your web site that can be “unlocked” with a few quick changes. Simply put, having numerous 3rd party elements in your site can ultimately be its downfall.

    For example, simply adding the Facebook fan box will dramatically slow a page in many cases, slow down the browsers due to large memory usage and usually lots of additional download time making the page “not ready” until everything is downloaded. So if your goal is to optimize your site for social media and make sure that your bounce rates are low, time on site is high, page views per visit grows and Google has 1 less reason to rank your site poorly, keep reading.

    So, let’s take a look at the implementations you need for your site that make sure your visitors see your content before your widgets. From an idealistic point of view the “start render time,” or when the browser actually starts to paint the page, these tips will not bring this value as close to zero as I would like, however they will definitely improve user experience. Keep in mind that there are numerous other steps to be taken or possibilities, but we’re focusing on reducing the negative impact of widgets characterized above. What follows is HTML5 code for various cases:

    Digg:
    After working with Digg on some their latest improvements, I’m happy to share an implementation that is much more user-centric; if you have multiple buttons per page, this is especially valuable:

    <a class="DiggThisButton DiggThisButtonMedium"
            href="http://digg.com/submit?url=http://domain.com/&amp;title=Post%20Title"
            rel="nofollow external"><img src="http://widgets.digg.com/img/button/diggThisMedium.png"
            width="50" height="61" alt="" /></a>
    

    Then, before </body> embed the following only once and multiple buttons will still work in a single page:

    <script src="http://widgets.digg.com/buttons.js"></script>
    

    This implementation allows the page to render and then draws the buttons later.

    StumbleUpon:
    SU, has recently updated their buttons, which is good, but what follows is not truly asynchronous and definitely not as optimal as the Digg button above because of the multiple JS embeddings per page, at least this implementation won’t block the page render. First position the button with a unique ID wherever you wish:

    <div id="id"></div>
    

    Then for each button make sure that an embedding exists above </body> so the button will be rendered in the location:

    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http%3A%2F%2Fdomain.com%2F&a=1&d=id"></script>
    

    LinkedIn:
    The LinkedIn button implementation is also not perfect, but a carries a smaller total payload than the StumbleUpon buttons when there are multiple buttons per page:

    <script type="in/share" data-counter="top"></script>
    

    Then at the bottom of the page a single JS embedding with power all of the buttons:

    <script src="http://platform.linkedin.com/in.js"></script>
    </body>
    

    Tweetmeme:
    I still recommend this service because it also generates a usable button for feeds you may syndicate, while the official twitter button still does not. The best way to use this widget is via <iframe> as iframes do not block the render of a page, too many though can still slow down a page render or cause other anomalies in some browsers. Anyway, here’s what that implementation looks like:

    <iframe scrolling="no" height="61" width="50" frameborder="0"
            src="http://api.tweetmeme.com/widget.js?url=http://yoururl.com/&amp;style=normal&amp;source=yoururl&amp;service=bit.ly"></iframe>
    

    Twitter:
    The official twitter button works pretty well, it doesn’t have retweet data for everything ever shared on your site as they only started gathering that data when they launched the button (so use tweetmeme for those older stories if you can), but it does have a reliable sharing experience for users, just make sure that if you use the following implementation:

    <iframe class="twitter-share-button" allowtransparency="true" frameborder="0" scrolling="no"
            src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%domain.com%2F&amp;via=twitterhandle&amp;text=Post%20Title&amp;count=vertical"
            width="55" height="63"></iframe>
    

    You can of course use a technique similar to LinkedIn or Digg, but the JS will actually create an <iframe> anyway, so this approach is more performance as it won’t block the page render and yields the same net result. For those using @anywhere to add hovercards and other twitter functionality to their sites, the technique that apples for Diff of LinkedIn can be applied.

    ShareThis:
    Among the most popular buttons available, their implementation has dramatically improved as the total payload for JavaScript has been reduced, although the script loads synchronously still unfortunately. On the positive side, the buttons are decoupled from the scripts that embed them. The instructions recommend adding the scripts to the <head>, but I recommend adding them before </body> or after <body> if you’re having any problems.

    <span class="st_sharethis"></span>
    <script>
            var __st_loadLate=true; // if __st_loadLate is defined then the widget will not load on domcontent ready
            stLight.options({
                    publisher:'12345',
                    tracking:'google',
                    embeds:'true'
            });
    </script>
    

    And of course, activate the button after the content is displayed by placing the script that powers the widgets on the page as shown:

    <script src="http://w.sharethis.com/button/buttons.js"></script>
    </body>
    

    Google Buzz:
    Implementing the Buzz button like many others that are reasonably well done allow for a single JS embed to support multiple button instances in a single page:

    <a href="http://www.google.com/buzz/post" class="google-buzz-button" title="Google Buzz"
            data-message="Here's Buzz!" data-url="http://www.google.com/buzz" data-locale="en"
            data-button-style="normal-count"></a>
    

    Although not asynchronous the JS embed can still be placed above the </body> tag as shown:

    <script src="http://www.google.com/buzz/api/button.js"></script>
    

    Google Friend Connect (AdSense & Gadgets):
    It’s critical to remember that you only need to embed the Friend Connect JS library once per page. If you’re minifying the file be sure to make sure your cache is frequently updated as the code is changed quite often and an old cache may cause anomalies on your site. The reason why this tip is notable is that this implementation supports AdSense as well as all of the other Gadgets with a single embed, so if you have multiple AdSense placements in a page, this is the way to go:

    <body>
    <script src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
    

    Specify where the placement will appear using a div with a unique ID:

    <div id="id"></div>
    <script>
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderAdsGadget({
            id: 'id',
            height: 90,
            site: 'XXXXXXXXXXXXXXX','prefs':{"google_ad_client":"ca-pub-XXXXXXXXXXXXXXX",
                    "google_ad_host":"pub-XXXXXXXXXXXXXXX","google_ad_slot":"XXXXXXXXXX","google_ad_format":"728x90"}
    });
    </script>
    

    Then you can obviously embed numerous other placements or gadgets all powered by a single JS embedding. Unfortunately the JS embedding is not asynchronous, but at least it’s better than having lots of AdSense JS calls throughout a page or even additional calls for your gadgets.

    Facebook Share / Facebook Like / Other Facebook plugins:
    Use the XFBML implementation described on the various plugin pages; this implementation does interfere with page render and positioning it after the <body> tag means that each of the plugins used in a given page will load at the same time as soon as the scripts have loaded. No need for multiple scripts, which have to be downloaded repeatedly and slow down the page render etc etc.

    Add support of the XFBML markup to the document:

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
            xmlns:x2="http://www.w3.org/2002/06/xhtml2"
            xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    

    The embed itself:

    <body>
    <div id="fb-embed"></div> 
    <script> 
    window.fbAsyncInit = function() { FB.init({appId: 'XXXXXXXXXXXXXXX', status: true, cookie: true, xfbml: true}); };
    (function() {
    	var e = document.createElement('script'); e.async = true;
    	e.src = document.location.protocol +
    	'//connect.facebook.net/en_US/all.js';
    	document.getElementById('fb-embed').appendChild(e);
    	}());
    </script>
    

    Then place the Like Box itself where you desired:

    <fb:like profile_id="XXXXXXXXXXXX" href="http://domain.com/" width="450"></fb:like>
    

    Meebo Bar:
    Meebo has actually taken a number of strides (with the consult of Steve Souders as well) to improve the performance of their meebo bar; still it’s something more for users to download and more JavaScript to be run in your visitor’s browser, but I can now actually recommend this for publishers looking to increase engagement and create new monetization opportunities for their site. Their implementation is fully asynchronous and has a number of optimizations compared to earlier version. The latest implementation documentation at their site is the best reference.

    OpenX:
    The OpenX team has promised some an asynchronous embedding code for their single page call (SPC) implementation, which basically means that multiple ads in a given page can be requested without blocking the page render and are requested at once instead of sequentially, however for the moment, this is the best implementation I can recommend. It also uses iframes to alleviate render-blocking issues as well some:

    I recommend adding this 1.3K of (closure compiler optimized) code directly in the <head> of the page to power the widgets. It’s small enough that it is faster than making another HTTP transaction (DNS lookup, connect, download, execute etc) for this purpose, the original file is here:

    <script>var adPositions=[];function writeAdDiv(a,b,c){document.write('<div class="banner" id="'+a+'" style="width:'+b+"px; height:"+c+"px; line-height:"+c+'px;">&nbsp;</div>');adPositions[a]=a}function OpenX_findPosX(a){var b=0;if(a.offsetParent)for(;a.offsetParent;){b+=a.offsetLeft;a=a.offsetParent}else if(a.x)b+=a.x;return b}function OpenX_findPosY(a){var b=0;if(a.offsetParent)for(;a.offsetParent;){b+=a.offsetTop;a=a.offsetParent}else if(a.y)b+=a.y;return b} function OpenX_moveAbove(a,b){var c=0;if(a.offsetHeight)c=a.offsetHeight;else if(a.clip&&a.clip.height)c=a.clip.height;else if(a.style&&a.style.pixelHeight)c=a.style.pixelHeight;if(window.XMLHttpRequest)if(!document.all){b.style.paddingTop="0px";b.style.paddingBottom="0px"}if(c>0)b.style.height=c+"px";a.style.left=OpenX_findPosX(b)+"px";a.style.top=OpenX_findPosY(b)+"px"} function OpenX_positionDivs(){for(var a in adPositions){var b=a+"-Hidden";if(document.getElementById){targetZoneDivID=document.getElementById(a);sourceZoneDivID=document.getElementById(b)}else if(document.all){targetZoneDivID=document.all[a];sourceZoneDivID=document.all[b]}else if(document.layers){targetZoneDivID=document.layers[a];sourceZoneDivID=document.layers[b]}targetZoneDivID!=null&&sourceZoneDivID!=null&&OpenX_moveAbove(sourceZoneDivID,targetZoneDivID)}}window.onresize=function(){OpenX_positionDivs()};</script>
    

    The SPC implementation is vital in making sure that the execution and transaction times are as small as possible. So create the slot(s) in the page as follows:

    <body>
    <script>var OA_zones = {"728x90_Leaderboard" : 1}</script>
    <script src="http://openx-server.com/spcjs.php?id=1"></script>
    

    Then place the slots in your HTML as appropriate:

    <script><!--//<![CDATA[
    	writeAdDiv('button1', 728, 90);
    //]]>--></script>
    

    And finally, in the footer of the document, make the call to draw the ad in the appropriate slot:

    <div id="button1-Hidden" style="position:absolute;left:-1000px;top:-1000px;">
    	<script>OA_show("728x90_Leaderboard");</script>
    </div>
    </body>
    

    Because of the various use cases and implementations supported I do recommend OpenX, but depending on the size and needs of your site/organization Google’s offerings are far more robust and will eventually perform better than they do now.

    Google DoubleClick for Publishers (formerly Google Ad manager):
    If your site is monetized with AdSense as well as various types of ad formats or networks, Google DFP is a great solution, however for now, it actually creates a negative experience for users depending on the quantity and type of ads being displayed. Instead of embedding the snippet in the <head> of the page, instead embed it after <body> and make sure note that this implementation uses the single request command to make the render more responsive:

    <body>
    <script src="http://partner.googleadservices.com/gampad/google_service.js"></script>
    <script>GS_googleAddAdSenseService("ca-pub-XXXXXXXXXXXXXXXXX");GS_googleEnableAllServices();</script>
    <script>GA_googleAddSlot("ca-pub- XXXXXXXXXXXXXXXXX ", "slot-name");</script>
    <script>GA_googleUseSyncSRARendering();GA_googleFetchAds();</script>
    

    Then place your ad slots as you normally would in your page template. I’m definitely looking forward better performing implementation for Google DFP, ads are not optional for many publishers today and ironically they are actually causing publishers to lose money.

    BuySellAds:
    If you monetize your site using BSA, and still have not switched to their asynchronous embed code, make sure you do, your users will appreciate seeing the content they’re after without delay.

    <script>
    (function(){
      var bsa = document.createElement('script');
         bsa.type = 'text/javascript';
         bsa.async = true;
         bsa.src = '//s3.buysellads.com/ac/bsa.js';
      (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();
    </script>
    

    If you don’t already use the asynchronous snippet, make sure you do!

    Google Analytics:
    Google’s asynchronous tracking code has been out for some time, I recommend it for lots of reasons, like:

    • More accurate stats
    • Non-blocking user experience
    • Simplified implementation and optimized execution
    • Capture partial page views

    So this is what the implementation looks like:

    <script>
    var _gaq = _gaq || [];
    _gaq.push(
    	['_setAccount', 'UA-XXXXX-X'],
    	['_setDomainName', 'domain.com'],
    	['_trackPageview'] );
    (function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);})();
    </script>
    </head>
    

    Woopra:
    Woopra Analytics not only has a decent WordPress plugin, they also now have an asynchronous tracking code implementation (which is not yet available in the WordPress plugin at the time of this writing). Being that it’s actually asynchronous, I recommend embedding it in the <head> of the page manually if you want to capture partial page views:

    <script>
    (function(){
    	var wsc=document.createElement('script');
    	wsc.type='text/javascript';
    	wsc.src=document.location.protocol+'//static.woopra.com/js/woopra.js';
    	wsc.async=true;
    	var ssc = document.getElementsByTagName('script')[0];
    	ssc.parentNode.insertBefore(wsc, ssc);
    })();
    </script>
    </head>
    

    Wrapping Up:
    For those buttons, widgets, services etc not covered one of the last remaining rules of thumb (within the scope of this discussion) is to put all scripts that are not essential for functionality of the site (like navigation, but hopefully that’s not the case) above </body> so that they’re not directly interfering with page render. Remember all of the CSS and JS files that exist in <head> must be downloaded and executed before the page can start to render. Note: your mileage may vary, but it’s possible to realize asynchronous performance of some scripts by adding the attribute async to the <script> tag with the value true. Keep in mind that this make break a script so test for yourself.

    There are numerous other widgets, advertising networks, statistics and analytics services available, if you don’t see a tip above for the one you use, then reach out to them and find out if they have any performance tips (like asynchronous JavaScript code). Also, don’t forget that if you are able to minify scripts to reduce HTTP transactions, which will be a huge performance win for scripts that support it.

    Bonus Tips for WordPress Users:
    jQuery is used in countless plugins and themes. It’s often out-of-date and every new release includes bug fixes and more importantly performance improvements. The following snippet is useful for your header.php file, it will make sure that your site is always using the latest version of jQuery without having to modify your theme. You’ll also benefit from Google’s content delivery network and using a hostname other than your domain name, meaning that the file will be pipelined (downloaded in parallel) with the other files in the <head> of the page which is faster:

    <?php
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    wp_enqueue_script('jquery');
    ?>
    

    Similarly, if you have extensive use of swfobject in your theme/plugins, a similar optimization can be applied thusly:

    <?php
    wp_deregister_script('swfobject');
    wp_register_script('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js');
    wp_enqueue_script('swfobject');
    ?>
    

    So again, until jQuery reaches version 2 or swfobject reaches version 3, you will never have to modify this code!

    Have a tip I didn’t mention? Let me know in the comments!

This entry was posted on Monday, February 7th, 2011 at 2:08 pm and is filed under Usability, User Interface / Experience, Web Development, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.

  • What do you think about AddThis for their performance? They offer asynchronous loading and tracking as well. I use it and have been pretty happy with the results.

    • by Frederick Townes
      on February 7, 2011 at 5:45 pm

      Thanks Scott! I haven't used that widget in some time. It does look like they too have made some strides, very nice: http://www.addthis.com/help/optimizing-addthis

    • by Scott Wyden Kivowitz
      on February 7, 2011 at 5:47 pm

      my pleasure!

    • by chipcopeland
      on February 9, 2011 at 11:24 am

      I inserted the code provided in the link above in the header.php file of my WordPress site. Is this the correct place to insert it?

    • by Frederick Townes
      on February 9, 2011 at 5:09 pm

      No, if you can, having the JS embed before </body> is ideal (save for minifying or an asynchronous embedding).

    • by Joan1911
      on March 30, 2011 at 4:10 am

      Thanks for adding this Frederick, and Scott mentioning.

      I am busy cleaning up my site grrr, not too technically advanced but learning!

      Have changed over to AddThis and will read more on optimizing. Saved this page to come back and continue step by step.

      Found your site via Yaro Starak whilst looking for pointers using Firebug.

  • by Simon Vreeman
    on February 7, 2011 at 3:51 pm

    Great post Frederick! This is very useful!

  • Great help and so clear…even I can understand. Thanks Frederick.

  • Any thought on the Wibya tool bar or is that just similar to what Meebo has done with their code?

    • by Frederick Townes
      on February 8, 2011 at 5:18 am

      The Wibya bar is nowhere near close to what I'd like from from a performance standpoint at this time, which is why it was deliberately omitted. It's not asynchronous and I've seen it slow down lots of sites. While it's easier to integrate than Meebo, it feels less robust as well and I'm disappointed about the back links they try to place on users sites using the "hidden" <noscript> tag.

  • by chipcopeland
    on February 8, 2011 at 12:05 am

    A couple more comments / questions related to my previous post.

    I've heard ( on the WordPress Community Podcast of course) that it's better to have social functionality built into your site instead of using a plugin or toolbar, my question is are any of these steps implemented within a WordPress framework such as the Woo Framework since there are social plugins package within their themes? Will I lose stats if I switch off my sharing plugins and switch to placing the code in the single.php file for example?

    • by Frederick Townes
      on February 8, 2011 at 5:19 am

      I'm sorry I can't give a specific comment on this point without reviewing their framework in more detail (which can be arranged). In general use of many WP plugins should be avoided particularly when a user interface is not an imperative.

    • by chipcopeland
      on February 8, 2011 at 10:54 am

      LOL, while I appreciate the offer of a review, I think you're well out of my price range for a consult. Frederick, you're work here and on the podcast is always tremendously helpful and I've learned so much from you (and Joost)

      As a newbie to the aspects of running a blog/site a couple years ago I made, what I consider now, many mistakes in regards to trying out different plugins without thinking about performance, ranking, and overall presentation. I'm still learning new stuff everyday and it's hard to separate the wheat from the chaff if you haven't been knee deep in web design and optimization for years. Thanks for the knowledge, i'll definitely be implementing some of these tips.

  • Wow, what a great write up. Thanks for making this available Frederick. I know a lot of webmasters will benefit.

  • Great post – thanks for this one.
    Tried some things and they worked at once.
    Thanks Frederick

  • by Andy Killen
    on February 8, 2011 at 6:00 am

    There is one thing that you can do that will help all of the head section items to be faster so hopefully the javascript will be down way before the rest of the content, you can "flush" them from the server while it builds the rest of the page…. usually put just after the closing </head> tag

    php = <?php flush(); ?>
    java = response.getOutputStream().flush() or <%@ page autoFlush="false" %>
    .net = Response.Flush

    regards
    Andy

    • by Frederick Townes
      on February 8, 2011 at 6:03 am

      Thanks Andy, for tips like this that don't matter for the buttons, badges, widgets themselves exactly, I already linked to the Yahoo performance rules page in the first paragraph to make sure readers have context of the issues being addressed in the post.

    • by Andy Killen
      on February 8, 2011 at 6:17 am

      Cool. fair point. However you could also late load iframes to increase the perceived loading times. as you know I made a wordpress plugin to help with that the other week. http://wordpress.org/extend/plugins/easy-iframe-l

      This would help with the tweetmeme button, as the iframe would not get added to the HTML code till after everything else comes down.

      Just so others know what the plugin does and don't have to go there, it puts a document.onload statement with a document.write statement encapsulated within it. in the document.write is a the stuff to write the iframe into the HTML.

      I made it because iFrames will halt the loading of a page until they have loaded ans was getting all sorts of problems with my vimeo videos not loading quickly enough….

  • by Comparativa Bancos
    on February 8, 2011 at 2:15 pm

    Hello Frederick,

    usually people implements many share and social buttons in a single page. What I do is the following at the beginning

    <?php
    $cdbpermalink = get_permalink ( $post->ID );
    $cdbencodelink = urlencode ( $cdbpermalink );
    $cdbtitle = wp_title( '',false,'' );
    ?>

    and then use those variables for lines like

    <a onClick="_gaq.push(['_trackEvent', 'compartir', 'Facebook', '<?php echo $cdbtitle; ?>']);" rel="external nofollow" href="http://www.facebook.com/share.php?u=&lt;?php echo $cdbencodelink; ?>" title="Comparte esta entrada en Facebook"><img src='http://…./wp-content/uploads/facebook.png' width="32" height="32">
    <a onClick="_gaq.push(['_trackEvent', 'compartir', 'Buzz', '<?php echo $cdbtitle; ?>']);" rel="external nofollow" href="http://www.google.com/reader/link?url=&lt;?php echo $cdbpermalink; ?>&title=<?php echo $cdbtitle; ?>" title="Comparte esta entrada en Google Buzz"><img src='http://…./wp-content/uploads/googlebuzz.png' width="32" height="32">

    and so on…

    BTW, in the line 4 of the jquery, you wrote "query"… Should it be "jquery"?
    wp_enqueue_script('query') -> wp_enqueue_script('jquery')

    BR

  • Thank you Frederick, I have added the jquery and swf snippets to my blog and will be looking for a noticeable improvement. I realize that it may not be readily noticeable but trust your advice. I use a social plugin named “Sexy Bookmarks” from Shareaholic. I don’t know if this uses an asynchronous load or not but my load time is a bit slow, may just be the host though?

  • by Alex Billington
    on February 9, 2011 at 3:02 am

    Thanks for posting this, incredibly helpful and extremely easy to understand. I'd love to see more series on tips/techniques like this to improve sites. Hell, I'd even hire you for some help with that. :)

  • by Jesica Wills
    on February 9, 2011 at 4:43 am

    Hi Frederick. Very impressive post. Its very useful for the webmasters. Great writing. Thanks for the Google analytic part.

  • by @PauldeWouters
    on February 9, 2011 at 6:35 am

    any tips for embedded google maps? I have this WP site and I see 9 http requests from maps.gstatic.com

    • by Frederick Townes
      on February 9, 2011 at 5:10 pm

      Unfortunately I don't have any killer tips for normal google map embeddings right now. Their map embeddings actually perform better than others.

    • by Andy Killen
      on February 11, 2011 at 5:27 am

      try using Easy iFrame Loader plugin to late load the iFrame after the page has loaded rather than during.

  • by Stephen Cronin
    on February 10, 2011 at 8:08 pm

    Hi Frederick,

    Let's hope that those companies that don't provide asynchronous code yet see the light and provide it soon!

    Back in the day (2007), I wrote a WordPress plugin called IFrameWidgets, which basically created a text widget that ran as an iFrame. That let you load widgets via an iFrame, so it didn't slow down the page load. You'd have to be careful about which widgets ran in the iFrame, as it would break some of them (such as GA!), but it worked for the slow social widgets of the day (MyBlogLog and BlogCatalog). Some people were worried about the SEO impact, but it's only social widgets not the content.

    I'm not actually recommending anyone try this plugin (my plugin skills weren't quite so refined back then). Asynchronous code from the providers is a much better solution and your hacks are a great option in the meantime. Thanks

  • Great stuff to speed up some websites! Going to implement the facebook optimization right away.

  • by Chris Olbekson
    on February 11, 2011 at 4:53 am

    Hey Frederick,

    Great post. Another trick I like to use with the Tweetmeme button is to place hold the button with an empty div then use java script to add the iframe after the page loads.

    For the button: <div id=tm_box></div>

    Then before </body>

    function tweetMemeButton() {
    if (document.getElementById("tm_box")) {
    var iframeCode= "";
    iframeCode += "<iframe src="http://api.tweetmeme.com/button.js?url=&quot; + escape(document.URL) + "&style=normal&source=twiiter_username &service=bit.ly" scrolling="no" frameborder="0" width="50" height="61" >";

    document.getElementById("tm_box").innerHTML = iframeCode;
    }
    }

    window.onload = tweetMemeButton;

  • by Andy Killen
    on February 11, 2011 at 5:26 am

    It should be noted that the use of the Google CDN for jQuery should be restricted to pages that are not in the admin screen.. ie.

    if (!is_admin){
    wp_deregister_script( 'jquery' );
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&#039 ;) ;
    wp_enqueue_script('query');
    }

    otherwise it will screw up the editor for pages and posts.

  • thanks these are every usefull thanks for the post

  • Great post Frederick! Was never happy with the Facebook Like Box performance.

  • I understand the concepts, however I’m not that familiar with editing the code. I agree that the Facebook like button is slow to load but I think the Facebook comments plugin adds to load times too. Don’t you agree? Thanks for these!

  • Are the implemenationsw above – beyond what your W3 Total Cache does when you minify javascript files and embed them as non blocking before /body, or are they extras steps that one can take – I would not want to cause conflicts with the plugin

    • by Frederick Townes
      on March 5, 2011 at 6:35 pm

      These optimizations are the what one should take prior to taking next steps with W3 Total Cache and minify.

  • Excellenet post Frederick!

    I just tried the facebook async call and it really makes a huge difference.
    Just a quick note, facebook changed the id of the embed div to fb-root so you should use

    Thank you so much for writing these posts.

  • by Praveen Ratna Deepak
    on April 5, 2011 at 4:19 am

    Thank you very much Frederick! A very useful post :)

  • Hey Frederick – thanks for this post. Im having trouble in that I just turned on Google DFP and boy is it slow. I implemented it according to what you have above but Im not sure how to handle the multiple slots in terms of where you say – “uses the single request command to make the render more responsive”

    Do you know of any ways to tweak it further to help with load times? I’ve got multiple slots which ends up looking like this:

    Is there a way to combine all of these so that you arent listing the adsense pub ID for each? Perhaps that doesnt matter but would love to figure out some way to make this faster.

    Thanks in advance for any advice you can offer on this front. Thanks again.

  • by Nikos Kalogridis
    on April 12, 2011 at 6:08 am

    Great post! I still think though that loading time penalties are quite high for such mash-ups. I prefer to use custom code that includes only the required functionality whenever I can.

  • by Joshua Dorkin
    on May 7, 2011 at 8:44 am

    Great post Frederick! I’m trying to figure out a way to speed up Facebook’s Comment System . . . would love any advice, if any.

  • by old skool jungle
    on June 6, 2011 at 5:35 am

    Man this is helpful, Im trying to speed up my blog as a whole but the new Google Plus one button has slowed everything down, which is annoyingly ironic considering they are all about speed.

  • by Fredrik
    on June 26, 2011 at 3:18 pm

    The score on Firebug/YSlow(V2) of my home-made little website increased from 77 to 86 only by implementing these suggestions for facebook, LinkedIn and Twitter like buttons and facebook comment wall. Thanks a lot!

  • by blackersz
    on July 5, 2011 at 1:04 am

    thank..
    sangat membantu saya..

  • by Dave Doolin
    on July 5, 2011 at 8:43 pm

    I took all that crap off one of my blogs, and with W3 I’m getting page renders between 290 to 713 milliseconds. All of it. Facebooks, teh twitters, all of it.

  • by AstroGremlin
    on August 12, 2011 at 10:23 am

    When I look at my load times, the social buttons (along with ads) seem to be some of the most complex and time consuming. Makes a lot of sense to load them, when possible, in places that don’t affect page rendering. Page loading speed is super important (just think of how impatient you are!). Have linked a resource (above) with about 15 sites to grade your blog speed and performance. It’s kind of fun to see how fast the world gets to your site.

  • by @freshapple11
    on August 19, 2011 at 1:54 am

    Lovely Article Thanks For sharing it with us.

  • regarding Google friend connect for Adsense purposes: is it permitted by adsense YOS to do that , i mean your instructions above? thanks

  • by silver fish
    on September 23, 2011 at 8:42 am

    Yeah, I removed a bunch of widgets from my site and increased the page load time by 30%! It was pretty easy to manually add what those widgets did anyway so it was no big loss.

  • by @datingwomenmen
    on September 25, 2011 at 3:17 am

    Thanks for such an informative article and the extensive explanation, it’s been very useful.

  • Good stuff, interesting to read the comments. I try and learn something new everyday. Thanks for the information.

  • Thanks for info!

    It would be nice to update article with info about Google +1. For me it seems that Google +1 affects a page loading if buttons appeared a few time on the same page.

  • Perhaps in a future post you could discuss the usefulness of http://labjs.com/ ??

  • Thank you very much for your excellent tutorials!

  • by chij gurung
    on November 27, 2011 at 12:05 am

    interesting article i think you tips make site more faster

  • by Shankar Banjara
    on November 27, 2011 at 6:45 am

    great Tutorials about performance optimization i will try to apply it in my site thanks for sharing

  • thank you so much Frederick, this will improve my blog..

  • On a Simple Site: Adding sharethis.com with increased the number of http requests from 4 to 28, and significantly slowed site load. Might be worth thinking about whether or not that's worth it.

  • Hi Frederick, thanks for sharing this tips with us…

  • All of those social buttons are evil… You want 5 buttons – here you go – load additionally 5 javascripts that will load 5 iframes with tons of images / css inside with repeating javascript functions snd similar images / styles… So inefficient…

  • Simply fantastic.
    I not realizing anything about encoding, but this tutorial is so good and easy to understanding that was fairly simple to implement on my website.
    Great post Frederick !
    Thanks a lot!

  • Thanks a lot. I've bookmarked this post.


Comments are closed.
February 7, 2011 97

Optimize the Performance of Widgets, Buttons & More

Too much 3rd Party content can slow down the growth of your site, reduce engagement, conversions and more. Learn how you can still incorporate widgets, plugins etc and still have a site that does not force your visitors to leave and never return.

View
March 9, 2009 81

Do's and Don'ts to Improve Google Ranking

Google Ranking Factors, The Good and the Bad. There are lots of opinions on how Google actually ranks your web site in the search result pages — take a closer look at what matters and why.

View
February 25, 2008 90

Get Your Blog Google Ranked in 30 Days or Less

Blogs are great for updating content quickly, creating a site community, and they even make search engines happy. Unfortunately, many site owners mis-use or under-utilize their blogs so here are 50 tips to boost your blogs performance.

View

Testimonials

W3 HOSTING has time and again demonstrated that they have a clear understanding of the role of information technology as it pertains to the web and the needs of our industry as well as the business units of our organization. Without question, W3 is one of the few vendors Exact Software trusts; the growth and continued performance of our various web properties was due in large part to the dependability and reliability of their platforms and solutions.

Jeremie Audran, online marketing director, Exact Software, Inc.