djumla - webentwicklung, webdesign und joomla in Köln

Logo der Firma djumla inklusive dem Slogan Webentwicklung. Beides in Kleinbuchstaben gesetzt.
Logo der Firma djumla inklusive dem Slogan Webentwicklung. Beides in Kleinbuchstaben gesetzt.

Wir lieben das Web.
Hochwertiger Code, ansprechendes Design und neueste Webtechniken sind unsere Leidenschaft

Erinnert ihr euch noch an den 01.12? Damals, früher, als wir diesen Blog-Adventskalender hier gestartet haben? Da gab es einen Beitrag zur benutzerfreundlichen Gestaltung von Wartezeiten aus Sicht des Gestalters - und das Versprechen, dass in einem späteren Blogbeitrag dann noch Ideen zur technischen Umsetzung gegeben werden. Liebe Leser, der Tag ist nun da: hier kommt Teil 2 des Beitrags!

Vermeiden von Wartezeiten

Es ist natürlich offensichtlich: gibt es keine Wartezeit, so muss diese auch nicht gestaltet werden. Besonders relevant, da besonders nervig wenn zu lang, ist die TTFB, die Time-To-First-Byte. Diese Zeitspanne gibt an, wie lange der Server braucht, eine Seite zu generieren und das erste Byte an den Browser zurück zu geben. Im Normalfall drückt sich eine lange TTFB durch eine spürbare Verzögerung zwischen einem Klick (z.B. auf einen Menüpunkt) und einer ersten Reaktion der Seite aus. Ist die TTFB zu lang, führt das oftmals dazu dass Nutzer denken, die Seite sei hängen geblieben oder sie hätten den Link nicht richtig getroffen - die Folge: der Link wird nochmals angeklickt, wodurch die TTFB wieder von vorne beginnt.

Um solche Frustrationserlebnisse zu vermeiden, müssen wir die Generierungszeit auf dem Server so gering wie möglich halten. Glücklicherweise gibt es eine große Vielfalt an Mitteln und Wegen, um dieses Ziel zu erreichen, z.B.:

  • Sorgefältige Wahl der verwendeten Technologien (Frameworks, Datenbanken)
  • Serverseitiges Caching auf Webserver oder Applikationsebene
  • Leistungsfähigere Serverumgebung
  • Vermeidung von Datenbankabfragen
  • Korrekte Verwendung von Indizes
  • Asynchrone Ausführung von Aufgaben (Stichwort "Job Queues")

Feedback ist Alles

Ist eine (längere) Wartezeit dann doch mal nicht zu vermeiden, ist es unglaublich wichtig, den Nutzer bei der Stange zu halten! Es darf keinesfalls der Eindruck entstehen, dass die Seite "abgestürzt" ist oder "nichts mehr passiert". Ein sehr simples technisches Mittel ist die Verwendung von allerlei Ladeanimationen, wobei es hier die gesamte Bandbreite von kleinen Animationen bis hin zu ausgefeilten Fortschrittsbalken inkl. Angaben zur Restzeit gibt.

Wir möchten euch hier eine kleine Sammlung von Ladeanimationen vorstellen, die rein auf CSS basieren und dadurch mit wenigen Handgriffen implementiert sind - ein großer Fortschritt im Vergleich zu den früher verwendeten, animierte GIF-Dateien. Die von uns verwendete Sammlung findet ihr beim Kollegen Luke Haas unter https://projects.lukehaas.me/css-loaders/

Single-Page-Applications - Subjektive Verkürzung durch Splitting

Last but not Least möchten wir noch auf eine Möglichkeit zur Gestaltung von Wartezeiten hinweisen, die ausnutzt, dass die von uns subjektiv empfundene Wartezeit oftmals schon dann endet, wenn "irgendwas" passiert. Die sog. Single-Page-Applications, die, wie der Name schon verrät, eher im Applikations- als im klassichen Website-Umfeld Verwendungen finden, splitten den Ladevorgang der Applikation daher in zwei Schritte auf.

Im ersten Schritt wird oftmals nicht mehr als ein quasi leeres, statisches HTML-Gerüst mit einer minimalen CSS-Datei und dem benötigten Grund-JavaScript für die Applikation ausgegeben. Dadurch, dass all diese Daten statisch vorgehalten werden können und relativ klein sind, ergibt sich eine sehr kleine TTFB und ein zügiges Laden und Rendern

Im zweiten Schritt lädt das JavaScript (= die eigentliche Applikation) nun die Nutzdaten und unterschiedlichen Seitentemplates (bei einem Blog z.B. die Ansichten für eine Artikelliste und einen einzelnen Artikel) nach und fügt sie ins existierende HTML ein, ohne dass dafür die Seite komplett neu geladen werden muss. Subjektiv verkürzt sich dadurch die Ladezeit massiv, die Applikation fühlt sich "flüssiger" an.

Im Bereich der Singe-Page-Applications gibt es aktuell sehr, sehr viel Bewegung, weshalb ich an dieser Stelle auf die Erwähnung oder Empfehlung konkreter Frameworks verzichten möchte - mein Appell ist vielmehr: schaut einfach mal rein, es gibt viel zu entdecken!

Kommentar schreiben

Sicherheitscode
Aktualisieren