Performance und mobile Webseiten

Immer mehr Anbieter bieten Ihre Webseiten auch als mobile Version an. Oft sind diese Seiten jedoch relativ langsam oder funktionieren nicht richtig flüssig. Doch was gilt es zu beachten damit eine mobile Webseite schnell geladen wird und wie gewünscht funktioniert? Mobile Endgeräte sind nicht so leistungsfähig wie Desktopgeräte und das rendern einer Webseite auf einem Smartphone ist 40% - 80% langsamer. Ein Beispiel durch den „Sunspider JavaScript Benchmark“ belegt, dass die Ausführung  eines JavaScripts mindestens das 10 fache an Zeit benötigt.

Performance im Mobile-Web

Endgerät Zeit in ms
Desktop Rechner, 3.33 GHz mit Chrome 15 231,9 ms +/- 2,0 %
Apple iPad 3402,2 ms +/- 0,3 %
Samsung Galaxy S 6865,4 ms +/- 3,1 %
  Das Handy Netz ist zum Teil erheblich langsamer. Es können zwar auch auf einem Smartphone Browser mehrere Dateien gleichzeitig geladen werden, aber aufgrund der geringen Bandbreite dauert es erheblich länger bis alle Daten vollständig zur Verfügung stehen. Im mobilen Web ist jeder HTTP-Request sehr zeitintensiv und erhöht damit die Ladezeit. Deshalb sollte man am besten JavaScript und CSS Dateien zusammen fassen. Außerdem ist es empfehlenswert Bilder zu skalieren und zu Optimieren. Hierbei ist auch wichtig, dass das richtige Bildformat gewählt wird. Dabei steht das PNG Format vor dem GIF Format und auf das JPEG Format sollte man möglichst ganz verzichten. Desweiteren können die HTTP-Requests beim Laden mehrerer Bilder durch die Verwendung von „Sprites“ deutlich verringert und damit natürlich die Ladezeit optimiert werden. HTML5 und CSS3 ersetzen viele Grafiken und sparen Performance Fast alle  mobilen Browser unterstützen die meisten Features von HTML5 und CSS3. Somit ist es zum Beispiel möglich Buttons mit abgerundeten Ecken zu erstellen ohne dass dafür auch nur ein Bild notwendig wäre. Eine schöne Neuerung an HTML5 sind auch die verschiedenen Eingabefelder. Mit dem Typ „number“ ist es beispielsweise mit einem mobilen Browser möglich, dass nur der Ziffernblock angezeigt wird und nicht die komplette Tastatur.   Hier nochmal alle Punkte auf einen Blick:
  • Weiterleitungen sind Performance Killer
  • So wenig HTTP-Requests wie nur möglich verwenden
  • JavaScript und CSS zusammenfassen und komprimieren
  • Bilder skalieren und „Sprites“ verwenden