

Google +1 Button Performance Review - wspruijt
http://www.aaronpeters.nl/blog/google-plus1-button-performance-review

======
thezilch
In short, and as a rule with all scripts, load scripts asynchronously / non-
blocking when possible, including Google +1.

    
    
        <script>
        (function(d, t, g, s){
        g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
        g.async = true;
        g.src = 'https://apis.google.com/js/plusone.js';
        s.parentNode.insertBefore(g, s);
        })(document, 'script');
        </script>
    

Load it as far up your page as possible, as to benefit from the parallelism
early on and not hanging it off the end of or extending your page load.

~~~
wladimir
I suppose these are JS performance tricks?

\- Define g and s as parameter even though they're only given a value inside
the function

\- Pass document into the function instead of using it from global scope

\- Insert a script tag in front of the other script tags on-the-fly using
insertBefore, instead of simply doing <script async src="...">...</script>

Pretty interesting. Care to explain a bit?

~~~
jarin
From the comments:

"As for your question, we pass in `document` that way to prevent unnecessary
scope lookups. We could’ve used `var d = document` inside the IIFE, but that
would trigger an additional scope lookup. For `'script'` it doesn’t matter;
you could initialize that inside of the IIFE if you want."

~~~
mhansen
It's premature optimization. The extra time taken for a scope lookup is
completely insignificant compared to the network costs in loading the script.

Perhaps if this was inside a tight inner loop, I could understand, but here
it's completely unneccessary.

~~~
thezilch
Is it premature or unnecessary, if the methodology comes natural? Why not get
into the habit of reading and writing Javascript with optimization naturally
ingrained into the first pass? The optimization(s) may not be immediately
necessary here, but there's no harm in practicing these patterns in all facets
of language use, unless we want to have a separate conversation whether the
patterns are detrimental to syntax.

------
andybak
Someone at Google should get a slap upside the head for not getting this spot
on.

Google is evangelising performance on one hand and making careless errors on
the other...

~~~
jrockway
Yeah, how dare they say the lowest-performing option first in an in-passing
comment! What if the user knows nothing about performance and stops there!
Their page will load 8 milliseconds less quickly! Amateur hour!11!

(</sarcasm>)

~~~
andybak
From a brief reading, it's potentially worse than an 8ms slow-down if you take
all the issues into account. Have I misinterpreted?

------
dave1010uk
The ironic thing about Google's +1, which is meant to get you more clicks on
SERPs (as you'll see your friends +1's [1]), is that as Google now use site
speed in their ranking algorithm [2]. adding the +1 button to your site would
actually make it rank lower.

There's another performance review of +1 here [3], which compares it to the
Facebook Like button. Steve Souders (who's written books on web performance)
has detailed and compared a few other 3rd party JavaScript buttons and widgets
here [4].

[1] [http://adage.com/article/digital/google-adds-button-foray-
so...](http://adage.com/article/digital/google-adds-button-foray-social-
search/149645/)

[2] [http://googlewebmastercentral.blogspot.com/2010/04/using-
sit...](http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-
in-web-search-ranking.html)

[3] [http://www.artzstudio.com/2011/06/googles-button-is-slow-
and...](http://www.artzstudio.com/2011/06/googles-button-is-slow-and-so-is-
facebooks/)

[4] <http://stevesouders.com/p3pc/>

~~~
pestaa
I firmly believe the crawler won't download the plusone library for a few
reasons.

\- It may not run javascript at all.

\- It doesn't need to be checked for malicious content.

\- If all else fails, it might have it cached already.

Even if external assets are computed into a site's speed, the overhead is
negligible when it comes to search ranking.

~~~
dave1010uk
Google Instant's previews show the +1 button, so I see no reason why Googlebot
wouldn't too. I guess Google wait until window.onload fires instead of just
timing the server sending the 1 HTML file. Google could also use data from
Google Toolbar users but I doubt they do.

As the article says, even with a primed cache, the +1 code slows down page
load. It also said the overhead can be 2 seconds. If you're aiming for fast
then that could double your page load time. External assets are _very_ likely
to be calculated into a sites speed as they generally take up quite a bit of
the page load time.

Of course, no one knows how much of an effect page speed plays in Google's
algorithms. My bet, however, is that adding +1 to a fast site could easily
make it drop a few places in the SERPs. If your site is already quite slow
then an extra 2 seconds may only be a few % slower.

~~~
pestaa
You're assuming search ranking is primarily based on speed. It might weight
the ranking, but relevancy must be still dominant.

I mean, come on. Sites with maps, ads, or even big images can take up more
than two seconds. It's not a big deal. Your analytics tracking code slows
everything even more.

And it's the same network, the crawler might just go to the next server room.

------
braindead_in
Another problem is you can't directly access the div after the iframe is
loaded if you want to apply styles to it. I had to use Javascript and look for
when the div is loaded and then position it.

------
eridius
I always see suggestions to put script tags just before </body>, or the inline
script that generates a new <script> node. Why does nobody ever suggest using
the defer attribute? My understanding is that the defer attribute will do
precisely what you want - start loading the script now, but not blocking
anything else on the page.

------
za
If the latency cost of multiple requests is so significant couldn't google
just lump everything into one (base64 encode the image)?

~~~
treyp
IE7 doesn't support base64-encoded images, and IE8's support is limited.

------
johnsocs
Google has added the +1 option to all their search requests / results, I'm
sure if the performance was such an issue they would of found a way to fix it
as it would degrade their page load times, granted I'm sure it's not the same
'exact' code.

~~~
jnhnum1
The +1 widget on the search results page and other 1st party pages is
different than the +1 widget for 3rd party publishers. 3rd parties have to use
an iframed widget to prevent click fraud.

~~~
dave1010uk
Does it prevent click fraud? I wonder if you could place +1 inside a div with
style="opacity:0" and position it on top of a link saying "Free cheese" or
similar.

Edit: you can. This example [1] has opacity:0.3 so you can still see it. It
seems as though it would be trivial for an attacker to put the +1 button over
every link on a page. You may even be able to have one tracking the mouse
cursor.

[1] <http://jsfiddle.net/prJG8/1/>

