Dynamic Serving

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.

Der Google Manager John Mueller hat sich fĂŒr die Suchmaschinen-NeutralitĂ€t von Google verbĂŒrgt. Laut Google liegt es allein beim Webseitenbetreiber, ob dynamische Dienste, Responsive Design oder separate mobile URLs verwendet werden. Es sei nur wichtig, dass die Website mobil funktioniert und, dass es eher um Usability als um SEO geht.
WĂ€hrend es immer FĂ€lle geben wird, in denen eine separate mobile Website oder App die am besten geeignete Option ist, ist die Zukunft des Webdesigns im Allgemeinen reaktionsfĂ€hig. Die Bereitstellung einer effektiven Benutzererfahrung fĂŒr GerĂ€te wird jedoch immer komplexer. Medienabfragen alleine sind keine praktikable Lösung fĂŒr eine echte Optimierung der mobilen Erfahrung. AnsĂ€tze wie RESS, die dynamisch bereitgestellten Content ermöglichen, um sich an den Kontext des Benutzers anzupassen, werden sich aus Sicht vieler Webentwickler als Best Practice herausstellen.
Wenn eine Website schwerpunktmĂ€ĂŸig Transaktionen und komplexe Interaktionen wie Formulare oder Reservierungen umfasst, können mit Dynamic Serving abhĂ€ngig von der Plattform völlig unterschiedliche Benutzererfahrungen entworfen werden. WĂ€hrend diese Optimierung fĂŒr content-basierte Websites wie Blogs oder Zeitschriften nicht relevant ist, ist sie fĂŒr E-Commerce Seiten ein wichtiger Faktor fĂŒr die WettbewerbsfĂ€higkeit. Mit Dynamic Serving kann man einzigartige Benutzererfahrungen erstellen, die fĂŒr mobile Nutzer perfekt sind. Wenn nur ein knappes Budget zur VerfĂŒgung steht und die Webseite einfach ist und wenig Interaktion erfordert, dann ist Responsive Web Design der richtige Weg. FĂŒr alle anderen Webseiten sollte man Dynamic Serving in Betracht ziehen.

Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte