Montag, 10. November 2014

Dynamisch geladen HTML Templates und Daten mit Ajax nachladen, um selbst auf mobile Geräte sehr schnell zu sein

Schnelle Seiten auch für Bahnfahrer.

Viele vergessen, dass es immer mehr Benutzer gibt, die mobile sich mit dem Internet verbinden. Diese Benutzer sind oft Informationskonsumenten und möchten schnell und unkompliziert Daten abfragen. Aber auch immer mehr Webseiten mit Produktinformationen und Shops werden aufgerufen.

Scheinbar nutzen die Betreiber selbst kein normales mobiles Internet, denn diese Seiten sind meist nicht benutzbar. Gerade wenn der Benutzer unterwegs ist und nicht an einem Punkt verharrt, ist es fasst unmöglich zu surfen. Warum funktionieren die Chat-Applikationen aber hervorragend?
Weil diese Applikationen es genau richtig machen. Nur das notwendigste wird übertragen.

Dieses Technik sollten wir auch für das Surfen im Internet einsetzen. Alle profitieren davon, selbst wenn man eine klassischen Desktop Computer mit fester Leitung nutzt.

Wie soll das gehen?

Zuerst trennen wir Daten vom Template. Alter Hut? Warum macht dass dann keiner?
Die Applikation lädt HTML Template erst nach Bedarf. Die Daten werden per Ajax oder JSONP Call abgeholt. Die geladenen Daten enthalten eine Versionsnummer, anhand derer der Browser erkennt, ob ein neues HTML geladen werden soll oder die lokale Kopie der vormals geladenen Seiten immer noch aktuell sind.

Umsetzung:

- HTML Template, entweder als HTML Datei hinterlegen, oder als in JSON eingepackte Datei
- Die Startdatei (meist index.html) ganz klein halten und damit das JavaScript laden
- Die (Teil-)Daten abholen. Im JSON die Version ermitteln
- Ist der HTML Teil im localstorage, dann die Versionsnummer mit den aus den Daten vergleichen
- Ist das HTML veraltet oder nicht im localstorage gespeichert, dann per AJAX HTML nachladen und im localstorage mit Versionsnummer speichern. Am besten als JSON. {vnr:VERSIONSNUMMER, html:''}
- Daten mit HTML per JavaScript verbinden und anzeigen.

Fazit

Im Idealfall wird das HTML einmal geladen und die Seiten wirken rasend schnell. Dieser Wettbewerbsvorteil kann gezielt genutzt werden. Gerade für Pendler und andere sich schnell bewegende mobile Internetnutzer werden sich freuen und diesen Dienst auch weiter empfehlen.