InstantClick – preloading sites

Es geht wertvolle Zeit verloren zwsichen dem “hovern” und dem eigentlichen klicken. Diese kann genutzt werden, um die gewünschte Seite schon vorzuladen, um diese dem Besucher (quasi) instant zur Verfügung zu stellen. Diese Problematik löst, wie bereits im Titel angedeutet, InstantClick.io.  Die kleine JavaScript/ Ajax Bibliothek lädt die gewünschte Seite, sobald der Besucher über den Link “hovert”. 200ms – 300ms gehen während dieser Zeit verloren, welche effizient genutzt werden kann.

Natürlich kann ein Delay festgelegt werden, um eine Website nicht mit Requests zu überlagern, zudem gibt es eine weitere Möglichkeit: Das “preloading”. Das geschieht während des Mausklicks, um die “Flood Gefahr” gänzlich zu minimieren.

Ein wirklich großer Nutzen ist neben der gefühlten Geschwindigkeitserhöhung für den Nutzer auch die Entlastung des Browsers, da dieser nicht mehr bei jedem neuen Seitenaufbau alle Scripte neu aufbauen muss.

Die Installation und Konfiguration ist simple.

Schritt 1: Die benötigten Files im Head einbauen und initialisieren.

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

Es gibt zwei verschiedene Möglichkeit das “preloading” zu realisieren.

Die erste Möglichkeit umfasst das Hovering. Ein Delay ist in diesem Fall aus den oben genanntem Gründen ratsam . Dazu eine Variable oder Ziffern in ms angeben. 50ms – 100ms werden von den Entwicklern empfohlen.

InstantClick.init(50); 

Die zweite Möglichkeit ist das “preloading” anhand eines “mousedowns”. Dazu einfach das Argument “mousedown” an die Methode übergeben.

InstantClick.init(‘mousedown’); 

Weitere interessante Möglichkeiten sind das White- und Blacklisting. Ersteres setzt kein Instantloading per default und letzteres genau das Gegenteil.

Um Links aus “InstantClick” auszuschliessen muss diesen nur ein Argument hinzugefügt werden:

<a href="/blog" data-no-instant>Blog</a>

Anders als beim Blacklisting muss beim Whitelisting ein weiteres Argument an die Initialisierungmethode übergeben werden:

InstantClick.init(true);

.. und jeder Link, welcher durch das Plugin berücksichtigt werden soll mit folgendem Parameter erweitert:

<a href="some-page.html" data-instant>Link</a>

InstantClick setzt auf pushState und Ajax, genannt pjax.

[usr 5] für die gute Idee und die einfach Umsetzung.

Falls nicht anders angegeben stammen alle Informationen von der Entwicklerseite InstantClick.io.