After seeing how slow the Google +1 button loads and how it can actually degrade your website’s overall pageload time, I started looking around for answers. First of all, I found that I’m not the only one complaining about the issue. Numerous others have started to point out the speed issues with the +1 button. My second thought was to perhaps remove the button from the site, although considering the effect the +1 button has on your website’s ranking that would mean less love from Google.

So what’s a developer to do? If we keep the button on our site, overall pageload times spike. But if we remove the button, or not add it, we might lose out on a potential piece of the social voting pie which most believe affects your search performance.

So here are my techniques for making Google +1 button load faster, or at least not slow down your site. Interestingly enough these techniques are the same set of tips and tricks that Google’s own Page Speed recommends for webmasters.

1) Save a step, Use Https

Make sure you use the HTTPS protocol in the URL for the JavaScript source, as the original version of the button snippets given out by Google included the HTTP version http://apis.google.com/js/plusone.js which just does a redirect to https://apis.google.com/js/plusone.js This issue has since been corrected by Google when you use Google’s +1 button generator site.

2) Don’t load the script on Mobile devices

As stated by Google, currently the Google +1 button does not support mobile devices like the iPhone, iPod touch, iPad, or Android. This means if you have the button code on a mobile site you’re basically wasting HTTP connections and adding extra weight to your site’s throughput. To get around this fact you need to write a little utility function in JavaScript that sniffs the userAgent for unsupported devices, and only makes a call to the script if your client is not one of those devices.
For example in the case of an iPhone and iPad website, you would do something like this:

function isMobileUser(){
  return (/iphone|ipod|ipad|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
}
if(!isMobileUser()){
	//include the plusone.js code here
}

3) Load the plusone.js script asynchronously

HTML 5 has introduced the ability to load scripts asynchronously allowing the rest of the page to load independently of potential bottlenecks. This feature is actually already in use for the Google Analytics code. Keep in mind that only Chrome and Firefox 3.6 and above support the async feature at this time. But it does not hurt your non-supporting browsers in any way so it’s safe to use. Here’s the code that combines the check for unsupported mobile browsers from before to load the +1 button script asynchronously. Note that since this code is loaded asynchronously it doesn’t matter if you put the call in the footer or header.

function isMobileUser(){
  return (/iphone|ipod|ipad|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
}
if(!isMobileUser()){
// create a new script element in the DOM
var gp1script = document.createElement('script');
// set it's type attribute, not really needed in HTML 5 but just to be safe
gp1script.type = 'text/javascript';
// set the HTML 5 attribute of async to true for the script tag
gp1script.async = true;
// set the source attribute to the https version of the google pluseone code
// change this to your own server path if you are cosidering using option 4 below
gp1script.src = 'https://apis.google.com/js/plusone.js';
// add the new script tag to the head or body of the page
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(gp1script);
}

You would then place the tag where you want the +1 button to render, which since it is a proprietry tag will just be ignored if the script is not present on your page.

<g:plusone></g:plusone>

If you’re not comfortable with the tag, you can also use an HTML 5 version to render the +1 button on your site, which uses a css class of g-plusone and sets attributes as needed. For example you can display a standard +1 button with counts using this HTML 5 tag.

<div class="g-plusone" data-size="standard" data-count="true"></div>

Note that you can also place multiple +1 buttons on a single page. For example you might have a +1 button that directs its vote to your main parent homepage like so:

<g:plusone href="http://www.your_tld.com/></g:plusone>

4) Host the plusone.js file yourself

This option has been suggested by some users, although I personally argue against it just because you’ll be responsible for continuously monitoring changes and updating your version. The big benefit here is avoiding that dreaded HTTPS server, but keep in mind the script still will make that second call to load the plusone library so you’re still not home free. Only go this route if you’re seriously considering a site improvement and are willing and capable of pushing out updates to your version of the script. I’m sure the Google +1 team is making lots of changes and adding bug fixes which you will miss out on if you forget to update the script on a daily basis. In the extreme case you could perhaps write a program that downloads the latest version of the script from Google’s servers and updates your version on a daily basis, but then again this becomes a new task to keep an eye on.

Hope this helps and let me know if you have other tips and or feedback regarding these ideas. For more details be sure to read the +1 button API page.

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration

a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
use with moderation
cause search engines can’t index the information

display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation

every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination

but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction

follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time

make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat

tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate

check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox

title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong

when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker

design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter

if you trying to grow your company will get bigger
design and code right man can you get with it