Hijax - Der Website Turbo

3. Oktober 2017

Klinkt man auf einen Link einer Website, so wird die adressierte Seite komplett geladen. Inklusive aller Stylesheets und JavaSkripte. Die Anzeige der neuen Seite wird dabei in der Regel vom Browser so lange blockiert, bis alle Skripte und Styles geladen sind.

Das ist eigentlich gar nicht notwendig, denn Skripte und Stylesheets sind häufig für alle Seiten einer Website die gleichen. Könnte die neue Seite nicht auch ohne diesen Overhead geladen und damit merkbar schneller angezeigt werden?

Ja, das kann Sie in der Tat. Die dazu notwendige Technik wird als Hijax bezeichnet. Innovation Gate nutzt diese Technik seit mehr als einem Jahr auf dieser Website und wir können bestätigen: It works.

Hijax ist eine Kombination der Worte Hijack (entführen / kidnappen) und AJAX.

Die Idee von Hijax ist, die Link-Klicks zu "hijacken" und über einen eigenen Skript-Handler den Seitenaufbau zu steuern statt dies dem Browser zu überlassen. Die neue Seite wird dabei per AJAX nachgeladen und nur der <body> Part der Website ersetzt. Skripte werden nicht erneut geladen und ausgeführt und die neue Seite wird so sehr viel schneller angezeigt (bei einigen Seiten konnten wir die Zeit von 500 auf 100 Millisekunden verbessern).

Grundsätzlich ist Hijax mit jQuery eigentlich sehr einfach zu implementieren. Nehmen wir an, der eigentliche Inhalt einer Seite wird in einem <div id="page"> gerendert. Dann reicht folgendes Skript, um den Content per AJAX zu laden:

$("body").on("click", "#page a", function(event){  
    event.preventDefault();  
    $("#page").load(this.href + " #page")  
})

Damit dies aber wirklich reibungslos funktioniert, müssen noch eine Reihe weiterer Dinge beachtet werden:

  • Alle Links müssen auch ohne JavaScript funktionieren. Das ist insbesondere wichtig, damit Suchmaschinen diesen Links nach wie vor folgen können.
  • Das History Management des Browsers muß berücksichtigt werden, damit die Back-Funktion im Browser weiter funktioniert.
  • Wenn einzelne Seite unterschiedliche Skripte benötigen, müssen diese (z. B: per requirejs) asynchron nachgeladen werden. Das gleiche gilt ggfl. für Stylesheets.
  • Neben dem <body> Tag müssen auch einige HTML Metadaten wie z. B. <title> und <meta name="description"> beim Laden ersetzt werden.
  • Es gibt keinen onload-Event mehr. Skripte müssen dies berücksichtigen.
  • Es dürfen natürlich nicht alle Links umgeleitet werden. Externe Links z. B. dürfen nicht entführt werden.
  • Formulare benötigen eine gesonderte Behandlung, wenn auch diese per AJAX gesendet werden sollen.
  • ...

In Summe steckt dann letztlich viel Forschungsarbeit in einem Projekt, das man händisch Hijax-enablen möchte. Aber innovationgate.com zeigt: es geht. Und es lohnt sich.

Die gute Nachricht

Für das womodo CMS steht mit dem neuen "Basic-Website-Kit-2" (BWK2) ein Werkzeug zur Verfügung, das dem Entwickler alle diese notwendigen Detailarbeiten abnimmt. BWK2-Websites sind (auf Wunsch) out-of-the-box Hijax-enabled.

Womodo ist das erste (und einzige) CMS, das Hijax-Websites ohne aufwendige Handarbeit ermöglicht.

Sprechen Sie mit uns über Möglichkeiten, auch Ihre Website zu optimieren.