WebPagetest Forums
Reduce loading time without disabling social buttons? - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: Reduce loading time without disabling social buttons? (/showthread.php?tid=11154)



Reduce loading time without disabling social buttons? - Juanzo - 05-22-2012 04:55 PM

Any ideas to reduce the loading time of our client's site?

The server is running on a dedicated server with W3 Total Cache configured so we could change anything that can help.


RE: Reduce loading time without disabling social buttons? - pmeenan - 05-23-2012 01:35 AM

I'd start by going through the photos and re-compressing them: http://www.webpagetest.org/pageimages.php?test=120522_XA_5W2&run=1&cached=0

The traffic shot that is a 837KB png should also be changed to a jpeg but a few of the other jpegs served from the uploads directory are also larger than they should be: http://www.webpagetest.org/result/120522_XA_5W2/1/performance_optimization/#compress_images

You can save ~1MB (1/3) of the page weight right there.

Some other things to look at:

There are (at least) 3 blocking script tags at the top of the document:
- The twitter button is using the blocking script version, switch to the async script.
- The gmodules code is also loading as a blocking script
- And so is the Google jsapi (though that may be difficult to do async depending on what it is being used for)

It would be worth looking into the social buttons to see if there is a way to add them all in batch mode instead of individually. I think most of them support a mode where they can get all of the counts in a single call instead of having to do it individually for each button.


RE: Reduce loading time without disabling social buttons? - Darren Slatten - 05-24-2012 11:04 AM

All social media buttons can be lazy-loaded. When you go to a given site's button code generator / configurator, it will usually tell you to paste the code where you want the button to appear.

Instead, put an empty <div> container where you want the button to appear, give the container a unique id (e.g., <div id="twitter-button"></div>), and then write a JavaScript function that finds the container and inserts the button code after the onload event has fired.

I wrote a decent tutorial about this that uses the TweetMeme button, but this same principle can be applied to any social media buttons:

http://www.seomofo.com/wordpress/tweetmeme-retweet-button.html

Also, for WP sites that have a lot of comments, some very significant gains can be seen by switching to Disqus comments and lazy-loading the Disqus script. This has SEO-related side effects though: Google will not see the content of your comments anymore. This could be good or bad, depending on the quality of the comments.

I have a site that's running on a cheap VPS server and it lazy-loads Disqus comments, the Twitter button, the FB like button, and the G+ button (all with counts showing), and it loads pages in under a second.

Big Grin


RE: Reduce loading time without disabling social buttons? - Juanzo - 05-25-2012 03:33 AM

Thanks for the very productive feedback guys!

I've managed to improve score to 87 but I would appreciate some more advice.
  • Do you advice any social plugin that might work with little or no effort? I've searched around for alternatives and I do need the counter and 1 click action (Personally I don't like AddThis and it's alternatives)
  • I'm using smush.it plugin to optimize pictures but it doesn't suggest or convert .png to .jpg if it's useful. Any automated tool that could help us with this?



RE: Reduce loading time without disabling social buttons? - pmeenan - 05-26-2012 04:14 AM

I know mod_pagespeed with convert png's to jpeg's on the fly if it makes sense but it's not a standalone tool (not aware of any that do).