Dynamic Serving

Copyright © Shutterstock / Tommy Lee Walker

Was ist Dynamic Serving?

Google definiert Dynamic Serving als ein Setup, bei dem der Server mit unterschiedlichem HTML und CSS für dieselbe URL antwortet, je nachdem, welcher User Agent die Seite anfordert. Dynamic Serving ist die Idee, den Inhalt zu ändern, der am besten für das gegebene Gerät oder den Kontext geeignet ist.

In Kombination mit Responsive Webdesign wird daraus eine Strategie, die sowohl die Front-End- als auch die Back-End-Optimierung umfasst. Die Kombination von Responsive Design mit serverseitigen Komponenten wird auch als “RESS” (Responsive Design + Server Side Components) bezeichnet.

Von Google empfohlene Strukturen für mobile Webseiten

Dynamic Serving ist neben Responsive Design und separaten URL für mobile und Desktop Webseiten eine der von Google empfohlenen Strukturen für mobile Webseiten. Responsive Web Design ist dabei der am wenigsten flexible Ansatz, um die Bedürfnisse von mobilen Besuchern zu erfüllen. Viele große Webseiten basieren entweder separaten URLs oder Dynamic Serving.

Responsive Webdesign

Responsive Web Design ist eine Entweder-oder-Lösung. Entweder eine Webseite wird für mobile Geräte programmiert und dann auf Desktops angepasst, oder umgekehrt. Bei dieser Vorgehensweise wird die zweite Lösung immer eine Kompromisslösung sein.

Responsive Webdesign wird im Wesentlichen durch Medienabfragen ermöglicht – ein Teil der CSS3-Spezifikation, mit dem Designer den Stil einer Webseite basierend auf einer Reihe von Geräteeigenschaften wie Bildschirmgröße, Ausrichtung und Auflösung ausrichten können.

Die Fähigkeit, auf Medienarten basierende separate Stile auf Inhalte anzuwenden, ist schon lange ein Standardbestandteil von HTML und CSS. Eine Standardmethode, um Website-Besuchern druckerfreundliche Versionen des Contents zur Verfügung zu stellen, besteht beispielsweise darin, ein separates CSS-Stylesheet für Browser zu definieren, wenn der Benutzer die Seite druckt.

Medienabfragen

Die Leistungsfähigkeit von Medienabfragen kann genutzt werden, indem mehrere Kriterien in einer einzigen Abfrage kombiniert werden, wodurch die Benutzererfahrung weiter angepasst und Stile für bestimmte Konfigurationen bereitgestellt werden.

Medienabfragen sind eine hervorragende Möglichkeit, verschiedenen Geräten und Konfigurationen unterschiedliche Stile bereitzustellen, um so für jeden Benutzertyp das beste Erlebnis zu bieten. Responsive Design liefert jedoch naturgemäß den gleichen Quellcode für alle Browser – unabhängig vom Gerätetyp oder der verfügbaren Bandbreite.

Um eine Responsive Webseite anzuzeigen, müssen mobile Benutzer den gesamten Seitenquellcode herunterladen – einschließlich der Desktop-spezifischen Formatierung, hochauflösender Bilder und anderer Dinge, die sie nicht benötigen.

Desing und Layout

Dies führt häufig zu großen Ineffizienzen der Leistung mobiler Websites. Responsive Design ist eine Front-End-Technik – was bedeutet, dass der Server für alle die gleichen Inhalte liefert. Um dieses Problem zu lösen, müssen die Vorteile der Front-End-Optimierung mit Back-End- oder Server-seitigen Optimierungen kombiniert werden.

Auf diese Weise können nicht nur das Design und Layout des Inhalts angepasst, sondern auch die Inhalte selbst angepasst werden. Wenn beispielsweise ein Bild bereitgestellt wird, das auf einem Breitbildmonitor angezeigt werden soll, kann ein großes, hochauflösendes JPEG verwendet werden.

Aber es gibt keinen Grund, die gleiche große Bilddatei zur Anzeige auf einem Smartphone mit einem 5-Zoll-Bildschirm auszuliefern, unnötig die Bandbreite des Benutzers zu verbrauchen und die Seitenladezeit zu verlangsamen. Eine Lösung dieses Problems bietet Dynamic Serving.

Separate URLs

Eine ähnliche Lösung wie Dynamic Serving besteht darin, die eine Geräteerkennung durchzuführen, aber die verschiedenen Plattformen über separate URLs zu bedienen, zum Beispiel “www.beispielseite.de” und “m.beispielseite.de “. Diese Lösung kann zu Problemen führen, wenn beispielsweise ein Link von einem Mobiltelefon an einen Desktop PC gesendet wurde.

