
InstantClick 3.0 Released - dieulot
http://instantclick.io/3.0.html
======
AndyBaker
I had an interesting bug combining InstantClick with Clicky.com (a GA stats
tracking alternative).

Clicky dynamically adds a JS file to the header so it's asynchronous. It does
the same every few minutes to poll and indicate someone's still on the page.

When used with InstantClick, the first tracking request worked fine. But when
I clicked - the first AND second Clicky tracking request were sent. Another
click meant 3 new requests were sent.

It puzzled me for a minute, before I realized. Clicky's JS didn't have
InstantClicks' data-no-instant attribute, so all previous tracking scripts
were being re-loaded with every click.

The fix is to push the tracking requests to Clicky manually via InstantClick's
on change callback. Then I used JQuery to add the data-no-instant attr to all
the clicky script tags in the head:

    
    
      InstantClick.on('change', function() {
        clicky.log(location.pathname+location.search, document.title, 'pageview');
        // now stop any clicky scripts from being re-requested each time the page is insta-reloaded, to stop wasted tracking requests
        jQuery("head script[src*='clicky.com']:not([data-no-instant])").attr('data-no-instant', true);
      });
    

The same might happen with Google Analytics if you're using it asynchronously,
but I've not tried that.

Hope this helps someone if they see the same weirdness.

~~~
AJ007
Any one test this with any ad networks running? Clearly you don't want non-
visible ads being called.

------
toddmorey
Interesting to see the differences between InstaClick and Pjax.

InstantClick

    
    
      - InstantClick is a little easier to implement, with nothing required server-side
      - InstantClick works to reduce latency by prefetching page content on hover.
      - InstantClick always replaces the body's outerHTML
      - InstantClick provides a YouTube style loading progress bar
    

Pjax[1]

    
    
      - You specify specifically which page element is replaced (using the ID)
      - You set up your app to return only the required page fragment on ajax calls
      - No loading bar is included, but can easily be added
      - Content is not prefetched on hover
    

I think I still prefer the pjax approach because it sends less data over the
wire. However, would be interesting to see a hybrid of the two approaches.

Also worth noting that both essentially turn your site into a single-page app
that updates the browser URL bar using pushState. Both approaches also degrade
nicely.

[1] [https://github.com/defunkt/jquery-
pjax](https://github.com/defunkt/jquery-pjax)

~~~
cocoflunchy
InstantClick seems to be using pjax? at
[http://instantclick.io/](http://instantclick.io/):

    
    
        InstantClick uses pushState and Ajax (a combo known as pjax), replacing only the body and the title in the head.

------
troymc
If someone hovers over a link but _doesn 't_ click it, will the page load
still be accounted as a page view (e.g. by Google Analytics)?

~~~
rtpg
not sure of the details of how prefetch work, but I doubt it( GA requires its
little JS snippet to run)

------
xpose2000
If you guys are interested in testing this out on a "real" site... i just
implemented InstantClick on
[http://www.topiama.com/](http://www.topiama.com/).

If I spot anything weird I'll let you guys know.

------
atonse
Cool idea.

Not sure how it works now but shouldn't Apple/Google just disable that delay
if your viewport is already set to device-width? It's not like you're going to
double-tap to zoom in any further.

~~~
spb
You're thinking of fastclick. This is different, it's page prefetching so that
you start loading the page before the UI event that would normally start
loading it happens.

------
CSDude
When Youtube started to do this "custom progressbar", now my Chrome history is
inconsistent, when I type something and open the related history item, a
completely different web-page comes. Please, if you are intending to do this,
do it correct, don't break the expected behaviour of a browser.

------
level09
wouldn't it be nice if this was built into the browsers themselves ? probably
with a settings to change the timeout etc/or disable the feature ..

~~~
computer
Unfortunately, links might change state. Links on some sites will delete
records, and a browser has no way of knowing which.

Also, it generates a much larger server load. Look up FasterFox and the
related controversy.

------
Brajeshwar
Is this something like FastClick[1]?

1\. [https://github.com/ftlabs/fastclick](https://github.com/ftlabs/fastclick)

~~~
dieulot
FastClick removes the 300/450 ms delay and makes your click trigger right
after touchend, InstantClick makes use of this delay (plus the delay between
touchstart and touchend) to preload the page.

