Nutzerzentrierte Performance visualisieren


11.06.2019 von

https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png iteratec GmbH

In unserem letzten Blog-Eintrag hat Stefan beschrieben, warum auch kleine Performance-Verbesserungen wichtig und sinnvoll sind. Außerdem hat er aufgezeigt, dass man Web Performance aus der Nutzersicht betrachten sollte und hat dabei vier wichtige Fragen für Nutzer angesprochen:

  • Is it happening? Passiert etwas?
  • Is it useful? Kann man schon etwas sehen oder machen?
  • Is it usable? Ist die Seite komplett benutzbar?
  • Is it delightful? Ist es angenehm, die Seite zu benutzen, reagiert sie?

Diese vier Fragen zielen stark auf das Erlebnis des Nutzers ab, während dieser sich auf der Website bewegt. Betrachtet man die Lade-Performance einer Website unter diesen Aspekten, liegt der Fokus automatisch auf dem relevanten Bereich und optimiert diesen.

In diesem Artikel wollen wir uns der Frage widmen, wie man seine Website bzgl. Performance aus Nutzersicht betrachten kann.

Entwickler kennen ihre Anwendung

An erster Stelle solltet ihr die Frage beantworten, wozu die einzelnen Seiten eurer Website gedacht sind. Handelt es sich um eine Produktdetailseite auf einer eCommerce-Website, sollte das Produkt die höchste Priorität haben. Entwickelt man eine News-Website, ist es wahrscheinlich wichtig, schnell einen guten Überblick auf der Startseite zu vermitteln. Und sucht man nach einem Begriff, Produkt oder Thema über eine Suchmaschine oder innerhalb einer Website, sind die Suchergebnisse das Wichtigste auf der entsprechenden Seite.

Das heißt Entwickler wissen bereits, was die wichtigen Kernkomponenten einer Seite für den Nutzer sind. Damit lässt sich schon schnell und einfach beginnen, Performance nutzerzentriert zu betrachten - ohne aufwändige Studien durchführen zu müssen.

WebPagetest: Blick von außen

Habt ihr die fachlichen Anforderungen gesammelt, geht es daran, euch einen visuellen Eindruck zu verschaffen. Das Standard-Tool für synthetischen Web-Performance-Messungen ist WebPagetest (WPT). Mit WebPagetest könnt ihr eure Website unter den verschiedensten Voraussetzungen auf Performance untersuchen. Wir wollen hier ganz einfach starten und messen eine Google Suche nach "Web Performance" mit dem Browser Firefox und mit einer durchschnittlichen Internetanbindung. Wichtig für unseren Usecase ist dabei, dass die Option Capture Video, unter Advanced Settings, gesetzt ist (siehe roter Kreis).

Ist der Test durchgelaufen, erhält man eine Zusammenfassung der Performance der gemessenen Seite. Dazu zählen Informationen wie verschiedene Ladezeit-Metriken, die Vorschau des Wasserfalls und weitere Statistiken. Auf diese Informationen wollen wir in diesem Artikel nicht weiter eingehen (für mehr Informationen dazu sei hier zum Beispiel auf das Video Tim Kadlec on Performance Audit auf der Smashing Conference 2018 in Toronto verwiesen). Unser Ziel ist es, den visuellen Seitenaufbau während des Ladens der Seite zu betrachten. Durch einen Klick auf Filmstrip View kommt man zur entsprechenden Ansicht.

Hier sieht man Screenshots, die während der Messung aufgenommen worden sind. Diese werden im ausgewählten zeitlichen Intervall dargestellt und so erhält man eine schöne Übersicht, wie die Seite sich visuell aufgebaut hat. Der Fokus sollte aufgrund unserer Fragestellung darauf liegen, welche Teile der Seite zuerst gerendert werden. Entsprechend der definierten fachlichen Anforderungen lässt sich so prüfen, ob dem Nutzer auch die relevanten Seiteninhalte zuerst sichtbar gemacht werden oder ob andere unwichtigere Teile den Nutzer von seinem eigentlichen Ziel abhalten.

Um der Nutzerperspektive auch gerecht zu werden, solltet ihr vor allem unter verschiedenen Voraussetzungen, wie zum Beispiel einer schlechteren Anbindung, messen. Die fachlichen Anforderungen sollen schließlich nicht nur für Kunden mit High-End-Geräten und schnellen Mobilfunkverträgen gelten. Sehr deutlich werden etwaige Unterschiede, wenn wir die verschiedenen Ergebnisse im Vergleich zueinander betrachten. Im Beispiel unten seht ihr in der ersten Zeile eine Messung mit einer DSL-Anbindung, während das untere Ergebnis mit einer 3G-Anbindung erreicht wurde.

Visualisiert Performance-Messungen

So könnt ihr schnell und einfach einen ersten Eindruck der Performance eurer Website aus Nutzersicht gewinnen. Um also ein rundes Bild der Performance eurer Websites zu bekommen, solltet ihr neben den nackten Zahlen den visuellen Eindruck der Seiten im Auge behalten. Schaut euch das Ladeverhalten an und stellt die Voraussetzungen eurer Kunden nach. Denn auf einem High-End Entwickler-Notebook sieht die Welt oftmals doch anders aus als auf den Endgeräten eurer Nutzer.

Ist dann zum Beispiel das Produktbild erst sehr spät zu sehen, sollte man sich die Priorisierung der Inhalte genauer anschauen oder auch Gedanken über einfache Mittel wie einen Spinner machen. Für den erwähnten schnellen Überblick einer News-Seite kann serverseitiges Rendern in Betracht gezogen werden, um direkt das Layout und Gerüst des Inhaltes sichtbar zu machen.

Wenn ihr mehr zu diesem Thema erfahren wollt, meldet euch gerne zu einem Lunch and Learn bei uns an und diskutiert mit uns über Möglichkeiten, die wahrgenommene Performance von Web-Applikation zu verbessern.

Diesen Artikel bewerten
 
 
 
 
 
 
 
1 Bewertungen (100 %)
Bewerten
 
 
 
 
 
 
1
5
5