So machen Sie mobilen Web Anwendungen Beine

mobilen web anwendungen

Viele Betreiber von mobilen Angeboten optimieren ihre in Richtung einfacher Bedienung. Sicher ein sinnvoller Ansatz, doch dabei dürfen sie die Performance der mobilen Web Anwendungen nicht aus dem Auge verlieren.

Denn um Nutzer zu überzeugen und für die mobilen Web Anwendungen zu gewinnen, müssen diese schnell werden. Sonst kann es vorkommen, dass eine mobil-optimierte Seite zum Öffnen auf einem Desktop-Chrome- 4,5 Sekunden benötigt, aber viel zu lange fast 15 Sekunden auf dem mobilen Chrome-Browser. Dieser Fall ist tatsächlich bei einem Anbieter eingetreten. Woran liegt das?

Um die Ursache herauszufinden, wurde zunächst geprüft, ob die drei Grundregeln für die Entwicklung einer mobil-spezifischen Anwendung eingehalten wurden. Diese Regeln sollte man beachten, unabhängig davon, ob es sich um eine mobile native oder – wie in diesem Fall – um eine für die mobile Nutzung optimierte handelt.

3 Grundregeln, damit eine einfache Bedienung die Performance nicht beeinträchtigt

  1. Beachten Sie die Akku-Dauer des Mobilgeräts und vermeiden Sie hohe Belastungen für Prozessor und
  2. Berücksichtigung des Datentarifs des Smartphone-Inhabers: Vermeiden des Ladens unnötiger Ressourcen und Optimierung des Datenverkehrs
  3. Denken Sie an die geringere Rechenkapazität von mobiler Hardware im Vergleich zu Notebooks oder Desktop-PCs

Im vorliegenden Fall wurden sogar alle drei Regeln missachtet. Was ist hier schiefgelaufen?

Ein Blick auf das Wasserfall-Diagramm

Das Wasserfall-Diagramm in Abbildung 1 zeigt die Android-spezifischen CSS-Dateien. Demnach führt die ursprüngliche HTML-Datei nicht zu den langen Ladezeiten. Jedoch wird eine sehr große Anzahl an Ressourcen (285) benötigt, um die Web-Applikation anzuzeigen.

Es gibt auch eine auffallende Zeitdifferenz zwischen dem Laden der letzten ursprünglichen JavaScript-Ressource und dem Download der ersten CSS-Dateien.

Abbildung 1: Wasserfall-Diagramm eines realen Mobil-Browsers zeigt Probleme mit der mobilen Web-Performance.

Lücke zwischen JavaScript und CSS

Woher kommt diese Zeitdifferenz? Bei der detaillierten Betrachtung der ersten Phase des Ladevorgangs der App lässt sich erkennen, dass sie nur das absolute Minimum an Code sowie die vier ursprünglichen JavaScript-Dateien umfasst.

Eine davon bestimmt, welches Gerät oder welcher Browser die Anwendung lädt. Anschließend fügt es die richtigen Ressourcen ein und der Browser startet mit dem Download der CSS-Ressourcen.

Abbildung 2: Detailansicht der HTML-Ressourcen inklusive W3C Navigation Timings zeigen die hohen Bearbeitungszeiten.

Die scheinbar kurze Zeitspanne dauert nur 306 Millisekunden. Doch in dieser Zeit stellt der mobile Browser nur fest, auf welchem Gerät er sich befindet und ändert das DOM.

Eine ähnliche zeitliche Lücke gibt es auch auf dem Desktop-Browser, aber hier beträgt sie nur 20 Millisekunden. Dies zeigt beispielhaft den Unterschied zwischen der Rechenleistung eines Mobilgeräts und eines Notebooks, wobei das Mobilgerät 15-mal langsamer ist.

Betreiber von mobilen Angeboten sollten auch eine Nutzung durch ältere berücksichtigen. Dazu dient etwa der bewährte Sun Spider-Test, der die Leistungsfähigkeit der Hardware überprüft. Zum Beispiel ergab er bei einem drei Jahre alten Notebook vs. einem Samsung S5 ein Ergebnis von 225 gegenüber 910 Millisekunden.

Abbildung 3: Wasserfall-Diagramm zeigt, dass 151 CSS-Dateien zu hohen Blocking-Zeiten führen.

Ein detaillierter Blick auf die Ressourcen ergab, dass nicht weniger als 151 CSS-Dateien genutzt wurden, wie das Wasserfall-Diagramm in Abbildung 3 zeigt. Das ist deutlich zu viel für eine mobilfreundliche Web-Applikation.

Damit verletzt sie alle drei der eingangs erwähnten Regeln: Die zahlreichen Ressourcen führen zu einer hohen Beanspruchung des Netzwerks, die vielen JavaScript-Dateien zu einer Belastung der Prozessorleistung und in Kombination mit dem enormen Netzwerk-Traffic ergibt sich daraus eine starke Akku-Beanspruchung.

Fazit

Da mobile Geräte nicht die gleiche Rechenleistung besitzen wie herkömmliche Notebooks und Desktop-PCs, erfordert die Erzeugung einer mobilfreundlichen Nutzung mehr als nur den Einsatz eines anderen CSS-Layouts.

Es geht auch um die Anzahl und Größe der verwendeten Ressourcen. Zu viele davon führen zu langsamen mobilen Angeboten und somit zu frustrierten Anwendern.

Tipps für ein performantes Web-Angebot

  • Möglichst wenig Ressourcen für die Anzeige eines Mobilangebots nutzen
  • JavaScript-Dateien auf eine geringe Anzahl reduzieren
  • Keine zu großen Dateien erstellen, welche den Prozessor des Mobilgeräts belasten
  • Nicht zu kleine Dateien verwenden, die zu unnötig hohem Netzwerkverkehr führen
  • Nur den notwendigen Code laden, um den Akku des Mobilgeräts zu schonen

Über den Autor: Klaus Enzenhofer verfügt über mehr als sieben Jahre Erfahrung und Fachwissen in den Bereichen Web Performance Optimisation und User Experience Management. Der Director Technical Strategist arbeitet leitend im Centre of Excellence Team von Dynatrace. In dieser Funktion bestimmt er die Entwicklung der Performance Management-Lösung von Dynatrace maßgeblich mit, mit den Schwerpunkten Real User Monitoring von Web und Mobile Applikationen.  Enzenhofer spricht regelmäßig auf Konferenzen über Real User Monitoring, Performance und zugehörige Themen und schreibt zahlreiche Artikel für Print und online Publikationen sowie Blogs.
https://twitter.com/kenzenhoferhttps://www.linkedin.com/in/klaus-enzenhoferhttp://www.slideshare.net/kenzenhofer

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


Ich bestätige, dass die hier von mir eingegebenen persönlichen Daten in der von mobile zeitgeist genutzten Datenbank bis auf Widerruf gespeichert werden dürfen.