So machen Sie Mobile Apps deutlich schneller

Autor/Redakteur: Klaus Enzenhofer, Direktor Technologie Strategie bei Dynatrace/gg

Oftmals optimieren Firmen ihre mobilen Angebote stark in Richtung einfacher Bedienung. Ein sinnvoller Ansatz, doch dabei dürfen sie die Performance der Anwendungen nicht vernachlässigen. Denn um Nutzer zu überzeugen, das heißt für die mobile Anwendung zu gewinnen und zu binden, muss diese schnell geladen werden. Sonst kann es vorkommen, dass eine mobil-optimierte Seite zum Öffnen auf einem Desktop-Chrome-Browser 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. Dies Regeln sollte man beachten, unabhängig davon, ob es sich um eine mobile native App oder wie in diesem Fall um eine für die mobile Nutzung optimierte Website handelt.

Drei 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 Netzwerk.
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.

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.

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.