So ist ein oft genutztes Argument gegen Responsive Webdesign die Annahme, dass RWD im Vergleich zu dezidierten Mobile-Sites deutlich langsamer sei, was Ladezeit und Performance angeht. Dabei gibt es zahlreiche Möglichkeiten, wie sich die Performance von Responsive Websites optimieren lässt – angefangen von Responsive Images bis hin zu serverseitigen Optimierungen.

Genau um die ging es auch in Sven Wolfermanns Session Responsive and Fast auf der International PHP Conference. Dort zeigte er, worauf es bei einem guten Responsive Design ankommt und erklärte, wie sich eine RWD-Website bestmöglich optimieren lässt.

Responsive Webdesign – und die Frage nach der Performance

Responsive Design kennt heutzutage eigentlich jeder, allerdings ist das, was meist als RWD verkauft wird, nur die Spitze des Eisbergs. Tatsächlich werden viele Aspekte, die über Grids, flexible Bilder und Media Queries hinausgehen, vergessen.

Ein großes Thema dabei ist die Performance von Responsive Websites. So macht Responsive Webdesign zwar das Design für die verschiedenen Bildschirmgrößen besser; das heißt jedoch nicht, dass damit automatisch auch Ladezeit und Inhalte verbessert werden. Stattdessen liegt es am Webdesigner, was wie an welcher Stelle auf der Website verbaut wird und wie RWD-Optimierungen implementiert werden.

Eine große Herausforderung, die sich ihnen dabei stellt, ist die vor allem in den letzten Jahren deutlich angestiegene Websitegröße. Viele Websites umfassen mittlerweile eine Größe von 2 MB – und genau das wird für die Ladezeit auf Mobile Devices schnell zum Problem. Bilder nehmen dabei den größten Anteil an der Websitegröße ein und bieten damit das größte Optimierungspotenzial. Doch auch an anderer Stelle gibt es einige Möglichkeiten, wie sich die Performance verbessern lässt.

Was ist eigentlich schnell?

Bevor es jedoch an die Umsetzung geht, muss man erstmal wissen, was der User eigentlich als schnell empfindet. So gelten Ladezeiten von bis zu einer Sekunde als ideal; alles darüber führt beim User im Zweifelsfall zu einem Abbruch des Website-Besuchs.

Auch das Erstellen eines Performance-Budgets kann dabei helfen, einen Ansatz für die Performance-Optimierung zu finden. Dabei lassen sich verschiedene Ziele wie etwa Page Load und Page Weight definieren und beispielsweise anhand von verschiedenen Online-Tools überprüfen. So lassen sich etwa offensichtliche Performancehindernisse leichter ausfindig machen.

Genauso wichtig ist es, die Performance regelmäßig zu messen und zu überprüfen. Anschließend kann man sich an die Optimierung machen, etwa mit einer der drei folgenden Optionen:

• Bestehende Features optimieren
• Bestehende Features entfernen
• Keine neuen Features hinzufügen

Langsame Mobile-Site – trotz Optimierung?

Auch wenn die eigene Website bestmöglich optimiert wurde, ist sie auf Mobile Devices oft trotzdem deutlich langsamer als auf dem Desktop. Das liegt zum einen an der Bandbreite, zum anderen an der Latenz. Diese ist auf Mobile nämlich deutlich länger; dementsprechend lädt die Seite auch langsamer. Auch TCP Slow Start trägt zu dem Problem bei. Darum sollten zunächst die wichtigsten visuellen Elemente geladen werden, bevor der Rest der Seite nachgeladen wird.

Natürlich tragen auch die bekannten Best Practices der Performance-Optimierung zu einer besseren Performance von Responsive Websites bei – sprich CSS und JavaScript soweit wie möglich zusammenfassen und minifyen, gzip zu nutzen und eben auf die Nutzung von Responsive Images umzusteigen. Damit zeigt sich am Ende, so sagt Wolfermann, dann hoffentlich:

Auch große, schwere Seiten müssen nicht zwingend langsam laden, sondern man kann auch bei ihnen mit den richtigen Optimierungstechniken einiges an Ladezeit sparen.

Green Webdesign – das nachhaltige Internet

mit Henning Fries (DIaLOGIKa GmbH)

You Can’t Spell Accessibility Without CSS

mit Jemima Abu (Telesoftas)

15 Tipps zur Internationalisierung im SEA

mit Lara Marie Massmann (Claneo)

Web Performance Optimierung

mit Sven Wolfermann (maddesigns)

HTML und CSS für Backendentwickler

mit Jens Grochtdreis (webkrauts.de)

Aufmacherbild: Train moving fast in tunnel von Shutterstock / Urheberrecht: leungchopan