Wie man eine Webseite auf Speed trimmt – ein unkonventioneller Ansatz

In einer finnischen Studie aus dem Jahre 2017 konnten die beteiligten Forscher nachweisen, dass in Deutschland im Vergleich zu anderen EU-Ländern ein weit höherer Preis pro mobil genutztem Gigabyte veranschlagt wird. In einem Tarif, der im Monat 30 Euro kostet, sind in Deutschland im besten Falle ca. 15 GB enthalten, während man in Frankreich, UK oder Schweden für den gleichen Preis 100 GB(!) bekommt.

Was die Preise für mobile Datentarife angeht sind wir also, freundlich ausgedrückt, keine Weltspitze.
Not macht allerdings erfinderisch, so kann man sich als Webentwickler auf technische Weise in die Lage eines Menschen hineinversetzen, der trotz aktiver Drossel auf Informationen im Netz zugreifen möchte oder muss, und die Webseite dann so anpassen, dass sie in der mobilen Version dennoch in angemessener Zeit geladen wird.

Es ist relativ einfach, diese „mobile Hölle“ zu simulieren. Dazu ist es nötig, die Geschwindigkeit des eigenen Netzwerks so anzupassen, dass dem Gerät langsame 3G bzw. GPRS-Verbindungen vorgespielt werden.
Möglich ist dies mit den oft übersehenen Chrome-DevTools, in denen man unter dem Performance-Reiter Speicher- Prozessorgeschwindigkeits- und Bandbreitenlimitierungen einstellen kann.

Ist dies geschehen, lässt sich die erstellte Webseite auf Geschwindigkeit unter widrigen Umständen testen und optimieren. So kommt heraus, dass das Öffnen von Google allein 1,1 MB an Ressourcen verbraucht.



Wie bringt man nun aber die Seite dazu, unter eben diesen widrigen Bedingungen möglichst schnell zu antworten?
Nun, dazu gibt es verschiedene Überlegungen.

1. Den kritischen Bereich einer Webseite optimieren und/oder von der Hauptseite abtrennen. Beispielsweise könnte man hier am Beispiel der mobilen Webseite der Deutsche Bahn dafür sorgen, dass das Abfrageformular für Zugverbindungen optional bzw. auf Wunsch auf reinem Text beruht - ohne Bilder, ohne Grafiken, ohne CSS, ohne Skripte. „(Deutschebahn.de/SlowConnection)“

2. Als weitere (automatische) Maßnahme könnte man dafür sorgen, dass eine Webseite beim Erstkontakt einen Verbindungstest mit wenigen übertragenen Kilobyte beginnt und dann die gemessene Geschwindigkeit in einem Cookie gespeichert wird und zu entsprechenden Resultaten führt, beispielsweise könnte dann das in Punkt 1 dargelegte Verfahren gestartet werden, oder es könnten, ebenfalls auf automatischer Basis, Bilder und Animationen, die normalerweise vorhanden wären, durch „leichtere Kost“ ersetzt oder ersatzlos gestrichen werden.

3. Javascript-Code erst am Ende der Webseite einfügen.
Javascript begegnet euch auf so gut wie allen Seiten im Netz, und normalerweise ist diese Scriptsprache eine Bereicherung für jede Webseite, da sie es ermöglicht, Automationen abzuarbeiten oder Interaktivität via Buttons und Co. zu ermöglichen. Allerdings hat all das auch einen Nachteil: Während Javascript-Code geladen wird, kann aufgrund technischer Beschränkungen kein anderer Download stattfinden, paralleles Laden wird also blockiert. Fügt man also entsprechenden Code erst am Ende ein, können kritische Ressourcen einer Webseite zuerst geladen werden, und erst danach kommen die „Bells and Whistles“.

4. GZIP Kompression verwenden. Sicher kennt ihr alle .zip-Archive, in denen Daten zusammengefasst und komprimiert werden können – warum nicht also dieses Verfahren auch im Web anwenden? Normalerweise war es in der Vergangenheit so, dass der tatsächliche Schritt der Dekompression auf dem Gerät das Laden der Webseite am Ende nicht beschleunigte, sondern verlangsamte, obwohl Datenvolumen eingespart wurde. Durch gZIP (an Stelle von .zip) ist es aber möglich, diesen Nachteil (fast) zu überwinden und gleichzeitig die Größe einer Webseite um satte 70% zu verringern.


Ihr seht also, einiges ist möglich – noch viel mehr als in diesen Artikel passen würde, schließlich ist das Thema wie ihr sicherlich vermutet habt hochkomplex.
Alles Genannte (und mehr) tun wir auf Wunsch natürlich auch für euch – lasst eure Kunden nicht warten 😉
Wendet euch gern an uns, wenn ihr weitere Fragen habt, wir sind wie immer für euch da!