NProgress.js – minimalistischer Fortschrittsbalken zur „Performance-Optimierung“
Kommentare

Es gibt verschiedene Möglichkeiten die Performance einer Website zu tunen. Und manche davon sind gar keine tatsächlichen Performance-Optimierungen, sondern arbeiten vielmehr auf einer psychologischen Ebene.

Ein gutes Beispiel dafür sind die sogenannten Progress Bars. Sie visualisieren für den Nutzer den Fortschritt einer bestimmten Aktion, in den meisten Fällen das Laden einer Datei oder die Installation einer Software. Sie sind ein gutes Mittel, um den Nutzer zu zeigen, dass gerade etwas passiert – vor allem, wenn man auf der Seite ansonsten kaum oder gar nicht erkennen könnte, dass überhaupt etwas passiert. Man stelle sich nur vor, man klickt auf einen Download-Button und bekäme vom User Interface nicht signalisiert, dass dadurch die beabsichtigte Aktion ausgelöst wurde. Hauptbestandteile einer Progress Bars sind der Indikator, der den Fortschritt anzeigt, Textelementen sowie eventuell eine zusätzliche Prozentangabe.

Heute möchte ich Euch NProgress.js vorstellen, ein kleines JavaScript-Plugin mit der sich eine „nanoscopic progress bar“ erstellen lässt. Wie der Name schon vorwegnimmt, ist diese Progress Bar sehr minimalistisch gehalten und erinnert an die Fortschrittsbalken von YouTube und Google. NProgress.js wird ferner durch einen realistischen „trickle“-Effekt gekennzeichnet, sprich die Fortschrittsanzeige erinnert in ihrer Bewegung ein wenig an den Charakter von Flüssigkeiten. Verantwortlich für NPorgress.js zeichnet der philippinische Entwickler Rico Sta Cruz, der auf seiner Website betont, das NProgress perfekt für Turbolinks, Pjax und andere Apps sei, die stark auf Ajax setzen. 

Das Plugin hat allerdings nichts mit einer tatsächlichen Ladezeit zu tun, sondern ist nur ein visueller Effekt, der nur ein Ziel hat: dem Nutzer vorzugaukeln, dass gerade etwas passiert. Weil es sich lediglich um eine Animation handelt, hat NProgress.js allerdings auch einen Nachteil: Zwar lässt sich die Zeit verändern, die der Fortschrittsbalken zum Laden benötigt. Doch da die Ladezeit je nach Verbindung des Nutzers variiert, ist eine Echtzeitanzeige so gut wie unmöglich. Man kann lediglich schätzen.

Ihr könnt NProgress.js auf Ricos Website runterladen, dort gibt es auch eine Demo.

NProgress.js

Screenshot: http://ricostacruz.com/nprogress/

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -