Der Ansatz des Responsive Webdesigns sieht die flexible Anpassung einer Website an die Gegebenheiten der verschiedenen Endgeräte vor. Bei der Programmierung von responsive Websites legen viele Entwickler den Fokus ausschließlich auf die optische Darstellung, ohne den Aspekt der Performanceoptimierung zu berücksichtigen [Dav13].
Tom Barker untersuchte die Alexa Top-30 Websites und kam zu dem Ergebnis, dass 30 Prozent der responsive Websites auf mobilen Endgeräten ein höheres Datenvolumen laden als auf Desktop-Rechnern. Dadurch stieg die durchschnittliche Ladezeit für den Abruf über mobile Endgeräte um 1,91 Sekunden gegenüber den Desktop-Rechnern mit gleicher Datenverbindung an. Hinzu kam, dass bei 43 Prozent der getesteten Websites eine gleichbleibende oder steigende Anzahl von HTTP-Anfragen bei dem Abruf über mobile Endgeräte festgestellt wurde [Bar14].
Das Hauptproblem bei dem Responsive Webdesign in Bezug auf die Performance ist das Laden der gleichen Ressourcen für alle Endgeräte [Hog15]. Responsive Webdesign wird in diesen Fällen nicht als ganzheitliche Lösung betrachtet, sondern als Erweiterung der bestehenden Website durch zusätzliche Definitionen für mobile Endgeräte. Um die Performance eines Responsive Webdesigns zu optimieren, sind die in Kapitel 2.1.4 vorgestellten Limitierungen mobiler Endgeräte und Datennetzwerke zu berücksichtigen. Dies kann durch den Mobile First Ansatz erfolgen, dabei beginnt die Entwicklung der Website auf dem Endgerät mit dem kleinsten Display und wird stufenweise um weitere Funktionen für Endgeräte mit größeren Displays ergänzt [Hog15]. Die Auslieferung der Ressourcen kann, wie in Kapitel 3.5.1 beschrieben, serverseitig mittels RESS für die jeweiligen Endgeräte beeinflusst werden.
Performanceprobleme, die bisher durch die Einbindung von Bildern verursacht wurden, lassen sich unter der Verwendung des in Kapitel 3.5.2 vorgestellten Attributes srcset zur Auszeichnung verschiedener Bilder für die Endgeräte vermeiden. Es sollte dennoch drauf geachtet werden, dass Bilder in der richtigen Auflösung ausgeliefert und nicht im Stylesheet skaliert oder unter Angabe der Eigenschaft display: none; ausgeblendet werden, da viele Browser diese Bilder trotzdem herunterladen [Dav13].
