4 Mobile Performance Regeln

Wenn es etwas gibt das niemand leiden kann, dann sind das lange Ladezeiten. Und da ist man auch nicht besonders geduldig mit Websites. Wenn Google seine Website um 0,4 Sekunden verzögert ausspielt, dann bedeutet das -0,59% weniger Suchanfragen am Tag von diesem Besucher – statistisch erwiesen! Bing hat den gleichen Test mit einer Verzögerung von 2 Sekunden ausprobiert und gibt einen Verlust im Umsatz pro Nutzer um -4,3% an. Wirtschaftlich gesehen ist Website Performance ein wichtiger, wenn nicht sogar der wichtigste Faktor  zum Erfolg.

Wie man die Performance für übliche Websites optimiert weiß man schon lange. Trotzdem ärgert sich so mancher Nutzer bis heute noch massiv über mobil abgerufene Websites: „Wieso braucht die so lange?!“ Zur Verbesserung hier ein paar Best Practices zur Performanceoptimierung bei mobilen Websites.

Grundlagen zuerst

Bevor es mit den Tipps losgeht, müssen einige Basispunkte geklärt sein. Fangen wir bei der Unterscheidung in Backend- und Frontend-Performance bei Websites an. Alles, was vor der Auslieferung der HTML-Objekte (Website) passiert, wird aus Sicht des Benutzers als Backend angesehen. Dazu gehört der Aufbau einer Website vom Server, inklusive aller Anfragen an Datenbanken, PHP Skripte, usw. Sobald das Paket an den Nutzer übertragen ist, wird von der Frontend-Performance gesprochen. Diese beinhaltet den Aufbau der kompletten Website, Stück für Stück (z. B. Bilder beim Server abrufen, externe Inhalte laden, Tracking-Funktionen ausführen, usw.).

Steve Souders – Unterscheidung zwischen Frontend und Backend Performance

Steve Souders gilt als der Website Performance Guru schlechthin. Von ihm stammt das im Bild angeführte Zitat. Es gilt also: Kümmert euch vor allem um die Frontend Performance – hier findet man den längeren Hebel!

Unberechenbar

Neben diesen Grundlagen sollte man bedenken, dass Performance kein definierter Wert ist. Neben harten Fakten wie Ladezeit kommen eben auch weiche Faktoren wie die Gestaltung der Website hinzu. Wenn eine Website schnell geladen ist, aber ich die Information die ich gesucht habe nicht auf Anhieb finde, sondern mich zwischen Werbebannern und schlechter Navigation zurechtfinden muss, dann sinkt die gefühlte Performance.

Hinzu kommt, dass gerade Smartphones mitunter einer schlechter Verbindung zum Netz ausgesetzt sind. Wenn mal wieder das E-Logo statt 3G erscheint, dann ist man schon von vornherein über die mangelnde Performance verärgert.

Testumgebungen, die einen guten Eindruck über die eigene Performance vermitteln, sind nur sehr schwer herzustellen. Deshalb sollte man auch hier einfach versuchen sich an festen Zahlen zu halten, die einen Richtwert ermöglichen. Dazu gehören z. B. die Gesamtgröße der Website oder die Zahl an HTTP-Requests.

Und hier die versprochenen Tipps:

1. Regel: Keep it Simple Stupid – die KISS Regel

Kelly Johnson gilt als Erfinder der Regel, die besagt, man solle alles so einfach wie nur möglich halten. Nichts ist wahrer als genau diese Regel für mobile Websites. Die Performance steckt hier im Paket schon mit drin. Es muss eine minimalistische Website für mobile Geräte bereit gestellt werden (wer die Unterscheidung zwischen Mobile und NonMobile nicht macht, der braucht hier gar nicht weiter lesen: Zuerst kommt die Mobile Website!). Dabei gilt KISS als Grundprinzip: Große Grafiken, viel Text und viele Features vermeiden. Konzentrier dich auf die wesentlichen Punkte und du bist auf dem besten Weg.

2. Regel: Vermeide HTTP-Requests

Diese Grundregel hört man immer, sobald es um Website Performance geht. Erst recht wenn man bedenkt, dass ein HTTP-Request auf dem Mobiltelefon im Durchschnitt 30% größer ist. Dabei kann man ganz leicht unnötige Requests vermeiden, wenn man sich das Box-Prinzip merkt. Dazu verschickt man innerhalb einer Anfrage nicht ein Objekt, sondern eine Objektsammlung gleichartiger Objekte. Wenn eine Hintergrundgrafik benötigt wird, dann schicke ich eine Sprite Grafik zurück, die mehrere unterschiedliche Grafiken enthält. Wenn eine JS-Datei benötigt wird, dann sollte sie nicht nur ein paar Methoden enthalten, sondern auch alle anderen, die man benötigt. Wenn eine HTML-Seite übertragen wird, kann man im HTML als Fließtext eine Inline-Grafik verschlüsselt mitschicken (siehe Base64-Verschlüsselung). Dieses einfache Prinzip im Hinterkopf behalten und die HTTP-Requests nehmen von ganz alleine ab.

Und hier noch ein Quick-Win: keine Umleitung der Startseite, wenn der Besucher von einem Mobiltelefon www.website.de aufruft. Einfach eine interne Weiche stellen und nicht mit einem 301-Redirect auf m.website.de verweisen. Dies spart wieder einen Request und hat keinen SEO-Nachteil.

3. Regel: Inhalte dynamisch nachladen

Programmierern sollte „Lazy Load“ ein Begriff sein. Gerade bei mobilen Webseiten sollte man Inhalte, die nicht direkt benötigt werden, verzögert nachladen. Sobald der Nutzer nach unten scrollt, wird der Footer per AJAX nachgeladen. Übrigens ist AJAX auf Android und iPhone eine bekannte Funktion – und kann also genutzt werden.

Gerne können so auch ganze Websites vorgeladen werden, wie z. B. bei Google die ersten Suchergebnisse, die am wahrscheinlichsten angeklickt werden.

 4. Regel: Mache Cache zu deinem Freund

Um Cache auf Mobilen Browsern nutzen zu können sollte man die Restriktionen kennen. Denn ein iPhone wird nur bedingt Speicher für einen Browser frei geben, was auch durchaus verständlich ist. Derzeit sind knapp 25kb je Datei und 500kb Cache im Browser insgesamt (keine Herstellerangaben sondern Selbstversuche von zahlreichen Autoren) verfügbar. Unbedingt sollte man also minimalistisch bleiben und die zu cachenden Dateien entsprechend klein halten.

Weiterhin muss man sich unbedingt mit den erweiterten Caching Möglichkeiten in HTML 5 bekannt machen. So hat die Web Anwendung Google Mail einiges an Performance rausgeholt und in einem sehr gut beschriebenen Prozess im Entwickler-Blog publiziert. Absolute Leseempfehlung.

Wer diese einfachen Regeln im Auge behält sollte bei der Umsetzung seiner Mobile Website gute Karten haben. Fallen Euch noch mehr Regeln ein? Dann schreibt einen Kommentar.