Zusammenfassung: Damit Websites auch bei mobiler Internetverbindung schnell angezeigt werden, muss (a) die Anzahl der HTTP-Requests niedrig sein und  (b) die wichtigsten Styling-Informationen müssen dem Browser bekannt sein, bevor das Dokument das erste mal gerendert wird.

In der letzten Woche bin ich über mehrere Vorträge und Artikel zum Thema Website Performance gestolpert. Besonders Latenzen sind bei mobilen Seiten recht interessant und haben mir einige Sachen gezeigt, an die ich bisher noch keinen Gedanken verschwendet habe.

Ein Browser muss viel Arbeit erledigen, bis er eine Website anzeigen kann. Wie schnell die Arbeit geschafft ist, hängt besonders stark von der Qualität der Internetverbindung und der Hardware ab.

Bis etwa 2008 waren die meisten Geräte, die Websites angezeigt haben, Desktop-Computer und Laptops, ausgerüstet mit viel Arbeitsspeicher, Rechenleistung und guter Internet-Verbindung. Dann kamen die Smartphones. Mit ihnen schnarchend langsame Prozessoren, wenig Arbeitsspeicher und wackelige Internetverbindungen.

Auf einmal wurde es schwierig, Websites zu entwickeln, die auf allen Geräten schnell angezeigt werden. Google hat  sich zum Ziel gesetzt, dass zwischen dem Druck auf die Enter-Taste und der fertig dargestellten Website nicht mehr als 1 Sekunde liegt. Egal ob unterwegs oder zuhause am Schreibtisch.

Auf Mobilgeräten gibt es zwei Schritte, die besonders lange dauern: der Verbindungsaufbau zum Server und das Rendern des gelieferten HTML-Dokuments.

Latenzen minimieren

Zunächst muss das Smartphone eine Verbindung zum nächsten Mobilfunkmast aufbauen. Wie gut das klappt und wie schnell es geht, hängt davon ab, wie weit die Entfernung zum nächsten Mast ist, ob andere Signale die Kommunikation stören, wie viele Stahlbetonwände durchquert werden müssen usw.

Die Zeit, bis die Verbindung steht, ist die Latenz. Latenzen sind bei mobilen Internet-Verbindungen deutlich höher als bei Wifi- oder Ethernet-Verbindungen.
Diese Latenzen fallen nicht nur für das Laden des HTML-Dokuments an, sondern zusätzlich für jedes Bild, jedes Stylesheet, jede JavaScript- und Schriftdatei. Allein die Latenzen können sich auf diesem Weg in den Bereich von Sekunden summieren. Was kann man also tun, um Latenzen gering zu halten?

An der Latenz selbst ist wenig zu rütteln. Spart man aber HTTP-Requests, summieren sich auch die Latenzen weniger auf. Dazu verknüpft man Stylesheets und JavaScripts nicht als Dateien (die neue Requests verursachen würden), sondern bettet sie in <style> und <script> Elemente im Dokument ein. Für Stylesheets und JavaScript überschaubarer Größe (z.B. in diesem Blog) funktioniert das prima (Anmerkung: Dieser Ansatz verhindert allerdings Browser-Caching und ist deshalb bei großen JavaScript- und CSS-Dateien nicht geeignet. Dazu gleich mehr.)

Unnötige Render-Zyklen vermeiden

Aus dem HTML-Dokument und den mitgelieferten Stylesheets kann der Browser das Dokument rendern, also auf den Bildschirm malen. Im Gegensatz zu JavaScript-Dateien werden extern verknüpfte Stylesheets vom Browser asynchron geladen, d.h. wenn der Browser ein verknüpftes Stylesheet findet, startet er im Hintergrund eine HTTP-Anfrage, wartet aber nicht, bis das Stylesheet geladen ist, sondern macht damit weiter, das Dokument zu zeichnen. Ist das angefragte Stylesheet geladen, interpretiert es der Browser es und rendert das HTML-Dokument erneut . Das heißt: Immer, wenn ein neues Stylesheet fertig geladen ist, muss der Browser das Dokument neu auf den Bildschirm pinseln. Das dauert auf Mobilgeräten, die weder viel Arbeitsspeicher noch Rechenleistung besitzen, lange. Es gilt also, unnötige Render-Zyklen zu vermeiden. Das lässt sich einfach realisieren: möglichst nur ein Stylesheet pro HTML-Dokument verknüpfen und/oder Stylesheets direkt im Dokument einbetten (siehe oben).

Praktikabel ist dabei eine Zweiteilung:
Die Styling-Informationen, die notwendig sind, um den sofort sichtbaren Bereich des Dokuments anzuzeigen, sollten direkt im HTML-Dokument eingebettet sein, noch vor dem öffnenden <body>-Element. So weiß der Browser noch vor dem ersten Rendern, wie der sichtbare Bereich aussehen soll. Alles weitere kann in einem verknüpften Stylesheet stehen, sodass viele Styling-Informationen (die wahrscheinlich noch nicht benötigt werden) das Rendern des Dokuments blockieren.

Diese zwei Verbesserungen helfen dabei, Latenzen zu minimieren und unnötige Render-Zyklen zu vermeiden.
Unten gibt’s noch einige Links und Vorträge zum Thema.
Dann sind da natürlich noch Output-Compression, Server-seitige Optimierungen, Caching und der richtige Umgang mit Bildern auf mobilen Websites. Aber das steht auf einem anderen Blatt.

Ein Vortrag zum Thema, Statistiken, Probleme, Lösungen: Breaking the 1000ms barrier:
Breaking the 1000ms Time to Glass Mobile Barrier

mod_concat, ein Apache-Modul, das „on the fly“ Dateien verkettet und http requests sparen kann. Interessant für WordPress und sowas:
Apache mod_concat

mod_deflate, Ein Apache-Modul, das Dateien gzipped:
Apache mod_deflate

mod_expires, ein Apache-Modul, das sich um Caching-Anweisungen für Web-Browser kümmert:
Apache mod_expires