Responsives Webdesign
Mehr Performance fürs Responsive Webdesign
Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für stationäre und mobile Geräte verwendet werden. Der Artikel zeigt nützliche Techniken, wie Sie dem Performance-Problem beikommen.
Die Performance von Websites wird oft vernachlässigt, man konzentriert sich lieber auf augenfälligere Elemente wie schicke Layoutentwürfe und ausgefeilte grafische Effekte. Allerdings ist Performance alles andere als unwichtig, im Gegenteil. Beim mobilen Zugriff kommt erschwerend hinzu, dass die Verbindung meist schlechter und zudem die Latenzzeit größer ist. Gerade beim Responsive Webdesign (RWD) ist aber die Performance problematisch. Das Grundprinzip beim RWD ist, dass ein- und dieselbe Basis für die mobilen und die anderen Nutzer bereitgestellt wird.
Damit hat man natürlich beim RWD weniger Möglichkeiten, gezielt Performance-Optimierungen für mobile Nutzer vorzunehmen, als wenn man eine separate mobile Webseite erstellt. Aber glücklicherweise gibt es auch dafür Lösungen. Sehen wir uns erst einmal allgemeine Strategien für die Methodik an und befassen wir uns dann mit zwei Themen im Detail: Bildoptimierungen und Conditional Loading.
Höhere Priorität für die Performance
Ein wichtiger Schritt hin zu einer besseren Performance ist es, sich das Problem überhaupt bewusst zu machen und die Performance von Anfang an mit zu berücksichtigen, anstatt die größten Fehler erst im Nachhinein zu beseitigen. Und das heißt immer auch: testen!
Dabei hilft Mobitest von Akamai; mit diesem Online-Tool können Sie die Performance von Websites auf echten mobilen Geräten simulieren und erhalten detaillierte Ergebnisse. Wichtig ist natürlich ebenso der Test auf echten Geräten - aber dann bitte auch unter "echten" Umständen, also nicht nur im komfortablen WLAN.
Mobile First
Beim Responsive Webdesign gibt es unterschiedliche Herangehensweisen. Oft geht man von einer bestehenden Desktop-Version aus oder erstellt zuerst das Desktop-Layout. Darauf basierend werden dann die Anpassungen für die kleinere Viewports vorgenommen.
Für eine verbesserte Performance ist hingegen der umgekehrte Ansatz - Mobile First - erfolgsversprechender. Mobile First hat einen ähnlichen Ansatz wie Progressive Enhancement: Man geht also von einer funktionierenden Basis für kleine Viewports aus und passt dann schrittweise für größere Viewports an.
Die Angaben für die kleinen Viewports stehen außerhalb von Media Queries. Danach folgen weitere Media Queries mit min-width-Angaben, die das Layout sukzessive für größere Viewports anpassen. Das kann dann etwa wie im Beispiel unten aussehen - die gewählten Größen sind natürlich willkürlich gewählt und sollten von den aktuellen Inhalten beziehungsweise den Erfordernissen des aktuellen Layouts bestimmt werden.
/* Allgemeine Angaben und Angaben fuer
kleine Viewports */
@media screen and (min-width: 25em) {
/* Anpassungen bei einer Viewport-
groeße von 25em */
}
@media screen and (min-width: 40em) {
/* Anpassungen fuer eine Viewportgroeße
von 40em */
}
Die Sache mit den Bildern
Ein heikler Punkt beim Responsive Webdesign sind die Bilder. Die von Ethan Marcotte ursprünglich vorgesehene Lösung für Bilder im RWD ist sehr einfach anzuwenden. Bei ihr werden Bilder so skaliert, dass sie nie größer werden als der sie umgebende Container. Konkret bedeutet das, dass meist die großen, für Desktop-Rechner vorgesehenen Bilder mit folgendem Code kleingezurrt werden:
img { max-width: 100%; }
Das Problem daran: Auch bei kleinem Viewport werden die großen (groß in puncto Abmessungen und Datenvolumen) Bilder geladen. Wie gravierend das im Einzelfall ist, hängt von der Anzahl der auf diese Art behandelten Bilder und Dateigröße ab. Die Alternative ist klar: Bei kleinem Viewport müssen angepasste Bilder ausgeliefert werden. Dafür gibt es verschiedene Techniken.
Recht praktisch lässt sich das Ausliefern unterschiedlicher Bilder beispielsweise mit dem Skript Adaptive Images von Matt Willcox bewerkstelligen. Bei Adaptive Images übernimmt ein PHP-Skript serverseitig die Skalierung der Bilder, danach werden die größenoptimierten Bilder an die Browser ausgeliefert.
Ausgelöst wird die Skalierung der Bilder durch eine .htacess-Datei, die die Bildanfragen an das PHP-Skript weiterleitet. Schließlich ist noch ein Javascript-Codeschnipsel beteiligt, das die Viewportgröße ausliest und in einem Cookie speichert.
Und so verwenden Sie Adaptive Images: Die .htaccess-Datei und das PHP-Skript adaptive-images.php speichern Sie im Wurzelverzeichnis des Webprojekts. In der Datei adaptive-images.php geben Sie über ein Array die Bildschirmgrößen vor, für die eigene Bilder erzeugt werden sollen:
$resolutions = array(1382, 992, 768, 480);
Erstellen Sie außerdem ein beschreibbares Verzeichnis ai-cache, in dem die skalierten Bilder gespeichert werden. In den Kopfbereich Ihrer einzelnen Dokumente fügen Sie dann noch den folgenden Javascript-Code ein:
<script>document.
cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
Ab Version 1.5 von Adaptive Images ist eine Unterstützung für Retina-Bildschirme enthalten, wenn Sie diese nutzen wollen, lautet der Javascript-Code:
<script>document.
cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window? ","+devicePixelRatio : ",1")+'; path=/';</script>
Adaptive Images ist nur eine von mehreren möglichen Techniken, um Bilder anzupassen. Und es wird in Zukunft weitere Lösungen geben. In welche Richtung der Trend geht, zeigt ein Blick in die Ergebnisse der Arbeitsgruppe des W3C, die sich mit diesem Thema befasst.
Zukunftsbilder
Die W3C-Arbeitsgruppe will nicht nur das Problem der richtigen Bildgröße lösen, sondern auch noch um Lösungen für hochauflösende Displays ergänzen. Es werden also dafür eigens optimierte Bilder verwendet, sofern es die Bandbreite der Verbindung zulässt. Und noch einen weiteren Punkt hat die Arbeitsgruppe im Blick: Nicht immer ist eine reine Größenänderung bei den Bildern wie etwa bei Adaptive Images eine gute Lösung. In manchen Fällen ist es sinnvoller, wenn das Bild beschnitten wird, damit das Wesentliche auch auf dem kleinen Bild gut zu erkennen ist.
Nehmen wir an, eine Person wird vor einem Gebäude fotografiert. Dann kann es günstiger sein, dass bei wenig verfügbarem Platz Teile des Hintergrunds entfernt werden, damit das Wichtigste auf dem Foto - die Person - nicht zu klein wird. Der derzeitige Vorschlag, der all die verschiedenen Punkte berücksichtigt, sieht folgendermaßen aus:
<picture width="500" height="500"><source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x"><source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x"><source srcset="small-1.jpg 1x,
small-2.jpg 2x"><img src="small-1.jpg" alt=""><p>Accessible text</p></picture>
Innerhalb des neu eingeführten Elements picture stehen mehrere mögliche Quellen (source-Elemente) für das Bild bereit, das angezeigt werden soll. Durch das zusätzliche media-Attribut können vom Viewport abhängige Bilder angegeben werden. Über die srcset-Angabe lassen sich dann noch unterschiedliche Bilder je nach Auflösung bestimmen, die der Browser nach Situation anfordern kann. Inzwischen gibt es schon einen vielversprechenden Polyfill, sodass man das picture-Element bereits einsetzen könnte.
Allerdings sollte man damit erst anfangen, wenn zumindest ein Browser das picture-Element auch nativ unterstützt. Bis dahin greifen wir besser zu anderen Techniken wie Adaptive Images- was sonst noch an Lösungsansätzen zur Verfügung steht, finden Sie in einer nützlichen Tabelle von Chris Coyier.
Conditional Loading
Oft werden beim Responsive Webdesign Inhalte, die bei bestimmten Viewports nicht gewünscht sind, mit display: none ausgeblendet. Die so formatierten Elemente sind dadurch zwar nicht mehr sichtbar, sie werden aber trotzdem heruntergeladen.
Das heißt, auch wenn Sie etwa einen großen Werbeblock mit display: none bei kleinem Viewport ausblenden lassen, muss ihn das Mobilgerät aus dem Netz saugen - und das braucht Ladezeit, die der mobile Nutzer teuer bezahlt, wobei er die Inhalte nicht einmal zu sehen bekommt.
Eine bessere Strategie, ausgewählte Inhalte nur unter bestimmten Bedingungen darzustellen, bietet das Conditional Loading. So kann man beispielsweise bei kleinem Viewport die wesentlichen Informationen anzeigen, bei größerem Viewport weitere Details.
Ein Beispiel für Conditional Loading zeigt Brad Frost auf seiner Shopdemo-Seite: Die Rubrik "ähnliche Produkte" wird bei kleinem Viewport erst auf Aufforderung, bei großem Viewport hingegen direkt geladen.
Sehen wir uns anhand eines Beispiels an, wie das funktioniert. Zuerst benötigen wir ein externes HTML-Dokument, das im Beispiel zusatz.html heißen soll und die weiterführenden Informationen innerhalb eines div-Elements mit id="content" beinhaltet.
Kommen wir zum Hauptdokument, in dem Inhalte konditional geladen werden sollen. Im HTML-Code gibt es ein umfassendes Element mit einem Link auf die Zusatzinfos. Damit steht schon einmal eine funktionierende Minimallösung, falls Javascript nicht unterstützt wird: Die Inhalte können ganz normal über den Link angefordert werden.
<div class="zusatz"><a href="zusatz.html">Zusatzinfos</a></div>
Jetzt können wir mit Javascript die Ergänzungen ab einer bestimmten Breite des Viewports laden:
if (document.documentElement.
clientWidth > 440) {
laden();
}
In der nun zu erstellenden Funktion laden() - im Beispiel wird jQuery eingesetzt - definieren wir zuerst einmal ein paar Variablen, die wir im Weiteren brauchen: zusatz verweist auf das Element mit der Klasse zusatz, in das die Inhalte geladen werden sollen. Die Variable zusatzLink greift auf das darin befindliche a-Element zu und zusatzFragment holt sich den bei href angegebenen Pfad.
function laden() {
var zusatz = $(,.zusatz'),
zusatzLink = $(,.zusatz a'),
zusatzFragment = zusatzLink.
attr(,href');
Nun fehlt noch das magische Laden. Dafür erstellen wir zuerst ein neues div-Element. Für dieses rufen wir die von jQuery vordefinierte Ajax-Funktion load() auf. Ihr übergeben wir den Pfad zum Dokument samt Identifier für den Ausschnitt. Als zweiter Parameter steht eine Callback-Funktion, die - wenn der Ladevorgang abgeschlossen ist - das div-Element mit den neuen Inhalten an unser zusatz-Element anhängt.
$(,<div/>').load(zusatzFragment +'
#content ,,function() {
$(this).appendTo(zusatz);
});
} /* schliessende Klammer von laden() */
Damit ist das Beispiel abgeschlossen. Bei kleinem Viewport oder deaktiviertem Javascript werden die Basisinformationen angezeigt, die zusätzlichen Informationen können per Link angefordert werden. Bei größerem Viewport und aktiviertem Javascript werden die Inhalte hingegen automatisch per Ajax geladen und angezeigt. Das Beispiel lässt sich noch in mehrerer Hinsicht verbessern:
- Es wäre sinnvoll, einen Test durchzuführen, ob die Inhalte nicht schon geladen sind - beispielsweise könnte man zusätzlich auch eine Klasse ergänzen, die den Zustand anzeigt.
- Der Link auf die zusätzlichen Informationen ist auch bei großem Viewport aktiv, obwohl man ihn dort natürlich nicht braucht.
- Bei der derzeitigen Version können Benutzer kleiner Bildschirme die zusätzlichen Inhalte nur durch Klick auf Links erreichen, wodurch sie auf die neuen Unterseiten gelangen. Schöner wäre es, wenn durch Klick auf einen Link die Inhalte mit Ajax direkt in das angegebene Dokument geladen werden würden.
- Im Beispiel wird nur beim Aufruf der Website überprüft, ob die Inhalte per Ajax geladen werden. Man könnte auch einen zusätzlichen Event Handler einbauen, der Änderungen an der Größe des Browserfensters abfängt. Wobei aber natürlich fraglich ist, wie viele Nutzer die Größe des Browserfensters verändern und von angepassten Inhalten profitieren - abgesehen von den RWD-fixierten Webdesignern.
Skript fürs Conditional Loading
Die Filament Group, die an der Realisierung der Boston-Globe-Webseite beteiligt war, hat ein Skript entwickelt, das den Vorgang des Conditional Loading vereinfacht. Dieses Skript können Sie bei Github herunterladen.
Das Prinzip ist folgendes: Im HTML-Code werden Elemente, bei denen es zusätzliche Informationen gibt, besonders gekennzeichnet und diese enthalten außerdem einen Links auf die Datei, die dann per Ajax geholt werden kann. Im folgenden Beispiel steht beim HTML-Element ein selbstdefiniertes Attribut mit Namen data-after, das festlegt, dass Inhalte danach erscheinen sollen. Als Wert dieses Attributs steht der Pfad zur Datei mit den Informationen. Außerdem kann mit dem Attribut data-media festgelegt werden, ab welcher Viewportgröße der zusätzliche Inhalt geladen wird.
<h2 data-after="demo-content/links.
html" data-media="(min-width: 40em)"><a href="demo-content/links.html">Related External Links</a></h2>
In diesem Fall werden die in der Datei links.html stehenden zusätzlichen Informationen ab einer Größe von 40em direkt angezeigt, sie können allerdings bei kleinerem Bildschirm auch normal per Link angefordert werden. Damit das Beispiel funktioniert, müssen Sie eine Reihe von Javascript-Dateien einbinden und das Skript starten:
$( "[data-after]" ).ajaxInclude( );
Im Download-Ordner des Projekts bei Github finden Sie Beispiele für die unterschiedlichen Optionen. Praktisch ist auch eine Variante, die die einzelnen externen Dateien zusammenfasst; das ist gerade dann sinnvoll, wenn mehrere einzelne Komponenten per Conditional Loading geladen werden.
Mehr Performance-Optimierung
Die richtige Strategie für Bilder und das Conditional Loading sind für die Leistung beim RWD von gleicher Wichtigkeit. Darüber hinaus empfiehlt es sich, allgemeine Performance-Optimierungen durchzuführen. Dabei sollte man die Anzahl der HTTP-Requests möglichst klein halten. Hilfreich kann hier Folgendes sein:
- Statt Formatierungen über Grafiken zu realisieren, greifen Sie - falls möglich - lieber zu CSS. So können Sie beispielsweise Farbverläufe für Buttons direkt über CSS3 realisieren und auf Hintergrundgrafiken verzichten.
- UTF-8 beinhaltet nicht nur viele Buchstaben, sondern auch eine große Anzahl an Symbolen. Wenn Sie diese anstelle von Bildern einsetzen, sparen Sie sich etliche HTTP-Requests.
- Mehrere Hintergrundbilder lassen sich zu einem Bild zusammenfassen, wobei über background-position dann immer der passende Ausschnitt ausgewählt wird (CSS-Sprites).
- Kleine Bilder können Sie über Data-URLs direkt im Dokument integrieren.
