{"id":12283,"date":"2018-02-02T14:56:11","date_gmt":"2018-02-02T13:56:11","guid":{"rendered":"https:\/\/www.sysbus.eu\/?p=12283"},"modified":"2018-01-31T10:01:44","modified_gmt":"2018-01-31T09:01:44","slug":"so-machen-sie-mobile-apps-deutlich-schneller","status":"publish","type":"post","link":"https:\/\/www.sysbus.eu\/?p=12283","title":{"rendered":"So machen Sie Mobile Apps deutlich schneller"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Autor\/Redakteur: Klaus Enzenhofer, Direktor Technologie Strategie bei Dynatrace<\/a>\/gg<\/p>\n

Oftmals optimieren Firmen ihre mobilen Angebote stark in Richtung einfacher Bedienung. Ein sinnvoller Ansatz, doch dabei d\u00fcrfen sie die Performance der Anwendungen nicht vernachl\u00e4ssigen. Denn um Nutzer zu \u00fcberzeugen, das hei\u00dft f\u00fcr die mobile Anwendung zu gewinnen und zu binden, muss diese schnell geladen werden. Sonst kann es vorkommen, dass eine mobil-optimierte Seite zum \u00d6ffnen auf einem Desktop-Chrome-Browser 4,5 Sekunden ben\u00f6tigt, aber viel zu lange, fast 15 Sekunden auf dem mobilen Chrome-Browser. Dieser Fall ist tats\u00e4chlich bei einem Anbieter eingetreten. Woran liegt das?<\/p>\n

<\/p>\n

Um die Ursache herauszufinden, wurde zun\u00e4chst gepr\u00fcft, ob die drei Grundregeln f\u00fcr die Entwicklung einer mobil-spezifischen Anwendung eingehalten wurden. Dies Regeln sollte man beachten, unabh\u00e4ngig davon, ob es sich um eine mobile native App oder wie in diesem Fall um eine f\u00fcr die mobile Nutzung optimierte Website handelt.<\/p>\n

Drei Grundregeln, damit eine einfache Bedienung die Performance nicht beeintr\u00e4chtigt<\/strong><\/p>\n

    \n
  1. Beachten Sie die Akku-Dauer des Mobilger\u00e4ts und vermeiden Sie hohe Belastungen f\u00fcr Prozessor und Netzwerk.<\/li>\n
  2. Ber\u00fccksichtigung des Datentarifs des Smartphone-Inhabers: Vermeiden des Ladens unn\u00f6tiger Ressourcen und Optimierung des Datenverkehrs.<\/li>\n
  3. Denken Sie an die geringere Rechenkapazit\u00e4t von mobiler Hardware im Vergleich zu Notebooks oder Desktop-PCs.<\/li>\n<\/ol>\n

    Im vorliegenden Fall wurden sogar alle drei Regeln missachtet. Was ist hier schiefgelaufen?<\/p>\n

    Ein Blick auf das Wasserfall-Diagramm<\/strong><\/p>\n

    Das Wasserfall-Diagramm in Abbildung 1 zeigt die Android-spezifischen CSS-Dateien. Demnach f\u00fchrt die urspr\u00fcngliche HTML-Datei nicht zu den langen Ladezeiten. Jedoch wird eine sehr gro\u00dfe Anzahl an Ressourcen (285) ben\u00f6tigt, um die Web-Applikation anzuzeigen. Es gibt auch eine auffallende Zeitdifferenz zwischen dem Laden der letzten urspr\u00fcnglichen JavaScript-Ressource und dem Download der ersten CSS-Dateien.<\/p>\n

    \"\"<\/a>
    Abbildung 1: Wasserfall-Diagramm eines realen Mobil-Browsers zeigt Probleme mit der mobilen Web-Performance<\/figcaption><\/figure>\n

    L\u00fccke zwischen JavaScript und CSS<\/strong><\/p>\n

    Woher kommt diese Zeitdifferenz? Bei der detaillierten Betrachtung der ersten Phase des Ladevorgangs der App l\u00e4sst sich erkennen, dass sie nur das absolute Minimum an Code sowie die vier urspr\u00fcnglichen JavaScript-Dateien umfasst. Eine davon bestimmt, welches Ger\u00e4t oder welcher Browser die Anwendung l\u00e4dt. Anschlie\u00dfend f\u00fcgt es die richtigen Ressourcen ein und der Browser startet mit dem Download der CSS-Ressourcen.<\/p>\n

    \"\"<\/a>
    Abbildung 2: Detailansicht der HTML-Ressourcen inklusive W3C Navigation Timings zeigen die hohen Bearbeitungszeiten<\/figcaption><\/figure>\n

    Die scheinbar kurze Zeitspanne dauert nur 306 Millisekunden. Doch in dieser Zeit stellt der mobile Browser nur fest, auf welchem Ger\u00e4t er sich befindet und \u00e4ndert das DOM. Eine \u00e4hnliche zeitliche L\u00fccke gibt es auch auf dem Desktop-Browser, aber hier betr\u00e4gt sie nur 20 Millisekunden. Dies zeigt beispielhaft den Unterschied zwischen der Rechenleistung eines Mobilger\u00e4ts und eines Notebooks, wobei das Mobilger\u00e4t 15-mal langsamer ist.<\/p>\n

    <\/p>\n

    Betreiber von mobilen Angeboten sollten auch eine Nutzung durch \u00e4ltere Ger\u00e4te ber\u00fccksichtigen. Dazu dient etwa der bew\u00e4hrte Sun Spider-Test, der die Leistungsf\u00e4higkeit der Hardware \u00fcberpr\u00fcft. Zum Beispiel ergab er bei einem drei Jahre alten Notebook gegen\u00fcber einem Samsung Galaxy S5 ein Ergebnis von 225 gegen\u00fcber 910 Millisekunden.<\/p>\n

    \"\"<\/a>
    Abbildung 3: Wasserfall-Diagramm zeigt, dass 151 CSS-Dateien zu hohen Blocking-Zeiten f\u00fchren<\/figcaption><\/figure>\n

    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\u00fcr eine mobilfreundliche Web-Applikation. Damit verletzt sie alle drei der eingangs erw\u00e4hnten Regeln: Die zahlreichen Ressourcen f\u00fchren 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.<\/p>\n

    Fazit<\/strong><\/p>\n

    Da mobile Ger\u00e4te nicht die gleiche Rechenleistung besitzen wie herk\u00f6mmliche 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\u00f6\u00dfe der verwendeten Ressourcen. Zu viele davon f\u00fchren zu langsamen mobilen Angeboten und somit zu frustrierten Anwendern.<\/p>\n

    Tipps f\u00fcr ein performantes Web-Angebot <\/strong><\/p>\n

      \n
    • M\u00f6glichst wenig Ressourcen f\u00fcr die Anzeige eines Mobilangebots nutzen<\/li>\n
    • JavaScript-Dateien auf eine geringe Anzahl reduzieren<\/li>\n
    • Keine zu gro\u00dfen Dateien erstellen, welche den Prozessor des Mobilger\u00e4ts belasten<\/li>\n
    • Nicht zu kleine Dateien verwenden, die zu unn\u00f6tig hohem Netzwerkverkehr f\u00fchren<\/li>\n
    • Nur den notwendigen Code laden, um den Akku des Mobilger\u00e4ts zu schonen<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      Autor\/Redakteur: Klaus Enzenhofer, Direktor Technologie Strategie bei Dynatrace\/gg Oftmals optimieren Firmen ihre mobilen Angebote stark in Richtung einfacher Bedienung. Ein<\/p>\n","protected":false},"author":3,"featured_media":12276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[8,197],"tags":[1588,1765,3737,4297,6855,10947,1386,5968,10949,5099,4307,3483,10950,541,19,10948,369,1701],"class_list":["post-12283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artikel","category-entwicklung","tag-akku","tag-browser","tag-chrome","tag-code","tag-css","tag-datentarif","tag-desktop","tag-dom","tag-galaxy-s5","tag-geschwindigkeit","tag-html","tag-javascript","tag-layout","tag-mobile-app","tag-performance","tag-rechenleistung","tag-samsung","tag-smartphone"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/posts\/12283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12283"}],"version-history":[{"count":1,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/posts\/12283\/revisions"}],"predecessor-version":[{"id":12284,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/posts\/12283\/revisions\/12284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=\/wp\/v2\/media\/12276"}],"wp:attachment":[{"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sysbus.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}