Web

Performance, Usability, Design

So machen Sie mobile Websites flott

02.11.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.

Schritte zum Performance-Glück

Um performante mobile Websites anzubieten, sollte ein Unternehmen im Wesentlichen fünf Punkte beachten.

  • Wenige Elemente

Gerade eine große Anzahl einzelner Seitenelemente treibt die Ladezeit in die Länge. Objekte, die nicht zwingend erforderlich sind, sollten vermieden werden. Besonders Grafiken stehen hier im Fokus: Weblinks, die hinter Grafiken liegen, lassen sich genauso gut mit reinem Text darstellen. Ideal ist es, den Quelltext so weit wie möglich von Detailinformationen für einzelne Unterseiten zu befreien und die gesamte Page modular aufzubauen, damit der Browser wiederholende Seitenelemente und Dateien besser zwischenspeichern kann.

  • "Lange Seiten" vermeiden

Je weniger der Anwender auf einmal laden muss, desto benutzerfreundlicher ist die Seite. Finden Sie heraus, an welchen Stellen der Nutzer unterwegs ist, und konzentrieren Sie den Seiteneinstieg darauf. Weitere Seitenbereiche lassen sich mit "unendlichem Scrollen" nachladen oder über den vermehrten Einsatz von Seitenumbrüchen erreichen.

  • Dateigrößen reduzieren

Hier geht es vor allem um die Bilder auf der Seite: Fotos sollten immer optimiert auf dem Server gespeichert werden. Das betrifft in erster Linie Auflösung und Skalierung. Als Grenze eignen sich zehn Kilobyte gut. Größere Grafiken und Fotos sollten Sie möglichst verkleinern, komprimieren oder gleich ganz austauschen. Verlassen Sie sich nicht darauf, dass der mobile Browser die Kompression automatisch vollzieht. Auch Javascript-Elemente geraten gerne ein wenig größer. Sie sollten deshalb so gut wie möglich zusammengefasst und an den Anfang des Quellcodes gestellt werden, sofern sie essenziell für die Seite sind. Nutzen Sie das Multitasking des Browsers.

  • Redirects entfernen

Viele mobile Seiten lassen sich nur über eigens dafür vorgesehene Adressen wie m.Seite.de oder Seite.mobi erreichen. Diese URLs sind jedoch lediglich zeitfressende Umleitungen auf die mobile Version der stationären Website. Die elegantere Lösung: Der Server erkennt mit einem entsprechenden Codeeintrag selbst, mit welchem Gerät die Seite abgerufen werden soll, und leitet den Anwender auf die dem Endgerät entsprechende Version um. Das spart häufig die entscheidenden Sekunden.

  • Vorsicht bei Drittanbietern

Wenn Inhalte von Drittanbietern wie Zählpixel, Bilder oder Werbebanner in die mobile Website eingebunden werden sollen, muss sichergestellt sein, dass sie nicht den gesamten Ladeprozess aufhalten. Ist ein Banner gerade nicht verfügbar oder ein ausländischer Statistik-Server antwortet nur langsam, bleibt das Display häufig komplett weiß, weil die Seite nicht weiterladen kann. Kopieren Sie nach Möglichkeit alle Grafiken von Drittanbietern auf ihren eigenen Server - beispielsweise das Twitter-Icon - und verlinken Sie die lokale Grafik dann auf die entsprechende Zielseite. Arbeiten Sie nicht mit externen Javascript-Befehlen, die nicht für den mobilen Zugriff ausgelegt sind. Generell sollte jedweder Drittinhalt erst nach den kritischen Teilen der Site geladen werden. Wenn Sie keinen Einfluss darauf haben, ist zumindest ein ausreichendes Monitoring der Performance dieser Elemente wichtig!