Foto: matthis_GERMA/pixabay (CCO)
Wie bereits im vorherigen Beitrag erläutert, sollte bei der Erstellung eines mobilen Angebotes besonderer Wert auf die Performance, d.h. auf kurze Lade- und schnelle Reaktionszeiten gelegt werden. Folgende Tipps geben (ohne Anspruch auf Vollständigkeit) einen groben Überblick über Optimierungsansätze:
Einsatz von Tools
Um die Effektivität von Optimierungen überprüfen zu können, sollte man sich entsprechender Tools bedienen. Alle Browser bieten beispielsweise Erweiterungen an, um die Netzwerkkommunikation zu verfolgen. Zu nennen ist hier beispielsweise das Firebug Plug-in des Browsers Firefox (vgl. Maurice 2012a, S. 118f).
Zudem existiert im Web eine ganze Reihe von kostenlosen Angeboten (beispielsweise unter mobitest.akamai.com), auf denen man die Performance einer Website mit unterschiedlichen Geräten testen kann (vgl. Gardner et al. 2012, S. 47).
Codeoptimierung
Jeglicher Code sollte im Hinblick auf die Performance optimiert werden. Das bedeutet beispielsweise, möglichst auf Tabellenlayouts oder HTML-Formatierungsangaben zu verzichten und dies stattdessen vollständig über CSS zu realisieren. Sowohl im HTML- als auch im CSS-Code sollte nur das stehen, was wirklich gebraucht wird (vgl. Maurice 2012a, S. 119–120). Mit sog. CSS- und JavaScript Minifiern lässt sich Code von überflüssigen Zeilenumbrüchen, Kommentaren und Leerzeichen bereinigen (vgl. Chilton 2014).
Auch die Reihenfolge der Elemente im Code spielt eine Rolle: CSS Dateien sollten möglichst weit oben im HTML-Dokument eingebunden werden, JavaScript hingegen besser unten – somit kann die Seite früher angezeigt werden, auch wenn noch nicht jedes Script aktiv ist (vgl. Zillgens 2013, S. 331–332).
Reduktion von HTTP-Requests
Für jedes auf einer Website eingebundene Element (Bilder, JavaScript-Dateien usw.) muss der Browser eine einzelne Anfrage (HTTP-Request) an den Server senden. Ein Browser arbeitet die hierzu benötigten Verbindungen zum Server gemäß der Spezifikationen des HTTP-1.1 Protokolls jedoch nicht alle parallel zueinander ab –maximal sechs Anfragen können gleichzeitig verarbeitet werden. Jede weitere Anfrage muss „warten“, bis eine andere beendet wurde. Jeder HTTP-Request erzeugt dabei einen gewissen „Verwaltungsaufwand“, den sog. Overhead. Könnte der Browser alle benötigten Dateien gleichzeitig abrufen, würde dieser Overhead nur einmalig Zeit kosten – da die Abrufe jedoch nacheinander ablaufen, summiert sich der Zeitaufwand. Die Overheads sind zwar nicht groß, benötigen dennoch eine gewisse Übertragungszeit. Hierbei spielt die bereits erwähnte Latenz eine Rolle – damit ist allgemeinverständlich ausgedrückt die Reisezeit gemeint, die der Informationsaustausch zwischen Client und Server benötigt – ohne das überhaupt Nutzdaten übertragen wurden. Latenzen sind bei Mobilfunkverbindungen technisch bedingt grundsätzlich höher als bei der Übertragung per Kabel (vgl. Zillgens 2013, S. 318–320).
Aus diesem Grund sollte die Anzahl der HTTP-Requests so gering wie möglich gehalten werden. Erreichen lässt sich dies beispielsweise durch das Zusammenführen mehrerer JavaScript- oder CSS-Dateien zu jeweils einer Datei. Für kleine Grafiken und Icons bieten sich CSS-Sprites an. Hierbei werden mehrere Einzelgrafiken in einer größeren Bilddatei zusammengefasst. Via CSS und der Angabe background-position wird dann anstelle der Originalgrafik ein Ausschnitt aus jener großen Bilddatei angezeigt. Auch Social-Media-Buttons verursachen unnötig viele HTTP-Requests und sollten (sofern möglich) vermieden bzw. durch Grafiken oder einfache Links ersetzt werden (vgl. Zillgens 2013, S. 321-329, 337-339,347-348).
Asynchrones Laden via Ajax und Lazy Loading
Ebenfalls kann sich das asynchrone Laden von Inhalten beträchtlich auf die Ladezeiten auswirken. Dabei wird bei bestimmten Elementen der Seite bewusst darauf verzichtet, sie beim Hauptladevorgang mit herunterzuladen. Man lädt die Komponenten (Bilder usw.) dann beispielsweise nach, sobald sie beim Scrollen in den sichtbaren Bereich kommen. Mittels der auf JavaScript und XML basierenden Technologie Ajax lassen sich auch ganze Teilbereiche der Seite nachladen, ohne die komplette Website neu zu laden (vgl. Zillgens 2013, S. 345–346; Maurice 2012a, S. 121).
Sonstige Hinweise zur Performance-Optimierung
Wie eingangs bereits erwähnt, ist das Thema Performance-Optimierung überaus umfangreich. Es existieren zahlreiche weitere Möglichkeiten, die Performance einer Website zu verbessern. Zu nennen sind hier beispielsweise die komprimierte Übertragung (GZIP), Caching, die Nutzung von Content Delivery Networks, HTML5 Web Storage oder das async-Attribut – weitere Informationen hierzu finden sich unter den entsprechenden Keywords im Netz (vgl. Zillgens 2013, S. 351; Maurice 2012a, S. 125–131; W3C 2013f).
