So lässt sich die Performance von Responsive Webdesign optimieren

Responsive: ja. Schnell auch?
1 Kommentar

Um ein gut durchdachtes Responsive Webdesign kommt man heutzutage kaum noch herum. Gerade angesichts der immer weiter zunehmenden Verbreitung von Mobile Devices und deren unterschiedlichen Auflösungen spielt RWD in der Gestaltung von Websites eine wichtige Rolle. Allerdings gibt es dabei auch immer wieder einige Stolperfallen, die vor allem die User Experience für den Nutzer beeinträchtigen können. Allen voran: die Performance.

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.

webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

 

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
1 Kommentar
Inline Feedbacks
View all comments
trackback

[…] – eine immer größere Herausforderung für Entwickler. Zwar gibt es zahlreiche Frameworks und Best Practices zur Arbeit mit Responsive Images, allerdings fehlt vielen davon eine gute Lösung des Hautproblems: die richtige Auswahl der […]

X
- Gib Deinen Standort ein -
- or -