Der Desktopnutzer ist dann quasi in der Version m.beispielseite.de gefangen und muss die URL gegebenenfalls manuell korrigieren. Befindet sich auf dem Desktop allerdings ein [url=https://www.onlinesolutionsgroup.de/blog/glossar/c/cookie/]Cookie[/url], kann es passieren, dass er dennoch auf m.beispielseite.de weiterleitet wird.

Wenn separate URLs verwendet werden, muss die bidirektionale Beziehung zwischen den beiden Versionen mit einem Link und den Anmerkungen rel = “canonical” und rel = “alternate” angegeben werden. Dies kann in der Kopfzeile oder in der Sitemap erfolgen. Es muss auch einen HTTP 302-Code zum Umleiten eingegeben werden, sodass es keine Probleme mit dem Googlebot gibt

In jedem Fall sollte eine clientseitige Erkennung vermieden werden, da sie eine gewisse Latenzzeit erfordert, während der JavaScript-Code einige Zeit zum Laden und Ausführen benötigt.

Funktionsweise des Dynamic Serving

Dynamic Serving ist eine Lösung, bei der anders als beim Responsive Design keine Kompromisse zwischen den Versionen erforderlich sind. Dynamic Serving und Responsive Web Design schließen sich jedoch nicht gegenseitig aus. Tatsächlich empfiehlt man die Verwendung von Medienabfragen unter Dynamic Serving. Damit man die Darstellung an die verschiedenen Größen und Ausrichtungen mobiler Bildschirme anpassen kann.

Für Desktop-PC, Smartphones, Tablets und andere Endgeräte werden beim Dynamic Serving unter einer URL unterschiedliche Quellcodevarianten, sowohl HTML wie auch CSS ausgeliefert. Dabei wird ein sogenannter Vary HTTP Headers genutzt, anhand dessen der Server entscheidet, welcher Quellcode für das jeweilige Endgerät ausgegeben wird. Das heißt, der Vary HTTP Header dient dazu, den Inhalt und das Layout an den jeweiligen User Agent anzupassen.

Beispiel für einen Vary HTTP Header

GET /page-1 HTTP/1.1
Host: www.beispielseite.de
(…etc…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 6785
(…etc…)

Mit dem Vary HTTP Header wird neben der Auslieferung des für den [url=https://www.onlinesolutionsgroup.de/blog/glossar/c/client/]Client[/url] optimalen Content die Verwendung des Server-Caches geregelt. Und, der Header sorgt dafür, dass Suchmaschinencrawler und User-Agent zusammenpassen.
Die Erkennung des Benutzeragenten hängt davon ab, ob eine Liste mit den unterschiedlichen Benutzeragenten auf dem Server verwaltet wird. Diese Liste muss immer auf dem neuesten Stand sein, da sonst keine neuen Geräte gefunden werden können. Und, da Erkennungsfehler immer möglich sind, sollte es Benutzern ermöglicht werden, zu einer anderen als der erkannten Version zu wechseln.

Leistungsvorteile durch Dynamic Serving

Der größte Nachteil von Responsive Design liegt in den Leistungseinbußen, die mit der Bereitstellung desselben Inhalts für Mobilgeräte einhergehen. Wenn es um Bilder geht, haben Designer und Entwickler Schwierigkeiten, konkrete Lösungen zu implementieren, um die Bildoptimierung für Erlebnisse auf einem großen Desktop-Bildschirm im Vergleich zu einem kleinen mobilen Gerät zu verbessern.

Es ist nicht optimal, das gleiche Bild zu verwenden, das verkleinert wird, wenn das Gerät kleiner wird. Und das Anfordern eines neuen Bildes für jedes Layout verursacht zu viele HTTP-Anforderungen.

Mit Dynamic Serving haben Designer und Entwickler die volle Kontrolle darüber, welche Inhalte zu welchem Zeitpunkt bereitgestellt werden. Bei Dynamic Serving ist die mobile Version einer Website nicht nur eine Anpassung der vollwertigen Website, da die dynamische Lösung nur den erforderlichen Code und optimierte Mediendateien sendet.

Auf diese Weise erhalten mobile Geräte keine Megabytes mit nutzlosem HTML und CSS-Code. Die Leistungsoptimierung wird extrem einfach und effizient. Dies bedeutet, dass der gesamte Inhalt, die Funktionalität und das Layout für dieses spezielle Gerät angepasst und optimiert werden können. Dies ist der größte Vorteil dieser Lösung, und sie kann in einigen Kontexten wie E-Commerce, in dem Reaktivität für die Konvertierung entscheidend ist, beträchtlich sein.

Die Nachteile von Dynamic Serving

Dynamic Serving ist arbeitsintensiv. Viele Entwickler scheuen diese Art der Webseitenerstellung, weil der Arbeitsaufwand hoch ist. Während Responsive Design nur einen HTML-Entwurf hat, der einfach CSS implementiert, um das Rendering der Seite pro Gerät zu ändern, werden bei dynamisch bereitgestellten Inhalten verschiedene HTML-Codes erstellt und auf dem Server gespeichert. Diese werden dann an die entsprechenden Benutzer geliefert. Und mehr Code bedeutet mehr Zeit und Arbeit.

Dynamic Serving erfordert eine hohe Professionalität von den Entwicklern, die wissen sollten, wie man die Komplexität des dynamischen Designs handhabt. Dies kann ein Nachteil für kleine Unternehmen mit begrenzten Ressourcen sein.

Wie sieht Google Dynamic Serving?

Google nennt zwar Dynamic Serving und separate URLs als möglich Strukturen für mobile Webseiten, bevorzugt jedoch Responsive Web Design. Warum dies so ist, darüber gibt Google keine Auskunft. man vermutet jedoch, dass Google Cloaking-Techniken, die auf der Erkennung von Agenten basieren, befürchtet und Betrügereien auf Responsive Web Design-Websites für Google viel leichter zu erkennen sind.