Die eierlegende Wollmilchsau RESS
Kommentare

Man kann High-Performance auf Mobile Websites auf verschiedene Arten erzielen. Roman Cremin hat auf Smashing Magazin mal zusammengefasst, was man in dieser Hinsicht mittels RESS, also Responsive Design

Man kann High-Performance auf Mobile Websites auf verschiedene Arten erzielen. Roman Cremin hat auf Smashing Magazin mal zusammengefasst, was man in dieser Hinsicht mittels RESS, also Responsive Design mit serverseitigen Komponenten, zaubern kann.

Das Versprechen: Mit nur wenigen Zeilen Code verwandelt man die eigene Webseite von einer, die solide auf Desktop, Smartphone und Tablet läuft zu einer, die auf so ziemlich allem, überall und schneller läuft. Das klingt nach der eierlegenden Wollmilchsau- wir haben uns das mal genauer angeschaut.

Grundsätzlich gilt es zu verstehen, dass das „Design“ in Responsive Design sich nicht rein auf die Erscheinung bezieht, sondern auch auf Effizienz. Es macht keinen Sinn, dieselben Bilder an ein Device mit Low-Resolution Screen zu senden, wie an eines mit High-Resolution. Und genau an diesem Punkt setzt Cremin auch an. Neben der generellen Sprachbarriere gibt es also zwei wesentliche Probleme, denen sich jeder stellen muss, wenn er eine Webseite weltweit verfügbar machen will:

  1. Die Vielfalt an Devices
  2. Eingeschränkte Konnektivität

Es gibt bereits diverse Ansätze mit den angesprochenen Hürden umzugehen, z.B. dass der Browser erkennen soll, welches Bildformat für das Device-Format sinnvoll und somit zu beziehen ist.

Cremin schlägt vor, zunächst mal den Image Payload zu reduzieren. Das sieht wie folgt aus: Das Page Weight soll reduziert werden, indem Device Detection im Server genutzt wird. Vom Browser angeforderte Bilder sollen optimiert werden, indem ihre Größe auf die für das Device optimale Größe reduziert werden. Dazu braucht es in seinem Beispiel keine Resizing-Libraries – man könne es ebenso leicht selbst bewerkstelligen, indem man PageSpeed, ein Open-Source-Projekt von Google, einsetzt.

Gesagt, getan: Nach der Installation von PageSpeed, dem Setup einer Device Detection Library und einigen Zeilen Code hat Cremin eine Seite bis auf ein Viertel der ursprünglichen Größe verkleinert – ohne dass der User einen visuell Unterschied bemerken dürfte. Außerdem lädt seine Beispielseite bis zu 4.3x schneller.

Cremins Methode besteht aus lediglich 4 Schritten, wer es versuchen will, findet die komplette Anleitung hier.

Außerdem zeigt er noch weitere Optionen zur Website-Optimierung: den JavaScript und CSS Payload reduzieren und Optimierung basierend auf Bandwidth Detection. Alle vorgestellten Möglichkeiten bauen aufeinander auf, können aber auch einzeln implementiert werden.

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -