5 Tipps für eine bessere Performance im Responsive Webdesign

performanceWer kennt es nicht – das leidige Problem mit der langsamen Website? Man möchte sich auf dem Handy nur kurz über ein Hotel informieren, aber die Seite lädt… und lädt… und lädt. Neben der Tatsache, dass viele Besucher von langen Ladezeiten abgeschreckt werden, ist gerade auch bei mobilen Endgeräten der Traffic begrenzt und eine Geschwindigkeitsdrosselung droht. Im Folgenden zeigen wir euch fünf Punkte, die ihr beim Erstellen eurer responsiven Website beachten solltet.

Der erste Grund, der zu langsamen Websites führt, ist auch der naheliegendste: Die zu übertragende Datenmenge ist sehr groß. Hierfür sind meist Bilder und andere Mediendateien verantwortlich. Das zweite Problem ist weniger offensichtlich: Jede Ressource, d. h. jede Datei, die auf einer Website dargestellt wird, muss separat über einen Serveraufruf geladen werden. Das bedeutet, dass das eigene Gerät für jede Grafik, jeden Font, jede JavaScript- und Stylesheet-Datei eine Anfrage an den Webserver senden muss. Hier entsteht, gerade bei größeren Websites, ein nicht zu unterschätzender Overhead. Das Ziel sollte also sein, den Datentraffic und die Anzahl der Server-Anfragen so gering wie möglich zu halten, ohne dass die Darstellungsqualität der Seite darunter leidet.

1. Mobile First-Strategie

Der Ansatz ist recht simpel: Zunächst wird für mobile Endgeräte designt, im Anschluss für Desktopgeräte. Dies ist insofern günstig, als dass zunächst darüber nachgedacht werden muss, wie man die Informationen mit möglichst wenig Platz darstellt. Das „Ausbreiten“ auf ein größeres Gerät fällt in der Regel einfacher. Für die Website-Performance hat dies zur Folge, dass auf kleinen Endgeräten auch nur kleine Grafiken und nur für besonders große Darstellungen auch große Grafiken verwendet werden.

2. Optimierung von Grafiken

Grafiken verursachen sicherlich das größte Datenvolumen auf modernen Websites. Hier gibt es allerdings einige Optimierungsmöglichkeiten. Zunächst sollte man, wie bereits unter „Mobile First“ beschrieben, keine für die jeweilige Displaygröße unpassende Grafikgröße laden. Ein 3000 x 2000 Pixel großes Bild mag auf einem Full HD-Screen toll aussehen, verursacht auf einem Handy jedoch nur Frust beim Seitenbesucher.

Des Weiteren empfiehlt sich die Verwendung sogenannter Icon-Fonts. Hierbei handelt es sich um Schriften, die bestimmte Icons enthalten, welche auf Websites häufig verwendet werden. Diese werden zum einen schneller geladen als einzelne Grafiken (ein Font besteht i.d.R. nur aus einer Datei => nur eine Anfrage an den Server) und sind dazu auch noch problemlos skalierbar, da es sich um Vektorgrafiken handelt. Außerdem sollte man beachten, dass die Grafiken sinnvoll komprimiert sind. Enthält das Bild Transparenz, empfiehlt sich das Bildformat PNG, ansonsten genügt JPG. Damit die Bilder nicht verschwommen dargestellt werden, ist es wichtig, diese nie größer zu skalieren.

Sprite-Grafik#

Abbildung 1: Sprite-Grafik [i]

Eine weitere Optimierungsmöglichkeit stellt die Zusammenfassung mehrerer Bilder zu sogenannten Sprites dar. Hierbei werden mehrere Grafiken zu einer großen Grafik zusammengeschnitten und nur der entsprechende Bildbereich wird statt der bisherigen Einzelgrafik geladen, wodurch wiederum nur eine Anfrage an den Server gesendet werden muss. Wenn möglich kann man hier auch auf die bereits erwähnten Icon-Fonts ausweichen.

Ein letzter wichtiger Punkt zu Grafiken: Wenn eine Grafik nur aus einem Schriftzug besteht, dann verwendet wenn möglich auch Schrift mit dem entsprechenden Font und keine Grafik.

3. Code Minification

Für andere Ressourcen wie JavaScript- und Stylesheet-Dateien empfiehlt sich die sogenannte Minification. Hierbei werden die Inhalte aller einzelnen Dateien in eine Datei geschrieben und für die Funktionalität der Seite unwichtige Zeichen, wie z. B. Kommentare und Leerzeilen, entfernt.

4. Dynamisches Nachladen von Inhalten

Eine weitere Maßnahme, die allerdings mit Bedacht eingesetzt werden sollte, ist das dynamische Nachladen von Inhalten. Dies ist z. B. bei besonders langen Seiten zu empfehlen, etwa bei Social Walls, bei denen die Besucher Inhalte hinzufügen können. Hierbei wird erst beim Scrollen der Inhalt nachgeladen, was die initiale Wartezeit der Website reduziert. Doch Achtung: Der nachgeladene Inhalt sollte nicht für die Seite selbst essenziell sein, denn Google-Bots können diesen dynamischen Inhalt nicht oder nur teilweise erfassen, was sich nachteilhaft auf die Suchmaschinenoptimierung auswirken kann.

5. Ein Wort zu WordPress & Co.

Viele Content-Management-Systeme bieten bereits standardmäßig eine automatische Skalierung von Grafiken an. Was allerdings hier noch ein wichtiger Performancefresser ist und dabei schaue ich besonders auf WordPress ist der Einsatz von Erweiterungen. Jede Erweiterung besteht aus mehreren Dateien, die separat geladen werden müssen. Im Zweifel lassen sich gerade einfachere Features wie Google Analytics oder ein Facebook-Pixel auch direkt vom Dienstleister in die Seite einbinden. Daher gilt: Reduziert den Einsatz von Erweiterungen auf ein Minimum. Die i-fabrik steht euch hier gern beratend und helfend zur Seite.

Zusammenfassung

Hier noch einmal die wichtigsten Maßnahmen im Überblick:

  • Grafiken komprimieren und ggf. in Sprites zusammenfassen
  • Grafiken in verschiedenen Auflösungen anbieten
  • Icon-Fonts verwenden
  • wenn möglich, Text statt Grafik verwenden
  • Stylesheet- und JavaScript-Dateien minifizieren
  • an performancekritischen Stellen ggf. Teilinhalte dynamisch nachladen
  • bei Content-Management-Systemen möglichst wenige Plug-Ins verwenden

Wer diese Punkte (zumindest teilweise) umsetzt, reduziert auf jeden Fall den Frust beim Aufruf der Website. Dennoch gilt wie auch allgemein im schnelllebigen Internet: Immer selbst weiterbilden!

 

[i] http://blog.pandaweb.de/wp-content/uploads/2012/04/sprite-grafik-google-plus.png