Die weltweit erste Website bestand lediglich aus reinem Text und Hyperlinks. Aussehen, Verhalten und Nutzung des Internets haben sich seitdem radikal verändert. Das Web wurde zu einer interaktiven Plattform, die Nutzer:innen aktiv mitgestalten können. Jede der Sites und Anwendungen enthält Inhalte, die verwaltet und bearbeitet werden müssen. Doch nicht bei jeder inhaltlichen Änderung soll gleich ein Entwicklerteam beauftragt werden. Die Lösung bieten Content-Management-Systeme (CMS), denn sie ermöglichen es, Inhalte und Medien zu verwalten und zu veröffentlichen (Abb. 1).

Abb. 1: Funktionsweise eines klassischen CMS

Warum Headless?

Die aktuellen Trends im Web und die voranschreitende Digitalisierung stellen CMS vor neue Herausforderungen. Im Zeitalter internetfähiger Kühlschränke genügt es nicht mehr, eine responsive Website zu betreiben. Heterogene Ausgabegeräte benötigen häufig eine speziell auf den jeweiligen Kanal zugeschnittene Anwendung. Der Inhalt ist hingegen überall gleich – zumindest in Teilen. Damit er nicht mehrmals an unterschiedlicher Stelle erzeugt und gepflegt werden muss, wurde in den letzten Jahren das Konzept der Headless CMS entwickelt.

Abb. 2: Funktionsweise eines Headless CMS

Ein Headless CMS hat die Vorteile klassischer CMS, bietet also einen Administrationsbereich, in dem Content Creators Inhalte anlegen und verwalten können. Gleichzeitig ist es nicht mehr an ein einziges Frontend gebunden. Das ist nämlich komplett vom Backend entkoppelt: Die Daten können über eine standardisierte Schnittstelle abgerufen und auf einem beliebigen Frontend dargestellt werden (Abb. 2).

Trends von Content-Management-Systemen

Knapp 40 Prozent aller Websites verwenden ein CMS [1]. Durch die rasante Entwicklung und Digitalisierung müssen CMS immer mehr leisten:

• Ausgabekanäle: Mit der Digitalisierung existieren immer mehr internetfähige Geräte, mehr Anwender, mehr Software und mehr Content. Ein modernes CMS muss Inhalte für beliebige Anwendungen, native Apps, Webshops, E-Mail, Marketing, Intranet etc. bereitstellen können.

• Frameworks: Mit Headless CMS können beliebige Frontend-Frameworks genutzt werden. Mit Frameworks sparen Entwickler:innen Zeit und Kosten, um eine Website zu erstellen, da sie vorgefertigte Komponenten und den „Baukasten“ ihrer Wahl nutzen können.

• Cloud: Moderne CMS sind über den Browser als universale Schnittstelle bedienbar und können ohne eigenen Installationsaufwand in der Cloud bereitgestellt und auch skaliert werden.

• Usability und User Experience: Gute CMS sollten einen einfach bedienbaren Administrationsbereich haben, um den Lernaufwand der Nutzer:innen mit unterschiedlichen Vorkenntnissen gering zu halten. Außerdem sollten sie den Redakteur:innen Freiraum für individuelle Gestaltung bieten.

• Content Delivery Networks (CDNs): Endnutzer:innen gehen davon aus, dass eine Website schnell lädt. Die Conversion Rate sinkt, wenn die Seite nicht innerhalb von 2,4 Sekunden geladen ist [1]. CDNs können im Zusammenspiel mit CMS dabei helfen, dass der Inhalt schnell bei den Nutzenden ankommt. Sie verringern die Latenz und helfen, Infrastruktur gleichmäßig auszulasten.

• Search Engine Optimization (SEO): Wird eine Website für Suchmaschinen optimiert, kann sie schneller gefunden werden, was wiederum zu einer höheren Conversion Rate führt. Dazu müssen Metadaten für den Inhalt festgelegt werden. Moderne CMS bieten einfache Möglichkeiten, Metadaten wie den Titel, eine Bildbeschreibung oder Keywords festzulegen.

• Sicherheit: Um sich vor Hackerangriffen zu schützen, benötigt ein CMS bestmögliche Sicherheitsmechanismen. Dazu gehören ein Authentifizierungs- und Autorisierungskonzept, um zu bestimmen, wer auf welche Daten zugreifen kann, und die Verschlüsselung vertraulicher Daten.

• Verschmelzung von Content und E-Commerce: Moderne CMS kombinieren Inhalte mit Produkten und Dienstleistungen. Kunden sollen persönlich angesprochen werden, indem das CMS etwa den Aufenthaltsort, die Zeitzone oder das genutzte Endgerät auswertet. Zum Einsatz kommen beispielsweise integrierte KI-basierte Chatbots.

• Headless und Microservices: Headless CMS sind Teil des JAM-Stacks (JavaScript API Markup). Die Inhalte werden mittels API an ein beliebiges JavaScript Framework angebunden, sodass kein monolithisches System entsteht. Das CMS bleibt modular und Entwickler:innen können selbst bestimmen, wo und wie die Daten gespeichert und wie die Website gerendert wird.

Headless CMS im Vergleich: WordPress, Strapi und Sanity

Nun wollen wir drei populäre Headless CMS vergleichen. WordPress wurde 2003 von Mike Little und Matt Mullenweg entwickelt und diente ursprünglich als Blogveröffentlichungsplattform. Das traditionelle CMS bietet ebenfalls die Möglichkeit, die Daten über ein API abzurufen. Wegen der riesigen Community rund um WordPress und weil das CMS so viel genutzt wird, darf es in diesem Vergleich nicht fehlen.

Strapi wurde 2015 gegründet und ist ein auf Node.js basierendes Headless CMS. Es hat sich vor allem auf die Erstellung des API spezialisiert, das sich flexibel anpassen lässt, sodass es den Bedürfnissen der Nutzenden entspricht.

NOCH MEHR ZU WEB DESIGN?

Der Web Design & Development Track

Mehr erfahren

Sanity.io ist ein CMS, das 2017 entwickelt wurde. Es wirbt mit der Vereinheitlichung und Strukturierung von Inhalten. Sanity ist als Software as a Service (SaaS) erhältlich, sodass die Inhalte direkt in einer Cloud gespeichert und den Nutzenden zur Verfügung gestellt werden.

Im Folgenden werfen wir nun einen detaillierteren Blick auf eine Auswahl wichtiger Merkmale moderner Headless-CMS:

• API,

• Hosting,

• Content Modeling,

• Gestaltungsfreiheit für Webredakteur:innen sowie

• Preismodelle.

Das Herzstück eines Headless CMS: das API

Das Application Programming Interface (API) dient als Schnittstelle zwischen dem Headless CMS und einem oder mehreren Frontends. Das Programmierparadigma REST bildet hier den Standard im Web, sodass RESTful APIs von fast jedem internetfähigen Gerät genutzt werden können. RESTful APIs haben allerdings auch einige Nachteile, wie das Over- und Underfetching. Overfetching beschreibt, dass alle verfügbaren Inhalte einer Ressource zurückgegeben werden, auch wenn sie nicht benötigt werden. Underfetching bedeutet, dass immer nur ein Endpunkt gleichzeitig abgerufen werden kann. Sollen mehrere Ressourcen angefragt werden, muss das nacheinander geschehen.

Neue Abfragetechnologien versprechen, diese Probleme zu lösen. Zu den bekanntesten zählt GraphQL. Im Gegensatz zu RESTful APIs strukturiert GraphQL die Daten nicht nach Ressourcen, sondern nach Typen und deren Attributen. Dadurch gibt es nur einen Endpunkt, mit dem mehrere Ressourcen abgefragt werden können. Der Request kann außerdem so definiert und gefiltert werden, dass nur die tatsächlich benötigten Daten zurückgegeben werden.

RESTful APIs, GraphQL oder CROQ

Das System Strapi nutzt standardmäßig ein REST API, das es erlaubt, Inhaltstypen durch Endpunkte zu erreichen. Es werden automatisch Endpunkte für CRUD-(Create-Read-Update-Delete-)Funktionalitäten erstellt. Zudem gibt es die Möglichkeit, Endpunkte anders zu benennen und zu verändern. Dabei können Endpunkte komplett oder teilweise deaktiviert, mit berechneten Daten gefüllt oder komplett überschrieben werden. Zusätzlich bietet Strapi die Möglichkeit, über ein Plug-in auch das GraphQL API zu nutzen. GraphQL erstellt automatisch für jeden Inhaltstyp Querys und Mutations.

WordPress ist zwar kein Headless CMS, bietet aber ein REST API an, das standardmäßig unter dem folgenden URL abgefragt werden kann: https://<wordpress-site-url>/wp-json/. Zusätzlich können durch Plug-ins weitere Abfragesprachen wie GraphQL genutzt werden. WordPress generiert automatisch API-Endpunkte, mittels PHP können aber auch eigene Endpunkte definiert werden.

Sanity verwendet standardmäßig die hauseigene Abfragesprache CROQ. CROQ steht für Graph Rational Object Queries und wurde speziell für den Einsatz dieses CMS entwickelt. Ebenso wie bei GraphQL werden nur die benötigten Daten abgerufen, Informationen aus verschiedenen Ressourcen verbunden und in einer Antwort zurückgegeben, die individuell strukturiert werden kann. Mit CROQ können Ressourcen nur abgefragt und nicht verändert werden. Eine beispielhafte Abfrage wird im nachstehenden Code gezeigt, in dem alle Künstler mit Namen, einem Link zur entsprechenden Künstlerwebsite und Kunstwerken zurückgegeben werden. Als Kunstwerke werden alle Objekte geladen, die dem jeweiligen Künstler zugeordnet wurden. Darüber hinaus bietet Sanity auch ein GraphQL API an. Allerdings können hier nur Querys und keine Mutations verwendet werden. Um Inhalte zu verändern, kann ein REST API genutzt werden.

*[ _type == "artist"]{
  name,
  "link": slug.current,
  "artworks": *[_type == "artworks" && artist._ref == ^._id]
 }

Cloud-Hosting

Hosting ist ein wichtiges Kriterium, da es über die Verfügbarkeit der Daten und die Geschwindigkeit der Website Aufschluss gibt. Moderne CMS setzen auf Cloud-Hosting. Dabei liegt das CMS auf mehreren miteinander verbundenen Servern. Die Auslastung kann auf mehrere Server verteilt werden, was zu einer besseren Performance führt. Meist wird die Cloud durch das Pay-as-you-go-Preismodell abgerechnet, sodass nur das gezahlt wird, was wirklich genutzt wird. Da die Rechenkapazität einfach skaliert werden kann (durch Ab- und Zuschalten von Servern) wird eine enorme Flexibilität erreicht. Zudem wird die Verfügbarkeit garantiert.

Strapi ist eine Open-Source-Software und kann on-premises, also in einer eigenen Umgebung, gehostet werden. Alternativ stehen Leitfäden bereit, um die Software manuell auf einen Cloudanbieter wie AWS oder Azure zu deployen. Ein vom Unternehmen angebotenes Cloud-Hosting befindet sich derzeit noch im Aufbau.

Bei Sanity ist die Verwaltungsumgebung Sanity Studio Open Source. Das CMS kann damit lokal getestet und aufgesetzt werden, das API wird allerdings auf den Servern des Unternehmens gehostet. Das bringt einige Vorteile mit sich: Das Deployment ist mit nur einem Befehl erledigt, und Sanity stellt nicht nur die Pipeline und Kapazität zur Verfügung, sondern kümmert sich gleich selbst um regelmäßige Updates und Backups.

Beim Open-Source-Platzhirsch WordPress kann man auf sämtliche Möglichkeiten und fast unzählige Hostinganbieter zurückgreifen. Viele Unternehmen bieten beispielsweise eine Ein-Klick-Installation mit regelmäßigen Updates und Backups an.

Schneller an die Inhalte: Content Delivery Networks

In unserer schnelllebigen Zeit ist es wichtig, dass Kund:innen und Nutzer:innen schnell auf die Inhalte Zugriff haben. Content Delivery Networks (CDNs, Abb. 3) sind geografisch sinnvoll verteilte Server, die für ein schnelles Bereitstellen von Internetinhalten sorgen. Um die Latenz möglichst gering zu halten und damit eine bessere User Experience zu gewährleisten, speichern CDNs Kopien von Webinhalten auf sogenannten PoPs (Points of Presence). Damit kann der Caching-Server, der physikalisch dem Client am nächsten ist, die Inhalte bereitstellen. Das hat noch einen weiteren Vorteil: Dank des temporären Speicherns können Inhalte effizient für mehrere Nutzende bereitgestellt werden. So werden Netzwerküberlastungen verhindert.

Sanity stellt CDNs für Assets und das API bereit. Die Asset-CDNs basieren auf Google-Services und cachen Bilder, Videos und andere Formate. Um die API-CDNs zu nutzen, kann statt dem URL api.sanity.io einfach apicdn.sanity.io angesprochen werden.

Abb. 3: Funktionsweise eines Content Delivery Networks

Unterschied zwischen Cloud und CDNs

Cloud-Hosting und die Verwendung eines CDN sind sehr ähnlich, denn beide speichern Inhalte auf mehreren geografisch verteilten Servern. Sie unterscheiden sich allerdings in ihrem Verwendungszweck: CDNs sind keine Webhosts. Sie sind lediglich für das Zwischenspeichern von Caching-Daten verantwortlich, um Inhalte näher und schneller an Endkonsument:innen zu bringen. Cloud-Hosting wiederum wird verwendet, um flexibel und bei Bedarf kurzzeitig mehr Kapazitäten für das Hosting und das Bereitstellen von Daten zu ermöglichen.

Content First

Content Modeling beschreibt den Prozess, mit dem eine logische Struktur erstellt wird, in der Inhalte gespeichert werden können. In einem Content Model werden einzelne Inhaltstypen, eine Art Template, mit ihren Attributen definiert und im Detail beschrieben. Die Attribute sind gewöhnlich Inputblöcke, in die Inhalt eingetragen werden kann. Das können ein Text, eine Zahl, Medien, eine Enumeration oder andere CMS-spezifische Inhaltstypen sein.

Wie in Abbildung 4 dargestellt, sollten alle Informationen auf kleinstmögliche Datenstücke heruntergebrochen und sinnvoll beschriftet werden. Der Inhaltstyp „Katze“ hat hier die Attribute „Name“ (Text), „Alter“ (Nummer) und „Bild“ (Media). Von einem Inhaltstyp können mehrere Instanzen angelegt werden, in diesem Beispiel Katze #1 und Katze #2.

Abb. 4: Beispiele für einen Content Type und dessen Attribute

Content Hub durch strukturierten Inhalt

Alle CMS nutzen ein Content Model zur Strukturierung des Inhalts. Doch vor allem Headless CMS folgen dem sogenannten Content-first-Ansatz, da sie sich auf die Strukturierung der Inhalte konzentrieren und nicht auf deren Darstellung. Klassische CMS wie Drupal oder Typo3 haben nur wenig Struktur: Die Inhaltstypen sind fest vordefiniert (z. B. Websites, Blogposts und User) und nur schwer erweiterbar. Zudem haben die Inhaltstypen nur wenige Attribute, wie in Abbildung 5 auf der linken Seite dargestellt ist. Der Inhaltstyp Website hat beispielsweise nur das Attribut header und body, in dem alle Inhalte, wie Texte, Bilder und Videos eingefügt und formatiert werden.

Im Gegensatz dazu können mit CMS wie Strapi eigene Inhaltstypen definiert werden. Eine Website über Künstler könnte zum Beispiel die Inhaltstypen Künstler, Kunstwerk, Blogbeitrag und Website haben. Jeder dieser Inhaltstypen kann mit beliebig vielen und unterschiedlichen Attributen ausgestattet werden (Abb. 5, rechte Seite).

Abb. 5: Links unstrukturierter Inhalt mit wenigen Attributen, rechts strukturierter Inhalt

WordPress speichert Inhalte nur bedingt strukturiert

WordPress bietet von Haus aus keine Möglichkeit, eigene Inhaltstypen zu erstellen. Da WordPress ein klassisches CMS ist, ist es nicht auf diese Art der Inhaltsstrukturierung ausgelegt. Standardmäßig verfügt WordPress über sieben Content Types, genannt Post Types. Über Plug-ins oder im Code mit PHP können auch eigene Types erstellt werden. Bekannte Plug-ins sind dafür das „Custom Post Type UI“ oder „Advanced Custom Fields“. Bei der Wahl des Plug-ins muss auf die Erstellung von API-Endpunkten geachtet werden. Nicht jedes Plug-in erstellt automatisch Schnittstellen mit den CRUD-Funktionen. Teilweise müssen sie im Code selbst erstellt werden.

Sanity und Strapi bieten mehr Möglichkeiten

Sanity und Strapi bieten für das Content Model vergleichbare Funktionalitäten, wobei sie sich vor allem in der Erstellung unterscheiden. Strapi bietet für die Erstellung der Inhaltstypen und -attribute ein intuitives User Interface, mit dem alle Optionen ausgewählt und definiert werden können. Bei Sanity müssen die Inhaltstypen und -attribute im Code festgelegt werden. Das ist anfangs aufwendiger, da die Möglichkeiten von Attributen und deren Optionen in der Dokumentation nachgelesen werden müssen. Gleichzeitig bietet das mehr Freiheiten in der Erstellung und Verschachtelung. Besonders interessant sind dabei spezielle Inhaltstypen, die dem größten Nachteil von strukturiertem Inhalt entgegenwirken sollen: Komponenten und Arrays ermöglichen Redakteur:innen mehr Freiheit in der Gestaltung der Inhalte.

Inhaltsattribute für mehr Gestaltungsspielraum

Jedes CMS bietet eigene Attribute an. Folgende sind allerdings bei der Mehrheit vertreten:

• RichText ist Text, der neben dem Inhalt auch Formatinformationen speichert.

• Komponenten bündeln mehrere Attribute zu einem neuen Attribut, zum Beispiel Vorname und Nachname. Diese können meist von allen Inhaltstypen verwendet werden.

• Wiederholbare Komponenten sind Komponenten, die mehrmals verwendet werden können, z. B. können für einen Inhaltstyp „Workshop“ mehrere Termine eingetragen werden, jeweils mit den Attributen Uhrzeit und Ort.

• Durch Arrays können Redakteur:innen aktiv die Reihenfolge des Layouts mitbestimmen. In diesen Zonen können Komponenten definiert werden, die von den Redakteur:innen nach Belieben verwendet und strukturiert werden können. Wie in Abbildung 6 zu sehen ist, kann in einem Array eine Komponente erstellt und mit Drag-and-drop in die gewünschte Reihenfolge gebracht werden. Redakteur:innen können dadurch zum Beispiel entscheiden, ob sie zuerst ein Bild und dann den Text platzieren möchten oder umgekehrt.

Abb. 6: Mit Arrays kann das Layout beeinflusst werden (Sanity Studio)

Gestaltungsmöglichkeiten für Redakteur:innen

Ein Attribut kann auch ein RichText-Feld sein, wie z. B. in Abbildung 5 auf der linken Seite das „Body“-Element. Für den RichText gibt es oft WYSIWYG-(What-you-See-Is-What-You-Get-) Editoren, mit denen grundlegende Formatierungen möglich sind wie Schriftgröße oder -farbe. Allerdings sind diese Editoren auch stark in der Gestaltung von Layouts eingeschränkt und machen das Verwenden von Inhaltstypen innerhalb des RichTexts schwer.

WordPress verwendet seit 2018 als Standard-WYSIWYG-Editor den Gutenberg-Editor. Dieser speichert den Inhalt in eigenen Blöcken ab, sodass diese leicht per Drag and Drop verschoben und manipuliert werden können. Die „Blöcke“ des Gutenberg-Editors werden allerdings nicht als einzelne Objekte abgespeichert. Sie sind über das API daher nicht einzeln erreichbar. Die Nutzenden des API bekommen daher nicht selten ein riesiges HTML-Objekt zurück.

Da Headless CMS für getrennte Speicherung von Inhalten und Darstellung ausgelegt sind, wird RichText im Frontend nicht automatisch mit den gleichen Formatierungen angezeigt, die im CMS vorgenommen wurden. CSS-Klassen werden zwar in HTML gespeichert und in der API-Response mit überliefert, aber solange die CSS Styles im Frontend nicht definiert werden, können die Styles nicht angezeigt werden.

Strapi nutzt deshalb keinen WYSIWYG-Editor, sondern Markdown. Durch die simple Syntax ist Markdown leichtgewichtig und verhindert Fehler in der Semantik. Mit Markdown kann eine Überschrift nicht eingefärbt oder in der Größe verändert, sondern nur dem semantischen Zweck zugeordnet werden. Die Semantik kann dann einfacher im Frontend gestylt werden.

Preisvergleich

Alle drei untersuchten CMS bieten eine kostenlose Version an, die für private, aber auch kleinere Projekte ausreichend ist. Strapi als selbstgehostete Software beschränkt in der kostenfreien Version die Support- und Autorisierungsfunktionalitäten. Ein um einige Funktionalitäten und Support erweiterter Tarif ist ab 9 $ pro Monat (ohne Hosting) erhältlich. Sanity, das nur als SaaS-Produkt (also mit Hosting) vom Unternehmen erworben werden kann, beschränkt in der kostenlosen Version beispielsweise die Anzahl der Nicht-Admin-Nutzer:innen sowie Bandbreite, Medien, Speicherplatz etc. Für kleine Teams existiert ein Preismodell ab 99 $ pro Monat.

WordPress ist damit schwer zu vergleichen, da die Kosten und das Angebot je nach Hostinganbieter stark variieren. Dabei sollte nicht vergessen werden, dass die Kosten für mögliche Plug-ins noch dazu kommen können.

Fazit: Strapi für größere Projekte empfehlenswert

Durch die große Anpassbarkeit und Personalisierungen empfiehlt sich Strapi vor allem für größere Projekte. Das API kann mit eigenen Endpunkten angepasst werden, und durch Zugriffsberechtigungen wird genau definiert, wer welche Informationen abrufen darf. Strapi zeichnet sich durch ein sehr intuitives User Interface aus, das alle Inhalte sortieren und durchsuchen kann. Mit dem Content Type Builder können die Inhaltstypen und ihre Attribute einfach über das Interface zusammengestellt werden (Abb. 7).

Abb. 7: Der Content Type Builder von Strapi erlaubt es, die Inhaltstypen über ein GUI zu erstellen

Außerdem bietet Strapi Redakteur:innen die Möglichkeit, sich selbst in die Gestaltung miteinzubringen: Es gibt einen Markdown-Editor und Dynamic Zones, eine Art Array, durch die das CMS zu einem Drag-and-Drop-Editor werden kann. Trotzdem kann das Webdesign komplett unabhängig im Frontend gestylt werden.

Durch eigenes Hosting hat man Kontrolle und Sicherheit über seine Daten. Gleichzeitig ist das Hosting auch der größte Kritikpunkt an Strapi: Das Set-up ist relativ komplex und zeitaufwendig, ist also nicht für Anfänger geeignet. Außerdem bietet Strapi momentan (Stand November 2022) noch kein eigenes Cloud-Hosting an.

Tabelle 1: Vergleich der drei Systeme im Überblick

Sanity als Allrounder

Sanity ist besonders für kleine bis mittelgroße Projekte geeignet. Sanity folgt dem Content-first-Ansatz durch und durch: Jedes bisschen Information wird in einem separaten Block gespeichert und ist über das API abrufbar. Sanity enthält dafür nicht nur viele verschiedene Content Types für jede Art von Attributen, sondern strukturiert selbst den Inhalt des Editors in einzelne JSON-Objekte.

Außerdem ist Sanity vor allem eins: schnell. Mittels eines Befehls kann das in Sanity Studio lokal entwickelte Projekt deployt werden und ist bereit für die Nutzung. Für eine bessere Performance verwendet Sanity CDNs für das Caching von Assets und Informationen. Auch Bilder können optimiert und ein Hotspot kann gewählt werden, damit die wichtigen Aspekte des Bildes immer angezeigt werden.

Standardmäßig bietet Sanity CROQ für Abfragen an, um möglichst zielgenaue Querys zu formulieren. Dennoch benötigt es einigen Zeitaufwand, die Abfragesprache zu lernen. Ein weiterer Nachteil ist, dass Nutzer:innen des API nicht in Rollen zusammengefasst werden und ihre Rechte eingeschränkt werden können. Außerdem bietet Sanity kein Hosting auf eigenen Servern (on-premises), was für größere Projekte mit sensiblen Daten unattraktiv sein kann.

WordPress kann als Headless CMS nicht mithalten

WordPress sollte als Headless CMS nur genutzt werden, wenn es ausdrücklich gewünscht ist. Der größte Vorteil liegt in dem vertrauten User Interface. Da WordPress so beliebt ist, haben schon viele Content Creators damit gearbeitet und kennen sich aus, was die Eingewöhnungszeit merklich verkürzt. Die größten Schwierigkeiten liegen in der Erstellung eines feingliedrigen Content Models. Eigene Inhaltstypen und ihre Attribute können nur über ein Plug-in erstellt werden. Je nach Plug-in werden so auch keine eigenen Endpunkte generiert, sodass diese selbst im Code definiert werden müssen.

Fazit

Wenn es gilt, für die Zukunft mit unterschiedlichsten internetfähigen Geräten gerüstet zu sein, sollte heutzutage ein Headless CMS genutzt werden. Dabei sollte das Hosting in Augenschein genommen werden – es ist wichtig, da von ihm Skalierbarkeit und Datensicherheit abhängen.

Das Herzstück eines Headless CMS ist der Umgang mit dem Inhalt. Wie wird der Inhalt strukturiert und gespeichert? Wie können Inhaltstypen erstellt werden und welche Felder werden benötigt? Wie können die Daten abgerufen werden? Diese Fragen sollten auf jeden Fall vor der Entscheidung für oder gegen ein bestimmtes CMS beantwortet werden, um eine bessere Vorstellung zu haben, wie das Content Model aussehen könnte.

Werden für ein Projekt vor allem große gestalterische Freiheiten für die Redakteur:innen benötigt, sollte man sich über deren Umfang im Klaren sein. Oft ist es ausreichend, das Layout nach Belieben aus Komponenten zusammenzustellen. Mehr Freiheiten könnten WYSIWYG-Editoren bieten, wobei die Herausforderungen der Darstellung auf multimedialen Geräten (Stichwort Responsivität) nicht vergessen werden dürfen. Je nach Projekt und Nutzergruppe sind die Kriterien also unterschiedlich zu gewichten.

Darüber hinaus existieren weitere Architekturen für das Verwalten von (Web-)Inhalten, wie beispielsweise Flat File CMS oder AEM/DXP. Diese haben ihre ganz eigenen spezifischen Vor- und Nachteile und wurden im Rahmen der zugrunde liegenden Arbeit [3] nicht berücksichtigt. Das Web entwickelt sich jedenfalls immer weiter. Wer weiß, welche Geräte in Zukunft daran angeschlossen werden und Informationen benötigen. Ein Headless-CMS bietet hierfür jedenfalls aktuell noch die passenden Möglichkeiten.

The post Der Headless-CMS-Vergleich appeared first on webinale 2025.

Bevor wir allerdings diese Fragestellung erörtern, klären wir vorab erst einmal einige Begrifflichkeiten, um auf der gleichen Wissensbasis zu starten. Ich hole mal ein wenig aus und wandele durch die EDV-chronologischen PC-Zeitalter. In der guten alten Zeit, dem „Cataractär“ oder Wasserfallzeitalter, herrschte das Konzept des BDUF vor, des Big Design Up-Front. Ellenlange Spezifikationen, die über (gefühlte) Äonen hinweg (quasi) auf Steintafeln erarbeitet wurden, bildeten die Grundlage dessen, was im nächsten IT-Zeitalter von Anwender:innenn verwendet werden sollte. Oftmals verloren sich die Unternehmen bei der Entwicklung des digitalen Gewerks in einer Art Innensicht. Man konzentrierte sich zum Zeitpunkt des Schreibens der Spezifikation auf innovative Technik, Unternehmensziele und eben betriebswirtschaftliche Effizienz. Was können wir in kurzer Zeit im Rahmen der vorhandenen Ressourcen und des Budgets anbieten? Manchmal, aber leider nicht allzu oft, konnte das Gewerk sogar noch mit einer ansprechenden grafischen Umsetzung ornamentiert werden. Bei allem Bestreben wurden die Nutzenden erst am Ende der Entwicklungszeit mit den Produkten oder Projekten in Berührung gebracht. Diese Herangehensweise resultierte häufig in Anwendungen, die eine tiefgreifende Einarbeitung und Schulung erforderten, da sie nicht intuitiv bedienbar waren und den Menschen, die damit letztendlich arbeiten sollten, nicht die Funktionalität boten, die von den Betroffenen von Anfang an erwartet wurde. Das Projektteam war glücklich, doch die Nutzenden blieben auf der Strecke.

Viele der schwerfälligen Bewohner des Cataractär haben sich evolutionsbedingt verändert und sahen sich mit den Neuerungen der Zeitalter des „Prä-Agilums“ und des anschließenden „Agilums“ konfrontiert. Wendigkeit und Reaktivität wurden jetzt bei der Projektleitung bzw. Produktentwicklung großgeschrieben. Zwei der bis in das heutige IT-Zeitalter noch vorherrschenden Entwicklungsäste waren das User-centered Design und das später folgende Human-centered Design (oft auch synonym verwendet), das sich hervorragend in die, diesmal nicht vom Autor erfundene, geochronologische Epoche des Anthropozän (altgriechisch: ἄνθρωπος (ánthropos), deutsch: Mensch und καινός: neu) eingefügt hat. Das Human-centered Design orientiert sich nicht in erster Linie an den Unternehmensinteressen und -kompetenzen, sondern stellt die Bedürfnisse, Fähigkeiten und Wünsche der Menschen in den Mittelpunkt. Produkte und Projekte entstehen (so der hehre Wunsch) in einem iterativen Prozess und in engem Austausch mit den späteren Nutzenden. Anmerkung: Was für die Digitalbranche neu war, ist im Produktdesign schon seit den 90er-Jahren des letzten Jahrtausends gängige Praxis. Unter den millisekundenbewussten Digitalschaffenden ist der nutzerzentrierte Ansatz erst in den vergangenen Jahren verstärkt in den Fokus gerückt.

Ok, alle Unklarheiten beseitigt? Diese geowissenschaftlich orientierte Einführung markiert den Punkt unseres aktuellen Schaffens und unserer aktuellen Bestrebungen, den Menschen im Mittelpunkt unseres digitalen Gewerks zu verorten. Anmerkung des Autors: Leider funktioniert noch nicht einmal das flächendeckend befriedigend, aber das ist eine andere Diskussion (#inclusivedesign #ethicaldesign #accessibility #wtfusability). Jetzt aber wieder zurück zu meinem Gedanken: Ist rein nutzerzentriertes Design eigentlich nicht ziemlich anmaßend in der heutigen Zeit?

Wohin uns der Anthropozentrismus gebracht hat, erfahren wir und die nachfolgenden Generationen am eigenen Leib. Dieses Jahr schon am 28. Juli begehen wir den Earth Overshoot Day [2], den Tag, an dem die Menschheit alle biologischen Ressourcen verbraucht hat, die die Erde im Laufe eines Jahres regeneriert. Ok, schlimm, aber da bekommen wir als hartgesottene Nachrichtenschauer doch noch nicht das Zähneklappern. Sollten wir aber! Denn wenn man die vorangehende Aussage in ein wenig anderes Szenario presst, sollte jedem von uns die wahre Tragweite dieses Tages bewusst sein. Stellen wir uns doch einmal die Erde als juristische Person vor, die vor allem an der Sicherung ihrer eigenen wirtschaftlichen Interessen interessiert ist. In einem solchen Szenario würde CEO Erde der Menschheit den Zugang zu ihren natürlichen Ressourcen, Trinkwasser, Atemluft, Nahrungspflanzen, Holz, Fisch, alles, was sie in biologischen Zyklen (aka Geschäftsjahren) produziert, mit sofortiger Wirkung gleich nach dem Überschreitungsdatum abschneiden und den Zugang erst im nächsten Jahr wieder freigeben. Dieses drastische Beispiel aus dem Artikel „Your next persona will be non-human – tools for environment-centered designers“ [3], lässt uns die Bedeutung dieses Tages ungleich besser verstehen.

Lange genug hat sich der Mensch als Mittelpunkt der weltlichen Realität verstanden, und das hat uns an den Punkt geführt, an dem wir heute sind: Klimakrise, Umweltverschmutzung nie dagewesenen Ausmaßes, Wasserknappheit … you name it! Der Designer Mike Montero fasst es treffend zusammen: „The world isn’t broken. It’s working exactly as it was designed to work. And we’re the ones who designed it. Which means we fucked up“ [4]

Umweltorientiertes Design

Heute stehen wir am Abgrund und morgen sind wir vielleicht einen entscheidenden Schritt weiter. Es ist an uns, damit zu beginnen, etwas dagegen zu tun, sowohl individuell als auch systematisch. Es sollte in unser aller Interesse sein, die Auswirkungen des Klimawandels zumindest abzuschwächen, die immer weiter zunehmende Wasserknappheit zu bewältigen und die Tragfähigkeit unseres Planeten auch für künftige Generationen zu sichern. Und ja, auch DevOps-, Frontend- und Backend-Entwickler:innen, Full-Stack- und UI-Designer:innen können einen Beitrag dazu leisten.

Wir brauchen eine neue Perspektive, aus der heraus wir verstehen, was für uns und für alle Lebewesen auf dem Spiel steht. Wenn unser Schaffen weiterhin nur Human-centered bleibt und die Bedürfnisse, Ansprüche und ökologischen Grenzen [5] unserer Umwelt bei der Gestaltung und Bereitstellung unserer Projekte, Produkte und Dienstleistungen nicht gleichwertig berücksichtigt und respektiert werden, fahren wir die Karre (oder eigentlich: den Planeten) an die Wand. Im Gegensatz zu den Digitalschaffenden haben fast alle Industriezweige bereits Richtlinien und Messwerte zur Umweltverträglichkeit etabliert. Auch die Instrumente und Methoden zur Berechnung dieser Messwerte sind standardisiert. Die Gruppe der Entwickler:innen und Webdesigner:innen ist zurzeit noch an keine spezifischen Umweltstandards gebunden, und das muss sich ändern. Es ist an der Zeit, uns Menschen nicht mehr als den Mittelpunkt von allem und jedem zu sehen, oder mit den berühmten Worten von Paul Simon als Host in Saturday Night Live „Why don’t you stop taking yourself so seriously for a while?“ [6].

NOCH MEHR ZU WEB DESIGN?

Der Web Design & Development Track

Mehr erfahren

Wir brauchen einen neuen Design- bzw. Denkansatz. Weg vom benutzerzentrierten hin zum umweltzentrierten. Umweltorientiertes Design könnte eine praktikable Möglichkeit sein, dem Menschen seine Rolle als Teil der Umwelt und nicht als deren Krönung wieder bewusst zu machen. Das anthropozentrische Design vernachlässigt die Einbeziehung von Umwelt oder nichtmenschlichen Faktoren in den Design- und Managementprozess. Umweltorientiertes Design oder Environment-centered Design zielt darauf ab, diese Lücke zu schließen und dieses fehlende, aber wichtige Element in den Gestaltungsprozess zu integrieren.

In einem interessanten Artikel mit dem Titel „The time for Environment-Centered Design has come“ von Monika Sznel auf UX Collective [7] beschreibt die Autorin „Umweltorientiertes Design“ als „[…] einen Ansatz für die Produkt- oder Dienstleistungsentwicklung, der darauf abzielt, Produkte oder Dienstleistungen ökologisch, sozial und wirtschaftlich nachhaltig zu gestalten, indem er sich auf die Bedürfnisse, Einschränkungen und Präferenzen der menschlichen Zielgruppe und der nichtmenschlichen strategischen Interessengruppen konzentriert. Er umfasst Wissen und Designtechniken, die an der Schnittstelle von menschzentriertem Design, Benutzerfreundlichkeit, Ökologie und Nachhaltigkeitswissenschaft entwickelt wurden.“

Umweltzentriertes Design ist die nächste Evolutionsstufe des menschenzentrierten Designs. Es werden sowohl die menschlichen als auch die nichtmenschlichen Interessengruppen eines Produkts oder einer Dienstleistung von Anfang an in die Prozesse mit einbezogen. Umweltorientiertes Design befähigt alle Projektbeteiligten, innerhalb der Konzeption und der anschließenden Umsetzung der Lösungen sowohl die Bedürfnisse der Menschen als auch die der uns umgebenden Ökosysteme mit einzubeziehen. Seien es Tiere, Auswirkungen auf den Regenwald im Amazonas oder auf indigene Völker, die Fauna der Nordsee und, und, und … Umweltzentriertes Design schafft das befreiende Gefühl, sich als ein Teil von etwas Größerem zu verstehen und nicht als die Krone der Schöpfung. Vielmehr wird jedes Ökosystem gleichermaßen berücksichtigt. Weg von der Pyramide mit dem Menschen an der Spitze und hin zu einer Kreisform, mit dem Menschen als einer von vielen anderen Spezies auf diesem Planeten. Meines Erachtens eine realistischere Sichtweise auf die Welt.

Nichtmenschliche Personas

Als Teil der Spezies Mensch ist beziehungsweise sollte es ein Leichtes sein, sich in die Bedürfnisse der eigenen Gattung hineinzuversetzen. Aber wie schaue ich durch die Brille von Mutter Erde, des Bodens, des Waldes, des Ozeans oder gar eines Wals? Gegenfrage(n): Wie mache ich es denn bisher in meinem Projektalltag? Wie argumentiere ich bisher für eine Benutzergruppe? Welche Tools gibt es dafür? Wenn wir die Worte von Whitney Hess „Acknowledge that the user is not like you” bzw. „erkenne an, dass der Nutzende nicht wie du ist“ [8] bereits beherzigen, dann sind wir schon auf einem guten Weg. Was für uns offensichtlich ist, muss für jemand anderen nicht unbedingt offensichtlich sein. Unsere Denkprozesse und unser Verständnis der Umwelt sind stark kulturell, von unserer Erziehung und von unseren früheren Erfahrungen geprägt. Es ist sehr unwahrscheinlich, dass die Menschen, für die wir etwas designen oder entwickeln, alle unsere Eigenschaften haben.

Eine Möglichkeit dieses Statement von Whitney Hess (Anmerkung des Autors: Auch Josh Brewer hat den Spruch schon verwendet [9], es scheint also etwas dran zu sein) in einen Design- bzw. Entwicklungsprozess zu integrieren, ist die Verwendung von Personas [10]. Personas lassen uns durch ihre Brille schauen und ermöglichen es, Entscheidungen anhand ihrer Bedürfnisse und Ziele zu treffen. Valide und belastbare Personas zu erstellen war schon immer mit Arbeit verbunden, allerdings gut investierter Arbeit. Wer sagt denn, dass Personas immer menschlich sein müssen (das wäre schon wieder anmaßend)? Lasst uns doch aus den bekannten Menschengefilden ausbrechen und lernen, eine andere Perspektive einzunehmen. Die Designerin Monika Sznel hat eine dreiteilige Artikelreihe über das Thema „Environment-centered Design (ECD)“ verfasst, bei der sie sich auch Gedanken zur Verwendung nichtmenschlicher Personas [11] als Design- und Entscheidungstools macht.

Wie bereits beschrieben, ist es gar nicht so einfach, durch die Augen eines anderen (der gleichen Spezies) zu schauen und sich in dessen Gefühlswelt hineinzuversetzen. Jetzt sollen wir uns in einen Wald oder eine Landschaft hineinversetzen? Erfreulicherweise haben hierfür schon einige prominente Schauspieler eine nicht zu verachtende Vorarbeit für uns geleistet, die es uns erleichtert, Empathie mit unserer Umwelt zu empfinden und Inspiration für unsere nichtmenschlichen Personas zu finden. Auf der Website von Conservation International [12], einer Non-Profit-Organisation mit dem Ziel, die weltweite Biodiversität an Pflanzen, Tieren und Landschaftsformen zu erhalten, findet sich eine Rubrik Namens „Nature is Speaking“ [13]. Dort leihen Schauspieler:innen wie Julia Roberts, Harrison Ford, Reese Witherspoon, Edward Norton und viele andere nichtmenschlichen Entitäten wie dem Ozean, dem Boden, Mutter Natur und so weiter auf emphatische Weise ihre Stimmen. Es gibt auch eine deutsche Version [14] mit den Stimmen von Hannelore Elsner, Hannes Jaenicke, Marie Nasemann und anderen.

Wenn das nicht ein guter Start ist! Die nichtmenschlichen Personas sollen uns dabei helfen, das Umfeld, in dem sowohl unsere Zielgruppen als auch unsere Produkte und Dienstleistungen performen sollen, besser zu verstehen und frühzeitig Implikationen zu erkennen. Je besser die Wissensbasis, umso besser und authentischer die nicht-menschliche Persona. Dazu braucht es Fakten, Fakten, Fakten (an der Stelle sei übrigens das Buch „Factfulness“ [15] empfohlen, um faktenbasiertes und datengesteuertes Denken zu trainieren). Es bedarf der Analyse von Sekundärdaten und intensiver Eigenrecherche. Mögliche Quellen sind: Verschmutzungsstatistiken, Daten und Berichte seriöser Organisationen ohne politische oder wirtschaftliche Zugehörigkeit (z. B. UNO [16]), von unserem Unternehmen oder von uns selbst gesammelte Daten (z. B. der CO₂-Fußabdruck unseres digitalen Gewerks, Wasserverbrauch während des Produktionsprozesses oder die Menge an Energie, die benötigt wird, um den Betrieb der Software, des Büros und anderer notwendiger Infrastruktur sicherzustellen). Auch die Befragung von Vertreter:innen von Nichtregierungsorganisationen, die im Umweltbereich tätig sind, von Wissenschaftler:innen oder Kolleg:innen mit Fachwissen in einem bestimmten Bereich oder von faktenorientierten Aktivisten sind hervorragende Quellen zur Datensammlung und zur Vertiefung unseres umweltbezogenen Rucksackwissens.

Wie auch bei den echten Personas, müssen wir bei nichtmenschlichen Personas empirisch, ehrlich und authentisch bleiben und uns nicht dazu verleiten lassen, in Stereotypen, Unwahrheiten und Wunschvorstellungen zu verfallen. Wir benötigen belastbare Fakten zum tatsächlichen Zustand der jeweiligen Ökosysteme und ihrer Bewohner. Nur dann kann die NMP, die nichtmenschliche Persona, einen wirklich positiven und regulierenden Einfluss auf unsere Projekte und schlussendlich auf die Umwelt haben. Ich möchte dieses Format nicht als Tutorial „Wie bastele ich mir eine Persona?“ verwenden. Dazu gibt es reichlich Material, und das Netz liefert zusätzlich noch mannigfaltige Templates zur Erstellung von Personas. Aber ein paar Aspekte möchte ich an dieser Stelle schon ansprechen.

Allen Personatemplates ist gemeinsam, dass sie uns zuallererst mit der Persona visuell bekannt und vertraut machen. Hier lassen sich Dank des Internets viele Fotos unserer NMP finden. Gerne kann auch ein Urlaubsfoto aus dem eigenen Archiv herangezogen werden, was die Erfahrung mit der NMP meines Erachtens noch intensiver macht. Dem Bild folgend beschreiben wir unsere nichtmenschliche Persona und geben einen Einblick, was die Ursache für ihren derzeitigen Zustand ist und welche menschlichen Aktivitäten oder Schadstoffeinträge ihre Existenz bedrohen. Das ist durchaus vergleichbar mit der bekannten Personakategorie „Needs & Goals“ bzw. „Bedürfnisse und Ziele“. Ein überaus praktikables Stilmittel ist es hier (vgl. Julia Roberts als Mutter Erde [17]), der nichtmenschlichen Persona eine Erzählstimme zu geben (Icherzählung, Zitate). Wenn wir unsere NMP gebastelt haben, stellt sich die Frage, wie eine solche NMP eingesetzt werden könnte. Wer meine Artikel [18] und Vorträge [19] kennt, weiß, dass ich sehr häufig über den Ressourcenhunger des Internets und den Ausstoß an CO₂ unserer digitalen Gewerke rede. Bleiben wir also beim CO₂, aber ändern ein wenig die Perspektive.

Ein praktisches Beispiel

Stellen wir uns vor, dass wir eine Plattform für Klein- und Hobbygärtner:innen entwickeln, die europaweit operieren soll. Wir haben sowohl die Technik als auch die Vertriebskanäle unseres Portals gründlich durchdacht und schon ein paar Werbepartner für Gärtnerbedarf mit ins Boot geholt, die saisonal im großen Stil Blumenerde bewerben. Blumenerde ist ein essenzieller Bestandteil des Gärtners, sowohl im Garten wie auch auf dem Balkon und innerhalb der heimischen vier Wände. Im Frühjahr geht es meistens so richtig los und alle wollen raus in den Garten und auf den Balkon. Dann steigt natürlich die Nachfrage nach Blumenerde. Den wenigsten ist dabei bekannt, dass sich in den Plastiksäcken mit der Aufschrift „Erde“ größtenteils Torf befindet. Der Grundbaustein unserer Moore. Moore spielen eine wichtige Rolle für unser Klima. Sie sind effektive Kohlenstoffspeicher und Lebensraum für viele selten gewordenen Tier- und Pflanzenarten. Ihre Fähigkeit zum Speichern massenhafter Mengen an Kohlendioxid sucht ihresgleichen unter den anderen Ökosystemen des Planeten. Moore machen zwar nur drei Prozent der Erdoberfläche aus, dennoch speichern sie rund 30 Prozent des erdgebundenen Kohlenstoffs. Unter anderem nach Angaben des BUND und des Bundesumweltministeriums binden die Moore weltweit doppelt so viel CO₂ wie alle Wälder zusammengenommen. „Jeder Hektar geschütztes Moor spart jährlich rund neun Tonnen CO₂ ein, knapp so viel, wie jeder von uns im Durchschnitt pro Jahr verursacht“, so Michael Zika, WWF-Naturschutzexperte. Weiterhin ist es wichtig zu erwähnen, dass Moore zu 95 Prozent aus Wasser bestehen und dadurch bedeutsame Wasserspeicher sind. Sie helfen dabei, die Wucht von Überschwemmungen zu kompensieren und Flutkatastrophen zu verhindern. Aus diesem Grund sind intakte Moore für den Klimaschutz von zentraler Bedeutung. Ihre Zerstörung verursacht volkswirtschaftliche Schäden in Millionenhöhe. Der Bedarf an Torf im Gartenbau ist riesig. Die Mehrheit aller Setzlinge im professionellen Gartenbau, aber eben auch im Hobbygartenbau, wächst heute noch auf Torferde heran. Ohne es zu wissen, tragen viele Hobbygärtner:innen dazu bei, dass unwiederbringliche Moorlandschaften verloren gehen.

Da in Deutschland der Torfabbau am Auslaufen ist und nur auf landwirtschaftlich vorgenutzten Flächen erlaubt ist, also von Mooren, die bereits vor vielen Jahren trockengelegt wurden, werden große Mengen Torf verstärkt aus den baltischen Staaten importiert, wo der Schwund der Moore rasant voranschreitet. Woher der Torf kommt, der in der durchschnittlichen Blumenerde verarbeitet wird, ist für die Verbraucher:innen bzw. die Besucher:innen unseres Gärtnerportals kaum oder gar nicht zu ersehen. Sicher ist nur, dass dafür wertvolle Moore zerstört werden. Allein in Deutschland sind trockengelegte Moore für geschätzt zwei bis drei Prozent der CO₂-Emissionen verantwortlich. Mehr, als alle Windräder in Deutschland einsparen können, aber wie wir wissen, ist Klimaschutz eine globale Anstrengung. Jetzt mal Hand aufs Herz: Hätten wir uns beim Erstellen eines Gärtnerwebportals über so etwas je Gedanken gemacht? Hätte das für uns eine Rolle gespielt bei der Konzeption des Projekts? Anhand einer NMP wie eines Hochmoors könnten wir die Auswirkungen auf das Ökosystem durchgehen und sie uns ins Bewusstsein rufen. Allein die Recherche für unsere NMP konfrontiert uns mit den Implikationen der Thematik und zwingt uns dazu, eine gesamtheitliche Einordnung des Projekts im Kontext Klima und Umwelt vorzunehmen. Also, was ist gerade passiert? Wir als Digitalschaffende, die doch gar nichts mit Mooren im eigentlichen Sinne zu tun haben, haben in diesem fiktiven Beispiel unsere Verantwortung gegenüber diesem Ökosystem aufgedeckt! Wir haben eine Implikationskette aufgestellt, die eine direkte Beziehung mit unserem Handeln und unserem Gewerk etabliert.

Verantwortung und TORTE

Auch wir im digitalen Sektor tragen Verantwortung an der Entwicklung des Planeten und unserer Umgebung. Nur weil Software bzw. das Internet keinen Auspuff hat, heißt das noch lange nicht, dass es keine negativen Auswirkungen auf die Umwelt hat. Ein weiteres Zitat des Designers Mike Monteiro fasst es sehr treffend zusammen: „We’re no longer pushing pixels around a screen. We’re building complex systems that touch people’s lives, destroy their personal relationships, broadcast words of both support and hate, and undeniably mess with their mental health.“ [4]

Aber nicht nur die psychischen Folgen unseres Handels für den Menschen müssen in unserem Arbeitsalltag stärker Beachtung finden, sondern auch die Implikationen für das Klima und für die Umwelt. Das obige Beispiel ist konstruiert, das gebe ich zu. Aber es zeigt, zu was wir fähig sind, wenn wir uns bewusst mit einer Sache beschäftigen, eben nicht nur technisch. Wir müssen weg von unserem ego- bzw. anthropozentrischen Weltbild und uns wieder als Teil eines Ökosystems verstehen, das leider zurzeit besser ohne uns als mit uns könnte. Ich möchte diese Ausgabe der Kolumne definitiv nicht so pessimistisch enden lassen, sondern eher zum pragmatischen Optimismus animieren. Wir können etwas machen und wir alle können unseren Beitrag dazu leisten, indem wir unseren Horizont erweitern und Produkte und Projekte mit Empathie für die nutzenden Menschen wie auch unsere Umwelt gleichermaßen angehen.

Als Autor des TORTE-Frameworks für Green Webdesign (Testen, Optimieren, Reduzieren, Thematisieren und Engagieren) [20] ermuntere ich Designer:innen, Entwickler:innen und Projektverantwortliche in Vorträgen und Artikeln dazu, TORTE in den Softwareentwicklungsprozess zu integrieren, um nachhaltige Softwarelösungen in die Welt zu entsenden, Green Webdesign bzw. Green Code ins Bewusstsein zu rufen und Nachhaltigkeit zu einem Designprinzip zu machen. Daher hier eine kleine Empfehlung: NMPs lassen sich hervorragend in der Rubrik Testen verorten und erlauben uns einen holistischen Blick auf ganze Ökosysteme statt einzig auf die vermeintliche Krone der Schöpfung, den Menschen. Vielleicht stellt ihr eure nächste Persona ja mit den Worten vor: „Ich bin Gaia, 4,5 Milliarden Jahre alt und Ursprungsort und Heimat aller bekannten Lebewesen …“

Links & Literatur

[1] https://uxdesign.cc/how-user-centered-design-might-be-holding-you-back-535311d64236

[2] https://www.umweltbundesamt.de/themen/erdueberlastungstag-ressourcen-fuer-2022-verbraucht

[3] https://uxdesign.cc/your-next-persona-will-be-non-human-tools-for-environment-centered-designers-c7ff96dc2b17

[4] Monteiro, Mike: „Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It“; Mule Books, 2019

[5] https://www.wired.com/2009/09/earth-users-guide

[6] http://snlarchives.net/Episodes/?197611202

[7] https://uxdesign.cc/the-time-for-environment-centered-design-has-come-770123c8cc61

[8] https://whitneyhess.com/blog/2009/11/23/so-you-wanna-be-a-user-experience-designer-step-2-guiding-principles/

[9] https://52weeksofux.com/post/385981879/you-are-not-your-user

[10] https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design

[11] https://uxdesign.cc/your-next-persona-will-be-non-human-tools-for-environment-centered-designers-c7ff96dc2b17

[12] https://www.conservation.org

[13] https://www.conservation.org/nature-is-speaking

[14] https://www.conservation.org/nature-is-speaking/german

[15] https://www.gapminder.org/factfulness-book

[16] https://www.unep.org/resources/report/action-plan-sustainable-planet-digital-age

[17] https://www.conservation.org/nature-is-speaking/julia-roberts-is-mother-nature

[18] https://entwickler.de/reader/reading/windows-developer/03.2022/c0e3b1ca2c5e949b9bec02d1

[19] https://webinale.de/web-design-development/muell-hat-3r-und-websites-haben-torte

[20] https://www.informatik-aktuell.de/management-und-recht/digitalisierung/green-webdesign-oder-frontendsforfuture-i.html

The post Umweltorientiertes Design appeared first on webinale 2025.

Nichts ist so beständig wie der Wandel. Das gilt besonders für die Webtechnologien, die im Fokus der Aufmerksamkeit aller Unternehmen stehen, die mit dem und über das Netz Geld verdienen. Sie entwickeln sich rapide weiter, und das Grundprinzip dabei lautet: Zeit ist Geld. Die Ladegeschwindigkeit hat direkte Auswirkungen auf die Conversion und letztlich auf die Umsätze, die mit der Seite generiert werden. Ein paar Beispiele: Amazon hat errechnet, dass es 1,6 Milliarden Dollar im Jahr weniger Umsatz machen würde, wenn die Seite eine Sekunde langsamer laden würde [1]. Pinterest hat die subjektive Ladezeit um 40 Prozent gesenkt und damit ein Trafficplus von 15 Prozent geschafft [2]. Und bei Walmart sinkt die Conversion mit jeder Sekunde, die die Seite länger lädt, um zwei Prozent [3]. In der Praxis bedeutet das: 18 Prozent der Onlineshopper brechen den Einkauf ab, wenn die Seite zu langsam lädt, und 79 Prozent kommen danach nicht mehr wieder. Dass noch eine Menge zu tun ist, hat Google selbst in einer Benchmark von Landing Pages herausgefunden: Ein Viertel aller Seiten lädt länger als 10 Sekunden [4]! Wer wartet denn heute noch 10 Sekunden lang ab, ob eine Seite vielleicht noch fertig lädt? Dass Google langsam ladende Seiten im Page Ranking abstraft, ist inzwischen schon längst Allerweltswissen.

Ladezeit als Ausschlusskriterium

In Deutschland ist die Bandbreite immer noch das Sorgenkind der digitalen Entwicklung. Das Festnetz ist auf dem Land oft erbärmlich langsam und 5G ist auf den mobilen Endgeräten immer noch Zukunftsmusik. Viele Websites werden völlig falsch konzipiert, gerade so, als spiele die Bandbreite keine Rolle mehr. Deshalb gilt gerade für die urbanen „Digital Natives“, die in den Agenturen Websites entwickeln: Testet eure Seiten auch auf einem Einsteigersmartphone mit 3G oder Edge. Wer das einmal erlebt hat, für den wird Page Speed ein unverzichtbares Kriterium bei der Entwicklung sein.

Das Google Page Experience Update kommt im Mai 2021

Eines der wichtigsten Ereignisse im Performancebereich wird das Update der Page Experience sein, das Google für Mai 2021 angekündigt hat [5]. Ab diesem Zeitpunkt wird sich die Page Experience unmittelbar auf das Rankingergebnis auswirken. Die Benutzerfreundlichkeit der Seite wird also nicht mehr nur bewirken, dass der Kunde ein besseres Onlineshoppingerlebnis hat, sondern dass er einen Onlineshop auch besser findet. Die für Mobile optimierten AMP-Seiten werden weiterhin gut ranken, aber dann nicht mehr automatisch bevorzugt; auch klassische Webseiten können hervorgehoben werden.

Die Page Experience basiert auf den Core Web Vitals von Google. Das ist ein Bewertungssystem aus drei Metriken, die die Renderzeit und die visuelle Stabilität der Seite messen.

LCP, FID und CLS

Zentral wichtig fürs Ranking ist das Loading, auch Largest Contentful Paint (LCP) genannt. Diese Kennzahl misst das wahrgenommene Ladetempo bis zu dem Moment, an dem die Hauptinhalte der Seite geladen sind. Wenn das größte Element schnell im Viewport geladen ist, etwa das Hauptbild der Seite, dann ist der LCP-Wert gut und die Seite wird gut gerankt. Logische Folge: Die effiziente Komprimierung des Bildmaterials wird immer wichtiger.

Die Interaktivität der Seite wird mit dem First Input Delay (FID) gemessen. Der Wert macht eine Aussage über die Fähigkeit einer Seite, auf Eingaben der Nutzer zu reagieren: Wann ist der Nutzer im Ladeprozess zum ersten Mal in der Lage, mit der Seite zu interagieren?

Mit dem Cumulative Layout Shift (CLS) schließlich wird die visuelle Stabilität der Seite ausgedrückt. Er hält fest, wann die letzten unerwarteten Layoutänderungen bei sichtbaren Seiteninhalten erfolgen.

Zu den Core Web Vitals gehören darüber hinaus noch vier weitere Faktoren, die das Ranking beeinflussen: Wie Mobile-freundlich ist die Seite aufgebaut? Wie sicher ist sie? Liegt sie im HTTPS-Standard vor? Und: Sind hinderliche Unterbrecherelemente eingebaut?

Damit bekommen Seitenbetreiber einen sehr verlässlichen und klaren Rahmen für die Performance der Seite (Abb. 1). Die Core Web Vitals sind quasi das Handwerkszeug, mit dem die Seite schneller und besser gemacht werden kann.

Abb. 1: Performancemetriken [6]

Mobile-only statt Mobile-first

Seit mehreren Jahren werden schon mobile Inhalte bevorzugt, im März 2021 wurde nun Googles Crawling-Index erneut überarbeitet. Ab sofort werden reine Desktopinhalte nicht mehr in den Suchindex aufgenommen, für die Crawler gilt jetzt Mobile-only. Entscheidend sind also die Anweisungen für die Crawler in der robots.txt. Die Meta-Robot-Tags und die Inhalte für Desktop und Mobile müssen übereinstimmen, sonst kommt es zu Trafficeinbußen.

Wenn Seiten beim Relaunch mit Fokus auf Mobilgeräte umgestaltet werden, wirkt sich das meistens nicht nur auf die Indexierung aus, vieles verbessert auch zugleich die Performance. Das Design wird schlichter und klarer, die Texte werden kürzer und bekommen mehr Struktur. Das alles begünstigt die Ladezeiten und die verbesserte Performance wird wiederum beim Ranking bevorzugt. Auch hier gilt: Smartphones haben keine 200-Mbit-Leitung. Bei der Optimierung der Mobile-Performance muss daher darauf geachtet werden, dass die Webseite nicht nur mit DSL-Geschwindigkeit, sondern auch mit Edge und besonders mit 3G getestet wird. Bei langsameren Geschwindigkeiten ist der LCP-Wert schwieriger zu verbessern. Bildgrößen, JS- und CSS-Größen müssen viel schlanker werden.

Page Speed – im Grunde ist es wie beim Puzzle

Bei der Performanceoptimierung ergeben viele Details zusammen ein großes Kunstwerk – eine blitzschnelle Seite. Mit einer Website verhält es sich wie mit einem großen Puzzle: Die kleinen Einzelteile brauchen viel Zeit zum Zusammenbau. Mit weniger Teilen, einfacheren Formen und klaren Farben lassen sich die Zuordnung der Teile und der Aufbau des Gesamtbilds viel schneller bewerkstelligen. Einige der langfristig gültigen Tricks, das Puzzle einfacher zu machen, seien hier kurz wiedergegeben.

Statischer Inhalt lädt schneller als vom Webserver erst neu generiertes HTML. Datenbanken sind häufig ein Flaschenhals. Deshalb ist es sinnvoll, das Ergebnis vor der Auslieferung in einer statischen HTML-Seite zu speichern und diese auszuliefern.

Mehrere JS- und CSS-Dateien sollten komprimiert und zu einer bis zwei Dateien zusammengefasst werden. Die sind dann schneller zu laden. Zum Beispiel ist jQuery FancyBox unkomprimiert 157 KB, minimiert 67 KB und per gzip komprimiert an den Browser übertragen nur noch 22 KB klein. Ausnahmen können sehr große Projekte sein, bei denen es sinnvoll ist, verschiedene Bundles zu erstellen – also etwa eine Hauptdatei mit den häufigsten Elementen und dann weitere mit einzelnen Modulen. Dann muss zum Beispiel die Formularvalidierung nicht auf jeder Seite geladen werden, sondern nur auf der Kontaktseite.

Mit Lazy Loading lädt der sichtbare Teil der Seite am schnellsten, während der Rest der Seite erst nachlädt, wenn der Nutzer nach unten scrollt. Aber aufgepasst: Lazy Loading sollte nicht für die Hauptinhalte der Seite angewandt werden, damit die Google-Bots nicht an der Erfassung der Inhalte gehindert werden.

Bandbreite spart auch die responsive Verwendung (Abb. 2) verschiedener Bilder je nach Plattform. Mit dem Picture-Tag werden dann für den Desktop große, eher quadratische Bilder geladen, fürs Tablet schmale und für Mobile kleine Detailaufnahmen (Abb. 3 bis 6). Aber Vorsicht! Ist auf dem Tablet eine Galerie dreispaltig und mobil einspaltig, kann die Bildgröße mobil auch schon mal größer sein. Da muss man einen guten Kompromiss finden.

Abb. 2: Responsive Bilder [7]

Abb. 3: Bildgrößen im Vergleich

Abb. 4: Mobile-Darstellung [8]

Abb. 5: Tabletdarstellung [8]

Abb. 6: Desktopdarstellung [8]

Für hochfrequentierte Seiten kann ein Proxy-Cache die Page Speed verbessern. Er entlastet durch die Bündelung der Anfragen den Backend-Server ungemein. Was häufig unterschätzt wird, sind Softwareupdates. Ein Beispiel: Der Ladeprozess einer Seite, die auf WordPress läuft, beschleunigt sich um 60 Prozent, wenn man WordPress 5.6 von PHP 7.1 auf PHP 7.4 updatet. Schließlich sei noch auf den Einsatz von Service Workern hingewiesen. Sie ermöglichen es, die Geschwindigkeit für mobile Endgeräte zu erhöhen, die häufiger eine Seite besuchen, da sie auch gecachte Inhalte ausliefern, wenn die Internetverbindung unterbrochen ist.

Viele kleine Puzzleteile ergeben ein großes Bild

Zusätzlich gibt es noch ungezählte weitere kleine Puzzleteile, die dabei helfen, die Performance zu verbessern. Dazu zählen die korrekt gesetzten Caching-Header, eine gute Komprimierung, der Einsatz des HTTP/2-Pushverfahrens, ein leistungsfähiges Webhosting und die globale Verteilung der Serverstandorte über ein angepasstes Content Delivery Network (CDN). Sehr kleine Bilder könnte man auch im Base64-Code speichern, um das Volumen noch weiter zu reduzieren. Schließlich kann man bei jedem einzelnen Projekt die Ladezeit noch individuell verbessern; manchmal zum Beispiel dauert die Suche sehr lange, das könnte man mit dem Einsatz eines Solr-Servers korrigieren.

Page Speed ist kein Projekt

Das Fazit lautet: Eine langsame Website ist ein Bug. Die Performance einer Seite ist kein Projekt, sondern als laufende Aufgabe zu begreifen. Nur vor dem Launch einmal übers Tempo nachzudenken, das reicht nicht mehr. In der Entwicklung, vor dem Launch und vor jedem neuen Feature muss man handeln. Wenn sich neue technische Rahmenbedingungen ergeben, muss man handeln. Letzten Endes ist es auch eine Frage der grundlegenden Konzeption und des Designs. Wenn die Seite auch bei 3G in nur zwei Sekunden vollständig laden soll, dann ist ein vollformatiges Imagebild keine gute Idee, auch wenn das Markenimage dadurch besonders emotional transportiert werden kann. Verantwortungsvolle E-Commerce-Anbieter handeln proaktiv, bevor die ersten Kundenklagen oder verschlechterte Conversion-Zahlen hereinkommen. Wenn dieses grundlegende Verständnis von Performance besteht und die aktuellen Tools eingesetzt werden, dann stellt Page Speed kein Problem mehr dar.

Links & Literatur

[1] Fast Company: „How One Second Could Cost Amazon $1.6 Billion In Sales“: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

[2] Pinterest Engineering Blog: „Driving user growth with performance improvements“: https://medium.com/pinterest-engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7

[3] Green, Viki: „Impact of slow page load time on website performance“: https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a

[4] Think with Google: „Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed“: https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

[5] Google Search Central Blog: „Zeitplan für die Einführung einer verbesserten Nutzerfreundlichkeit von Seiten in der Google Suche“: https://developers.google.com/search/blog/2020/11/timing-for-page-experience

[6] Performancemetriken: https://web.dev/measure/

[7] Responsive Bilder: https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

[8] Bildgrößenvergleich unter Mobile, Tablet und Desktop: https://www.das-testzentrum.de

The post State of the Art in der Websiteperformance appeared first on webinale 2025.

Was macht gemeinhin einen Zauber aus? Die Illusion. Eine Illusion findet statt, wenn man etwas anderes wahrnimmt als das, was geschieht. Oder auch, wenn man dies gar nicht wahrnimmt. Wie im Fall einer Webseite, die in weniger als 100 Millisekunden lädt. Wieso 100 Millisekunden? Das ist die Frequenz, in der das Auge Signale zum Okzipitallappen im Gehirn weiterleitet. Alles, was schneller stattfindet, wird als sofort respektive ununterbrochen wahrgenommen. Im starken Gegensatz dazu stehen Webseiten mit mehreren Sekunden Ladezeit. Hier entstehen beim Seitenbesucher weniger Entzückung und Verzauberung, sondern eher das Gefühl, ignoriert zu werden, ja Verlassenheit. Und nicht selten wird dann eben die Webseite verlassen.

Das Alles entscheidet sich rasch und unterbewusst. Ein weiterer wichtiger Aspekt ist die Konstanz der Ladezeit. Eine langsame Abfrage ist gut, solange sie immer langsam ist; also, wenn man schon weiß, dass man sich nach dem Klick auf den Button einen Kaffee holen gehen kann, wird man weniger nervös, als wenn eine üblicherweise zügige Aktion unerwartet lange dauert. Damit können wir aus Benutzersicht die ideale Ladezeit einer Webseite definieren: immer unter 100 Millisekunden. Jetzt müssen wir nur noch eins und eins und maschinelles Lernen zusammenzählen und können daraus schließen, dass bei Google eben solche Seiten besser gelistet werden.

Grundsätzlich ist das, was einen Benutzer stört, schädlich für eine gute Platzierung – wie beispielsweise eine lange Ladezeit. Auch wenn der Eindruck entsteht, dass viel geladen wird und womöglich so einiges, was man gar nicht möchte. Auf einen Link wird mit einer gewissen Erwartungshaltung geklickt, meist möchte man anschließend ein Bild sehen und etwas Text lesen. Wenn dann aber die Ladezeit kein Ende findet, fragt man sich schon, was eigentlich passiert. Wenn es um weniger als Zehntelsekunden geht, sind wir bei der Formel 1 – und da schicken wir keine S-Klasse an den Start. Allrounder wie WordPress und Magento mit vielen Modulen tun sich hier naturgemäß schwer. Caching-Plug-ins und -Erweiterungen für solche Systeme sind per se dadurch limitiert, dass sie sich eingliedern müssen. Bis diese nämlich dran sind und endlich „schnell sein dürfen“ ist die Zehntelsekunde schon vergangen.

Eine Idee ist es, die erste aufgerufene Seite index.php einer derartigen Software für einen zügigeren „first bite“ anzupassen. Damit beschleunigt sich die Auslieferung auf den geforderten Wert, ohne dass der Scope des Systems verlassen wird. Dynamische Inhalte werden in einem solchem Szenario über Frontend-Microservices bedient, man könnte es auch als asynchrones Hole Punching bezeichnen. Gemeint ist, dass die Webseite blitzschnell statisch geliefert wird und dann – falls notwendig – benutzerspezifische Inhalte wie beispielsweise der Miniwarenkorb oder die Anzeige der Anzahl neuer Nachrichten nachträglich per JavaScript ersetzt werden. Google „versteht“ seit Ende November 2015 solche Webseiten, vorher wäre das Bereitstellen einer zusätzlichen, suchmaschinenfreundlichen Version notwendig gewesen.

Es ist prima, wenn der Server in unter zehn Millisekunden reagiert; muss er aber mit einer riesigen Menge an HTML-, CSS- und JavaScript-Dateien antworten, verhindern wir dann doch wieder das möglicherweise verzaubernde Erlebnis Webseitenbesuch. Wer bereits das von einem Grafikdesigner erstellte Layout in Form eines Mock-ups (Vorführmodell) vorliegen hatte, der hat sich möglicherweise auch schon einmal gefragt, weshalb er sich eigentlich so sehr in Geduld üben muss, bis dieses Layout in einer Webseite sichtbar sein wird. Nach dem gleichen Prinzip wie manch einer eine Individualsoftware in Auftrag gibt, mit der Anmerkung, dass sich das prinzipiell auch in Excel machen lässt und daher nicht lange dauern kann, lässt sich behaupten: Das Bild des Designers kann man nehmen und direkt in die Webseite stecken. Statt hundert Dateien nur zwei. Das Frontend ist tot.

Realistische Nutzerszenarien

Allerdings sollte man sich davor hüten, zum IMG-Tag zu greifen; eine Area Map müsste für jede Viewport-Größe neu berechnet werden. Stattdessen nutzt man besser eine HTML-Datei mit einer Area Map und einem SVG-Objekt (Listing 1).

<html lang=en>
<head>
  <meta charset=utf-8>
  <meta content="width=device-width,initial-scale=1"name=viewport>
  <style>*{margin:0}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}</style></head>
<body>
<figure id=imagemap>
  <svg viewBox="0 0 1739 15591">
    <defs>
      <style>.menu-link{cursor:pointer;outline:0}img[src$=".svg"]{width:100%}</style>
    </defs>

    <image height=15591 width=1739 xlink:href=php10.jpg>
    </image>

    <a xlink:href=#beyond>
      <rect height=15 opacity=0 width=122 x=765 y=56 class=menu-link></rect>
    </a>
    <a xlink:href=#trusted>
      <rect height=15 opacity=0 width=102 x=890 y=56 class=menu-link></rect>
    </a>
    <a xlink:href=#resources>
      <rect height=15 opacity=0 width=70 x=996 y=56 class=menu-link></rect>
    </a>

Hyperlinks, Hamburger-Navigation für Smartphones, Formulare (Listing 2), all das geht auch hier. Vielleicht sollte man die Gelegenheit nutzen (und nicht ganze Bibliotheken), und selektiv nur das, was benötigt wird, hinzufügen.

<foreignObject height=530 width=600 x=1004 y=14058>
  <div xmlns=http://www.w3.org/1999/xhtml>
    <form id=contactForm onSubmit="return false;">
      <input id=subject name=subject class=input placeholder=subject required>
      <input id=name name=name class=input placeholder="full name"required>
      <input id=contact_number name=contact_number class=input placeholder="contact number">
      <input id=email_address name=email_address class=input placeholder="email address"required>
      <textarea id=message name=message required style=height:220px;width:492px;border:none;color:#62615d;background-color:#f6f6ef;margin-top:11px;margin-left:6px;margin-bottom:4px;max-height:200px></textarea>
    </form>
  </div>
</foreignObject>

Es lebe das Frontend!
Unterschiede beim Ausreizen des SVG-Objekts offenbaren sich erst bei der Einbettung von Videos; gelingt dies im Chrome einwandfrei, haben beispielsweise Firefox und Safari derzeit noch ein Problem. Der Formel-1-Wagen nimmt Form an. Für die Serienfertigung benutzen wir etwas PHP (Listing 3).

<body>
<?php
$correctY = 0;
$correctBox = 0;

$defaultImg = '/img/' . strtoupper(str_replace(".php","",basename($_SERVER['SCRIPT_NAME']))) . '.jpg';
if (file_exists(BASE_PATH .'/public_html' . $defaultImg)) {
  list($frontendWidth, $frontendHeight) = getimagesize(BASE_PATH .'/public_html' . $defaultImg);
  if ($frontendHeight !== 3216) {
    $correctY = $frontendHeight - 3216;
    $correctBox = 3;
  }
  $frontendImg = $defaultImg;
}
?>
<figure id=imagemap>
  <svg viewBox="0 0 <?php echo $frontendWidth?> <?php echo 3216+$correctY-$correctBox?>">

    <image height=<?php echo 3216+$correctY-$correctBox?> width=<?php echo $frontendWidth?> xlink:href=<?php echo $frontendImg?>>
    </image>
<!-- ... -->
<!-- Footer Link: -->
    <a xlink:href=/imprint.php>
      <rect height=33 opacity=0 width=100 x=80 y=<?php echo 3108+$correctY?> class=menu-link></rect>
    </a>

Sofern das Bild mit dem entsprechenden Namen vorliegt, enthält die eigentlich aufgerufene Datei, z. B. imprint.php lediglich eine Zeile:

<?php require 'magic.php';

Mit diesem Ding können wir aus der Boxengasse brausen, hinter dem Steuer sitzt Kimi Räikkönen (ein finnischer Formel-1-Fahrer) und nicht etwa ein hineingezwängter Sumo-Ringer – doch was ist das für ein Geklapper? Sind wir etwa auf einer Hochzeit? Da hat uns doch jemand klammheimlich jede Menge Blechdosen ans Auto gebunden! (Abb. 1)

Verflixt, diese kleinen Codeelemente. Was machen die eigentlich? Der Sinn erschließt sich uns Performancefreaks kaum. Wie ein Paketkurier liefern wir einfach aus, vierzig oder mehr auf einer Seite sind keine Seltenheit. Retouren gibt es selten: Die Anfrage, Pixel herauszunehmen, bearbeiten wir selten. Eines ist bei dem Analysevoodoo klar: Es gilt die Heisenberg’sche Unbestimmtheitsrelation – Beobachtung beeinflusst Wirklichkeit, die Messung selbst ändert das Ergebnis. Ein Tool, das die Performance einer Webseite bewertet, ist Google Pagespeed Insights.

Oft ist es nur ein kleines zusätzliches, von extern nachgeladenes und nicht größenoptimiertes Tracking-Bildchen, das die Performancebewertung stört. Ob Google die Kriterien auch exakt so in sein Ranking einfließen lässt, sei dahingestellt, aber durch Entfernen oder zumindest Optimieren einer solchen Datei lässt sich unter Umständen bereits die Bewertung um eine Kategorie erhöhen. Aber oft kommen gerade diese Elemente von einem anderen Server, selbst über Google gezogene Schriftarten und das Google-Analytics-Element gehören dazu. Diese Tatsache sollte nicht zu dem Trugschluss verleiten, die hauseigenen Elemente würde der Suchmaschinenprimus nicht auch negativ in die Bewertung einfließen lassen.

Das Bild des Designers hat nicht nur CSS, sondern auch die seltenen, speziellen Schriftarten bereits integriert und so landen wir mit unserem Ansatz in der Performancebewertung ganz oben (Abb. 2).

Indiz für ökonomisches Potenzial

Vielleicht liegt es an der gestiegenen Anzahl mobiler Teilnehmer: Es deutet so manches darauf hin, dass Geschwindigkeit ein großer, ja möglicherweise entscheidender Faktor für das Ranking bei Google ist. Interessant ist in diesem Zusammenhang ein Vergleich von zwei Seiten derselben Domain: www.infinitehooks.com.

Sind die meisten Unterseiten mit dem beschriebenen Frontend-Duo-Ansatz für magische Geschwindigkeit ohne jeglichen Text im Body gebaut, ist die Landingpage selbst normal erstellt worden. Wegen des experimentellen Charakters und Hinweisen, dass Google beim Indizieren von Bildern nicht seine Texterkennung einsetzt, erschien dies als zu riskant, um nicht zu sagen, als SEO-Suizid. Doch selbst SEO-Experten waren überrascht vom Ergebnis: Nicht nur, dass die Seite www.infinitehooks.com/c/platforms.php mit lediglich einem SVG-Objekt sehr wohl von Google auf der ersten Seite gelistet wurde, sie erschien dort – wenn man lediglich nach dem Produktnamen suchte – sogar vor der Homepage, und das ist ungewöhnlich (Abb. 3).

Die HTML-Seite mit Meta-Keywords, Metabeschreibung und einem Bild ist on-site SEO pur. Es wurden keine suchmaschinenfreundlichen, semantischen Überschriften oder CSS-Klassen verwendet, genauer gesagt gibt es überhaupt keine Überschriften; die Seite ist schlank und ohne Schnickschnack. Nach dem Frontend-Frühjahrsputz, die Seitengeschwindigkeit im Auge behaltend und vergleichsweise flott, gönnen wir uns dann zum Beispiel schon mal einen Image Slider, mehr Responsiveness, ein Video (das nach Klick auf einen Platzhalter eingebunden wird) und was einem sonst noch gefällt. Ist die Diät gar für einen großen Webshop mit vielen Millionen Euro Umsatz geeignet? Wer sich mit der Konkurrenz messen will, kann das mit einigen Produkten, mit denen er aktuell auf Seite drei oder vier bei Google liegt, ausprobieren und die Umsatzentwicklung beobachten.

Für eine Produktdetailseite lässt sich die Technik der Reduzierung bestimmt am besten einsetzen. Denn was will der Kunde hier schon sehen außer einem Titel, ein wenig Beschreibung und einem Bild? Mit diesen Ansätzen erhielten wir bei unterschiedlichen Speedbewertungstools die volle Punktzahl. Google ändert allerdings 500 Mal pro Jahr seine Algorithmen; auch das Page-Speed-Tool wurde aktualisiert und erwartet inzwischen beispielsweise die noch stärker optimierten Bildformate JPEG 2000, JPEG XR und WebP. Um seitdem konstant die volle Performancepunktzahl zu erhalten, müsste weiter optimiert werden.

The post Die magischen 100 Millisekunden appeared first on webinale 2025.

Content ist King und Design seine Queen: Sie wollen wissen, wie dieses Traumpaar Ihnen zu großartigen Conversion Rates verhelfen wird? Dann sind Sie hier genau richtig. Ob Newsletter, Blog, Website oder Social Media – Sie werden lernen, wie Sie herausragenden Content gestalten können, den Ihre Nutzer lieben werden. Unterstützung bekommen Sie dabei von zahlreichen visuellen Beispielen aus der Praxis erfolgreicher Marketingexperten.

Wie das geht? Ganz einfach:

Und für alle, die dieses Jahr besonders brav waren, hat er 3 Buchexemplare von „Content Design – Durch Gestaltung die Conversion beeinflussen“ aus seinem Beutel gezaubert.

Robert Weller und Ben Harmanus haben hiermit einen unverzichtbaren Leitfaden für das Zusammenspiel von Content, Design und Marketing geschaffen. Von den Grundlagen der Gestaltung digitaler Texte, über spezifische Design-Beispiele, bis hin zur Conversion-Optimierung ist alles dabei. 

Alle Neuanmelder für unseren Newsletter, sowie bereits treue webinale-Newsletter-Empfänger, können jetzt eins von drei Exemplaren „Content Design – Durch Gestaltung die Conversion beeinflussen“ gewinnen!

Jetzt anmelden:

Die Teilnahme am Gewinnspiel ist bis zum 13.12.2018 um 23:59 Uhr möglich.

The post Der webinale-Nikolaus ist da! appeared first on webinale 2025.

Denn erstmal stehen konzeptionelle und visuelle Aspekte an erster Stelle. Danach folgen technische Elemente. Die Vermarktung und damit auch der Aspekt SEO kommen erst dann ins Spiel, wenn bereits alles andere fertig ist.

Warum sollte man überhaupt eine kleine Website aufbauen?

Man braucht Ziele und Visionen im Business, und das ist auch im Onlinebusiness nicht anders. Warum also nicht gleich ein zweites eBay oder einen Amazon-Konkurrenten aufbauen? Erfahrene Websitebetreiber werden sofort erkennen, wo das Problem liegt, aber es gibt wirklich viele Menschen, die glauben, sie könnten so eine Megawebsite stemmen – und das auch noch als ihr erstes Projekt.

Aber selbst wenn man sich nicht mit den Allergrößten anlegt, sondern „nur“ mit den großen und etablierten Websites in der eigenen Branche, ist das meist keine gute Idee. Selbst diese haben oft Jahre Vorsprung, viel Erfahrung und ein großes Contentarchiv in der Hinterhand, gegen das man nicht so einfach ankommt. Wie soll man gegen so eine Konkurrenz überhaupt bestehen, ganz besonders mit einer kleinen Website? Denn Einzelunternehmer oder nebenberuflich Selbstständige haben meist nur die Möglichkeit, kleine Websites zu bauen. Für mehr reichen Zeit und Ressourcen oft nicht aus.

Was ist eine kleine Website?

Doch erst einmal sollte definiert werden, was eine kleine Website eigentlich ist. Hier gibt es natürlich keine allgemeingültige Definition, weshalb dies sicher jeder etwas anders sieht. Als kleine Website würde ich Projekte bezeichnen, die nicht mehr als hundert bis zweihundert einzelne Seiten haben. Damit sind keine automatisch generierten oder mit fremden Inhalten bestückte Websites gemeint, sondern eigener Content.

Je nach Websiteart muss man hier natürlich noch einmal unterscheiden, denn Onlineshops sind inhaltlich einfach anders aufgebaut als ein Blog. Klar dürfte aber sein, dass es sich um eine überschaubare Zahl an Artikeln bzw. Seiten handelt, die von einer einzelnen Person in einem absehbaren Zeitraum erstellt werden kann.

WordPress für kleine Websites

Wer eine kleine Website aufsetzen möchte, hat verschiedenste technische Möglichkeiten. Manche bevorzugen reines HTML, was besonders schnelle Websites ermöglicht, aber auch schwerer zu pflegen ist. Content-Management-Systeme bieten dagegen eine sehr einfache Möglichkeit, die Inhalte der Website zu pflegen und interaktive dynamische Inhalte einzubauen. Allerdings sind die meisten CMS-Lösungen viel zu mächtig und groß, um für kleine Websites sinnvoll zu sein. Das ist wie mit Kanonen auf Spatzen zu schießen.

WordPress bietet hier eine gute Balance zwischen Möglichkeiten und Benutzbarkeit. Es ist immer noch ein relativ schlankes CMS. Unter anderem durch die unzähligen Plug-ins bietet es aber auch sehr viele Möglichkeiten, besondere Funktionen umzusetzen und eine tolle Website zu erstellen, auch wenn man ganz alleine daran arbeitet. WordPress ist sicher nicht die einzige gute Lösung, um kleine Websites zu erstellen. Aber gerade für Einsteiger ist es eine sehr gute Wahl.

Vorteile kleiner Websites

Ohne viel Geld oder zusätzliche Hilfe ist es also den meisten nicht möglich, etwas anderes als eine kleine Website zu erstellen, will man nicht Jahre im stillen Kämmerlein vor sich hinbasteln – was übrigens aus verschiedenen Gründen keine gute Idee ist. Doch das ist kein Problem, denn kleine Websites haben eine Reihe von Vorteilen, die man nicht unterschätzen sollte.

Spezialisierung: Kleine Websites können viel besser auf ein konkretes Thema spezialisiert werden. Die gesamte Website befasst sich mit einem engen Themenkomplex, was z. B. die Besucher oft zu schätzen wissen, da es viel eher Vertrauen in die Kompetenz des Websitebetreibers aufbaut, als wenn es auf einer Website um viele verschiedene Themen gehen würde.

Mininischen: Mit einer kleinen Website kann man in Nischen gehen, die große Konkurrenten nie anfassen würden. Deshalb bieten gerade solche Mininischen die Möglichkeit, der großen Konkurrenz aus dem Weg zu gehen und einem kleinen, aber sehr genau passenden Zielpublikum die passenden Inhalte zu bieten.

Flexibilität: Als Betreiber einer kleinen Website ist man viel flexibler bei der Anpassung der Website. Man muss sich nicht mit diversen anderen Personen absprechen oder erst einmal die Technikabteilung mit Änderungen beauftragen. Man kann allein entscheiden und die Veränderungen auch sofort umsetzen.

Kreativität: Viele große Websites sind sehr eingefahren in ihren Vorgehensweisen. Da ist der Mut zu neuen Dingen recht eingeschränkt. Als Betreiber einer kleinen Website kann man sich genau das zunutze machen und kreative Versuche starten, sei es beim Design, bei den Inhalten oder beim Marketing.

Persönlichkeit: Einer der größten Pluspunkte kleiner Websites, vor allem von Blogs, ist die starke persönliche Ebene. Während hinter großen Websites Redaktionen stehen, die „gesichtslos“ agieren, tritt der Betreiber einer kleinen Website oft viel stärker in den Vordergrund. Diese persönliche Ebene sorgt für mehr Vertrauen und mehr Einzigartigkeit.

Schnelligkeit: Es gibt eine interessante neue Entwicklung in der Branche, ein neues Partnerprogramm oder etwas anders? Als Betreiber einer kleinen Website kann man sofort darauf eingehen und ggf. auch die Richtung der eigenen Website anpassen. Auch andere Änderungen und Maßnahmen kann man alleine entscheiden und sofort durchführen.

Leidenschaft: Während große Websites für ihre Betreiber meist nur eine normale Arbeit sind, ist dies bei kleinen Websites oft anders. Hier steckt sehr oft viel Leidenschaft und Herzblut drin, denn die Betreiber suchen sich meist ein Thema aus, das ihnen sehr am Herzen liegt. Genau das sieht man dann an den Inhalten, die hochwertiger und interessanter sind als die Massenware großer Contentproduzenten.

Nachteile kleiner Websites

So gut und wichtig die Vorteile kleiner Websites auch sind, gibt es leider auch Nachteile.

SEO-Budget: Ein Bereich, bei dem große Websites meist die Nase vorn haben, ist das Budget für die Suchmaschinenoptimierung. Leider reichen heute gute Inhalte allein nicht aus, um in Google ganz vorne zu ranken. Stattdessen sind verschiedene SEO-Faktoren, allen voran Links von anderen Websites (sogenannte Backlinks), noch immer sehr wichtig, um weit vorne zu landen. Große Websites investieren hier oft nicht wenig Geld, und da können die Betreiber von kleinen Websites nicht mithalten.

Contentmasse: Große Websites haben zudem viel mehr Inhalte. Auch das wird von Google in der Regel positiv honoriert. Je mehr Seiten bzw. Artikel, um so mehr Rankings in den Suchmaschinen. Diesen Rückstand kann man als normaler Websitebetreiber nicht aufholen.

Marketingbudget: Werbung auf anderen Websites, über Google AdWords oder in Social Networks kostet Geld. Deshalb haben große Websites oft ein ordentliches Marketingbudget, das viele neue Leser bringt, was natürlich wiederum positive Auswirkungen auf die Rankings haben kann. Als Betreiber kleiner Websites kann und will man meist nicht viel Geld für das Marketing in die Hand nehmen.

Image: Viele Internetnutzer kennen schon die großen Websites, weil sie immer wieder darüber stolpern und schon lange dabei sind. So einen guten Ruf oder überhaupt Bekanntheit haben kleine Websites natürlich nicht, sodass es schwer fällt, sich direkt mit ihnen zu messen.

Kleine Websites haben also sowohl Vorteile als auch einige Nachteile. Der Trick ist nun, die Vorteile auszunutzen, aber den Nachteilen möglichst aus dem Weg zu gehen. Wie das geht, erläutere ich jetzt.

1. Nischenauswahl

Den Grundstein für den späteren Erfolg legt man bereits ganz am Anfang. Die Auswahl der Nische bzw. des Themas der eigenen Website ist ein wichtiger Faktor, um später gute Chancen gegen große Websites zu haben. Leider unterschätzen viele Neulinge diesen Schritt und machen sich wenig Gedanken über das Thema ihrer Website. Das führt oft dazu, dass sie sich in zu starke Konkurrenz begeben, gegen die man es mit einer kleinen neuen Website schwer hat. Stattdessen sollte man sich eine Nische aussuchen, die gute Voraussetzungen für den Erfolg bietet. Das macht man, indem man die folgenden drei Faktoren analysiert:

Konkurrenz: Als Betreiber einer kleinen Website sollte man es nicht auf eine direkte Konfrontation mit den Big Playern anlegen. In der direkten Auseinandersetzung wird man kaum eine Chance haben. Stattdessen ist es eine viel bessere Strategie, Nischen zu besetzen, die die großen Websites nicht angehen. Das sind oft spezielle Themen, die für die Großen zu unwichtig erscheinen, aber dennoch Potenzial bieten. So ist es wenig erfolgversprechend, für das Thema „Auto“ eine Website zu starten. Ebenso wird es wohl schwierig, wenn man eine Website für eine bestimmte Automarke startet, da es da immer noch eine große Konkurrenz gibt. Aber was ist mit dem Thema „Zubehör für Automarke XY?“ Das kann schon deutlich interessanter sein, da viele große Websites nicht oder nur recht oberflächlich darauf eingehen. Es ist also wichtig, sicherzustellen, dass die Konkurrenz bei dem gewählten Thema nicht zu übermächtig ist.

Doch wie beurteilt man die Stärke der Konkurrenz? Indem man sich einfach einmal die Google-Suchergebnisse für wichtige Suchbegriffe anschaut. In meinem Beispiel würde ich z. B. nach „Zubehör für Automarke XY“ googeln und mir anschauen, was dort in den Ergebnissen steht.

Sind überhaupt große Websites vorhanden? Produktseiten von Shops, Foreneinträge oder irgendwelche kleinen Unterseiten von großen Websites sind z. B. gute Zeichen. Niemand hat sich bisher konkret darauf spezialisiert, also könnte man der erste sein, der dies tut.

Eine weitere gute Möglichkeit herauszufinden, welche Nischen sich lohnen könnten, ist eine Analyse der großen Konkurrenz. Was fehlt dort an Inhalten? Welche Fragen der Leser tauchen dort auf, die nicht beantwortet werden? Das können Nischen sein, in die man mit der eigenen kleinen Website gehen könnte.

Suchvolumen: Bei all der Suche nach der optimalen Nische sollte man aber auch nicht aus den Augen verlieren, dass diese dennoch ein gutes Suchvolumen haben sollte (Abb. 2). Suchvolumen bezeichnet die durchschnittliche Anzahl der Nutzer pro Monat, die auf www.google.de nach einem bestimmten Begriff suchen. Diesen Wert kann man sich z. B. in Google AdWords anschauen oder auch auf www.kwfinder.de, wobei man dort in der kostenlosen Version nur zwei Keywords pro Tag analysieren kann.

Einen allgemeingültigen Mindestwert für das Suchvolumen gibt es zwar nicht, aber es sollten schon ein paar tausend Suchanfragen pro Monat sein, damit es sich lohnt. Es hängt aber natürlich auch von dem gesamten Themenbereich ab. Wenn selbst die Haupt-Keywords in dem Bereich keine 100 000, sondern nur 10 000 Suchanfragen im Monat haben, ist eine Nische mit vielleicht 1 000 Suchanfragen auch schon gut. Deshalb ist es sehr zu empfehlen, einfach einmal eine ganze Reihe von Nischen (Keywords) zu analysieren, um ein Gefühl dafür zu bekommen, wie der Themenbereich insgesamt aussieht. Auf jeden Fall sollte ein gewisses Interesse seitens der Nutzer an dem gewählten Thema vorhanden sein. Man kann natürlich in einer „toten“ Nische starten und wird dort so gut wie keine Konkurrenz haben, aber eben auch keine Leser, wenn sich niemand für das Thema interessiert.

Leidenschaft: Dieser Punkt wird oft ebenfalls unterschätzt, wenn die Hauptmotivation „Geld“ ist. Wer aber eine hochwertige, lesenswerte, individuelle und persönliche Website aufbauen will, die gegen große Konkurrenten bestehen soll, sollte sich für das Thema interessieren. Wenn man selber große Leidenschaft und Spaß an dem Thema mitbringt, wird man viel bessere Artikel schreiben, mehr Emotionen rüberbringen, das Marketing deutlich intensiver betreiben und so weiter. Bevor also die Entscheidung für eine Nische fällt, sollte man sich wirklich gut überlegen, ob man große Teile der eigenen Zeit in den nächsten Jahren darin investieren will.

2. Inhalte

Eine Website steht und fällt mit ihren Inhalten. Natürlich wenden nun einige ein, dass sie in Google immer wieder auch miese Websites mit fürchterlichen Inhalten recht weit oben in den Suchergebnissen sehen. Das mag sein, aber Google wird immer besser darin, gute Inhalte zu erkennen. Google investiert viel Arbeit und Know-how in die Verbesserung der Suchergebnisse, sodass es solche schlechten Websites immer schwerer haben werden. Wer langfristig eine erfolgreiche Website etablieren will, sollte sich also um gute eigene Inhalte kümmern.

Was genau hochwertige Inhalte sind, ist natürlich durchaus umstritten. Ich glaube aber, dass es relativ einfach ist, sie zu erkennen. Sind Artikel, Videos, Audioaufnahmen oder was auch immer nützlich für den Leser? Bieten sie Mehrwert und beantworten dringende Fragen der Besucher? Bieten sie hilfreiche Tipps und Lösungen an? Dann hat man hochwertige Inhalte verfasst, die die Leser lieben werden. Und dann wird auch Google diese Inhalte gut finden.

Leider reicht das heute aber auch noch nicht allein aus. Die eigenen Inhalte sollten zudem einzigartig und besonders sein, sodass die Nutzer etwas Ähnliches woanders nicht finden. Das kann man erreichen, indem man eigene Erfahrungen, Beispiele und Tipps einfließen lässt, was die Inhalte wirklich unique macht.

Zudem ist es natürlich sehr sinnvoll, Inhalte auf kleinen Websites auch der Nische angemessen zu gestalten. Das bedeutet, dass man Hintergrundinfos zu den sogenannten Longtail Keywords verfasst, also sehr spezielle Suchanfragen und Themen, die sicher nicht tausende Menschen interessieren, aber für die Interessierten perfekt sind. Solche Informationen fehlen nämlich bei vielen großen Sites und Shops.

Manche Websitebetreiber wollen alles, aber keine Texte schreiben. Diese sollten sich gute Autoren suchen, die ihnen solche hochwertigen Inhalte erstellen. Oder sie setzen auf andere Contentarten, wie z. B. Videos, die immer beliebter werden. Das bietet sich insbesondere dann an, wenn die großen Konkurrenten solche Inhaltsarten nicht nutzen.

3. On-Page SEO

So wichtig gute Inhalte heute sind, ganz ohne Suchmaschinenoptimierung geht es dann doch nicht. Damit sind Optimierung und Maßnahmen gemeint, die speziell auf Google ausgerichtet sind, damit die eigene Website und die einzelnen Seiten möglichst positiv von Google bewertet werden. In den letzten Jahren hat dabei die sogenannte On-Page-Optimierung an Bedeutung gewonnen. Darunter werden alle Maßnahmen zur Suchmaschinenoptimierung gefasst, die auf der eigenen Website stattfinden. Dazu gehören unter anderem:

• interessante und aussagekräftige Title- und Description-Texte
• eine ausreichende Länge der Texte von mindestens 200–300 Wörtern (gern auch deutlich mehr)
• eine gute Textstruktur mithilfe der HTML-Tags <h1> bis <h6>
• Listen (<ul> und <ol>), die wichtige Inhalte, Fakten oder Tipps übersichtlich darstellen
• Bilder mit Alt- und Title-Text, die wichtige Keywords enthalten
• eine gute und thematisch passende interne Verlinkung, wobei besonders wichtige Seiten auch am meisten verlinkt werden sollten
• sprechende URLs, die wichtige Keywords enthalten
• eine passende Domain mit Keywords oder eine Fantasiedomain zum Markenaufbau

Das sind einige der Aspekte, die man bei der On-Page-Suchmaschinenoptimierung beachten sollte. Natürlich gibt es noch weit mehr, wie man bei einer Suche in Google nach „Onpage SEO Checkliste“ feststellen kann. Die On-Page-Optimierung wird in Zukunft sicher auch noch wichtiger werden, weshalb man diesen Punkt keinesfalls vernachlässigen sollte.

4. Off-Page SEO

Wenn man von Off-Page-Suchmaschinenoptimierung spricht, dann meint man vor allem Backlinks. Damit sind Links gemeint, die von anderen Websites auf die eigene Website verweisen. Google nutzt Backlinks schon sehr lange zur Bewertung von Websites. Je mehr gute und passende Backlinks eine Website hat, umso wichtiger und besser muss wohl deren Inhalt sein – ganz grob gesagt.

Da aber in der Vergangenheit ein regelrechtes Business um den Kauf und Verkauf von Backlinks entstanden ist und Google nur bedingt unterscheiden kann, was ein ehrlich gesetzter und was ein gekaufter Backlink ist, hat die Bedeutung der Backlinks für die Berechnung der Suchergebnisse abgenommen. Doch ganz ohne Backlinks geht es auch für Google noch nicht.

Deshalb sollte man bei der eigenen kleinen Website versuchen, Backlinks von anderen Websites zu erhalten. Schreibt man wirklich gute Inhalte, dann sollte man sie z. B. über Facebook, Twitter und Co. promoten, damit möglichst viele Menschen davon erfahren. Das sorgt dann unter anderem dafür, dass der eine oder andere freiwillig einen Backlink setzt. Aber auch besonders interessante, kontroverse, ungewöhnliche, lustige, traurige, nützliche Inhalte werden gern von anderen verlinkt, sodass man alles, nur nicht langweilige Artikel verfassen sollte. Auf der anderen Seite sollte man es aber auch nicht übertreiben und nur noch auf Aufmerksamkeit aus sein, denn das schreckt viele Leser eher ab.

Weitere Backlinks kann man bekommen, indem man seine Website in den eigenen Social-Media-Profilen verlinkt, in gute Webverzeichnisse einträgt, in Kommentaren auf anderen Blogs verlinkt und so weiter. Über Backlinks hinaus lohnt es sich zudem, in Social Networks unterwegs zu sein, Foren zu nutzen, Kontakte zu knüpfen und Ähnliches, da sich das alles früher oder später positiv auf die eigene Website auswirkt.

5. Usability

Sehr oft wird die Usability der eigenen Website vernachlässigt. Das liegt wahrscheinlich daran, dass sie sich nicht so einfach messen und in Zahlen ausdrücken lässt. Dennoch ist die Usability sehr wichtig, denn von ihr hängt das Nutzererlebnis hauptsächlich ab. Besucher der eigenen Website haben in der Regel ein bestimmtes Bedürfnis oder ein Ziel, das sie erreichen wollen. Allerdings wissen sie meist nicht, wo sie auf einer Website, die sie zum ersten Mal besuchen, den Inhalt finden, der diese Bedürfnisse befriedigt. Mithilfe einer guten Usability, die z. B. Faktoren wie Navigation, klare Strukturen, Linkbezeichnungen und mehr umfasst, sollte man versuchen, den neuen Besuchern einfach und schnell klar zu machen, was sie wo finden. Dabei ist es meist sinnvoll, von den Problemen und Bedürfnissen auszugehen und nicht immer nur von der Lösung. Viele kennen nämlich die Lösung noch gar nicht.

Will also jemand einen Ausschlag behandeln, kennt aber nicht die Salbe, die genau das bewirkt, ergibt es wenig Sinn, auf der Website einen Link „Salbe XY“ zu platzieren. Stattdessen wäre es nutzerfreundlicher, einen Link „Hilfe bei Ausschlag an den Beinen“ zu haben. Hier erkennt sich der betreffende Nutzer wieder und folgt dem Link.

Die Usability von Websites ist ein sehr komplexes Thema, das auch nie zu 100 Prozent abgeschlossen sein wird. Wichtig ist auf jeden Fall, dass man sich in seine Leser versetzt und aus deren Sicht die eigene Website beurteilt und gestaltet. Als Betreiber einer kleinen Website fällt es meist viel einfacher, eine gute Usability zu erreichen, da man deutlich weniger Inhalte hat, als die großen Konkurrenten. Das sollte man nutzen. Davon abgesehen spielen natürlich auch technische Aspekte eine Rolle. So nutzen immer mehr Menschen Websites auf ihrem Smartphone, und man muss dieser Tatsache bei der Gestaltung Rechnung tragen.

6. Ladezeit

Immer wichtiger ist in den letzten Jahren die Ladezeit von Websites geworden. Damit ist die Zeit gemeint, die eine Seite einer Website benötigt, um so weit geladen worden zu sein, dass der Nutzer damit interagieren kann. Kaum jemand ist heute noch bereit, 10 Sekunden auf das Laden einer Seite zu warten. Im Gegenteil, viele sind heute schon wieder weg, wenn es mehr als zwei oder drei Sekunden sind.

Das weiß natürlich auch Google, und deshalb legt die Suchmaschine mittlerweile Wert auf kurze Ladezeiten und lässt diese angeblich auch in die Berechnung der Rankings einfließen. Auch wenn dies noch kein besonders großer Faktor ist, sollte man sich um schnelle Ladezeiten bemühen, zumal oft gerade die großen Websites recht langsam sind. Mit einer kleinen Website, die viel weniger Ballast besitzt, schafft man oft bessere Ladezeiten als die große Konkurrenz. Dabei sollte man erst einmal die Istsituation analysieren, was durch die Vielzahl an online verfügbaren Ladezeitentools kein Problem ist. Anschließend sollte man aus einer Mischung von Minimierung (z. B. nur so viele Plug-ins nutzen, wie unbedingt notwendig) und Optimierung versuchen, die Ladezeiten zu drücken. Optimierungstools wie Google PageSpeed Insights geben dazu hilfreiche Tipps.

Abb. 3: Google PageSpeed Insights

Zudem gibt es für bekannte Content-Management-Systeme wie WordPress spezielle Plug-ins, die bei der Optimierung helfen, da diese CMS von Hause aus meist nicht auf Performance optimiert sind. So ist es auch Laien möglich, ihre Website schneller zu machen.

Ein weiterer Grund, sich mit der Ladezeitoptimierung zu beschäftigen, ist die Conversion Rate auf der eigenen Website. Gerade bei kleinen Websites ist die Zahl der Besucher nicht so hoch, und deshalb sollte man versuchen, aus den bestehenden Besuchern das Meiste herauszuholen.

7. Monetarisierung

Am Ende kommt es bei professionellen Websites auf die Einnahmen an, die man erzielen kann. Sich gegen stärkere Konkurrenz zu behaupten, muss also nicht zwangsläufig bedeuten, dass man vor ihr in Google steht oder mehr Besucher anlockt. Es geht darum, erfolgreich zu sein. Große Websites werden oft von ganzen Redaktionen betrieben, während viele Leser dieses Artikels wohl alleine ihre Websites aufbauen. Das hat den Vorteil, dass man nicht so viel verdienen muss wie die große Konkurrenz, um profitabel zu sein.

Um mit kleinen Websites finanziell erfolgreich zu sein, sollte man sich sehr gut mit den möglichen Einnahmequellen beschäftigen und die am besten passenden nutzen. So sollte man sich z. B. genau anschauen, welche Partnerprogramme es gibt und diese auch testen. Ebenfalls sehr wichtig ist, dass man nicht zu zögerlich bei der Monetarisierung ist. Während bei großen Websites viele mitreden, kann man alleine viel schneller und einfacher entscheiden, wie viel Werbung noch okay ist. Und im Gegensatz zu großen Websites, die meist eine breite und oft auch empfindliche Community haben, kann man als Betreiber einer kleinen Website meist viel problemloser neue Einnahmequellen einbauen.

Auch Tests und Optimierungen sind auf kleinen Websites meist viel einfacher umzusetzen als auf großen Portalen mit tausenden Artikeln. Hier spielt z. B. die Spezialisierung eine Rolle. Während sich kleine Websites meist auf ein konkretes Thema konzentrieren, haben großen Websites oft ein viel breiteres Themenspektrum. Werbekunden mögen es aber meist mehr, wenn es keinen Streuverlust gibt, und sind deshalb bereit, mit kleineren Websites zu kooperieren.

8. Sonstiges

Es gibt weitere interessante Punkte, bei denen die Betreiber kleiner Websites gegenüber der großen Konkurrenz punkten können. Man ist bei einer kleinen Website näher an der Community dran. Antworten auf Kommentare und Mails sind z. B. sehr zu empfehlen und auch machbar. Das stärkt das Communitygefühl.

Nicht vernachlässigen sollte man die eigenen Aktivitäten in Social Networks. Ähnlich wie auf der eigenen Website kann man hier durch eine persönliche und offene Herangehensweise punkten, während große Websites oft nüchterner und unpersönlicher agieren. Änderungen und Optimierungen am Layout sind ebenfalls meist viel einfacher und schneller umzusetzen als bei großen und komplexen Portalen, die über einen langen Zeitraum gewachsen sind. Auf jeden Fall sollte man die SSL-Verschlüsselung der eigenen Website vornehmen, da dies jetzt schon ein wunder Punkt bei Google ist und in Zukunft wohl auch Pflicht werden wird. Bei kleinen Websites ist dies meist viel einfacher zu machen.

Wann ist man erfolgreich?

Die aufgelisteten Tipps sind ja schön und gut, aber wann ist die eigene Website eigentlich erfolgreich? Das klingt vielleicht nach einer banalen Frage, aber es gibt durchaus unterschiedliche Definitionen, und man sollte sich von Anfang an im Klaren darüber sein, was man erreichen will. Nur dann kann man die Maßnahmen entsprechend planen und auch messen, ob sie etwas gebracht haben.

Es muss nicht immer die Position 1 in den Google-Suchergebnissen sein. Schließlich ist das gerade bei sehr umkämpften Keywords gar nicht so einfach. Deshalb ergibt es oft mehr Sinn, die Gesamtmenge der Rankings als Ziel zu nehmen bzw. bestimmte Besucherzahlen. Wer einen Nebenverdienst mit seiner Website erreichen will, für den sind schon ein paar hundert Euro im Monat ein Erfolg. Wer dagegen von seiner Website leben will, betrachtet erst weit höhere Einnahmen als Erfolg. Und was ist, wenn man gar nicht direkt über die Website Geld verdienen will, sondern z. B. die eigene Bekanntheit erhöhen oder Kontakte aufbauen möchte? Auch das sind Erfolgskriterien.

Deshalb sollte man auf jeden Fall zu Beginn Ziele definieren, die man mit der eigenen Website erreichen will, und diese dann auch regelmäßig prüfen. Nur so kann man die passenden Maßnahmen in die Wege leiten und verschwendet nicht unnötig Zeit und Geld.

Wann ist es Zeit, aufzugeben?

Leider gibt es keine Garantie auf den Erfolg der eigenen kleinen Website. Manchmal kann man alles Mögliche tun, und man setzt sich dennoch nicht gegen die große Konkurrenz durch. Es ist schwer zu beurteilen, wann es keinen Sinn mehr hat, die Website weiter zu betreiben. Einige Faktoren, die man dabei analysieren sollte, sind:

Stagnation oder negative Entwicklung: Wenn die angepeilten Ziele auf Dauer nicht erreicht werden und es zu einer Stagnation z. B. beim Traffic kommt, sollte man darüber nachdenken, warum das so ist und ob man das Problem lösen kann. Noch kritischer ist es, wenn es eine negative Entwicklung trotz aktiver Maßnahmen gibt.

Neue Konkurrenz im Markt: Mit einer kleinen Website hat man es sowieso recht schwer, und wenn dann noch neue starke Konkurrenz auf den Plan tritt, kann dies auch ein Grund sein, aufzugeben.

Negatives Wachstum des Markts: Man muss nicht unbedingt die großen Websites schlagen. Es reicht oft schon, ein kleines Stück vom großen Kuchen abzubekommen. Doch wenn der Markt schrumpft, dann ist das auf Dauer natürlich ein Problem.

Konkurrenz, Zielgruppe falsch beurteilt: Immer wieder sehe ich den Fall, dass die Grundlagen nicht ordentlich gesetzt wurden. So wird oft die eigene Zielgruppe, aber auch die Konkurrenz falsch beurteilt. Leider erkennt man das dann oft erst deutlich später. Aber lieber ein Ende mit Schrecken als ein Schrecken ohne Ende.

Hat man sich dafür entschieden, die Website aufzugeben, stellt sich die Frage, was man mit der Website, der Domain, den Inhalten etc. noch machen kann. Schließlich hat man viel Arbeit und möglicherweise auch Geld investiert. Die Website selbst könnte man vom Layout an ein anderes Thema anpassen. Allerdings gibt es doch viele Details, die man dabei beachten muss, um keine Altlasten mitzunehmen.

Die Inhalte sind meist schon recht eindeutig auf ein Thema zugeschnitten. Dennoch kann es bei einem Teil der Inhalte, z. B. Hintergrundinformationen, durchaus möglich sein, diese auf einer anderen thematisch verwandten Website zu nutzen.

Ist beides keine Option, so kann man zumindest überlegen, die Domain für ein anderes Projekt zu nutzen. Besonders geeignet ist dafür eine Fantasiedomain, die also keine konkreten Keywords enthält. Ist das jedoch der Fall, wird es schwieriger, und man muss schon thematisch in der Nähe bleiben. Keinesfalls sollte man eine Domain für ein Thema nutzen, zu dem sie gar nicht passt.

The post Acht WordPress-Tipps für Ihre Website appeared first on webinale 2025.

Passend zum Nikolaustag verlosen wir

3 Buchexemplare „Conversion Optimierung – Praxismethoden für mehr Markterfolg im Web“ und verschenken oben drauf für JEDEN das neue Video von Karl Kratz!

In dem Buch von André Morys erhalten Sie wertvolle Praxistipps zu Kundenbindung, Überwindung von Kaufbarrieren und für optimales Web-Marketing. 97 Prozent aller Besucher eines Onlineshops kaufen nämlich nicht. Dieser Durchschnittswert verdeutlicht das Dilemma, mit dem sich Designer, Entwickler und Betreiber eines Onlineshops gleichermaßen auseinandersetzen müssen. Die Methoden, Werkzeuge und Möglichkeiten zur Steigerung der Verkaufsleistung erscheinen zunächst vielfältig und komplex. In diesem Werk gewinnen Sie wertvolle Erkenntnisse aus zahlreichen Wissenschaftlichen Studien und Fallbeispiele aus dem Alltag, die die Wirksamkeit der gezeigten Methodik belegen. Direkt umsetzbare Expertentipps helfen Ihnen, die Theorie einfach in die Praxis umzusetzen.

Möchten Sie praxisnahe Tipps beim Einstieg in die Serverless-Welt bekommen? Dann haben Sie jetzt die Gelegenheit, dieses Buch noch heute zu gewinnen.

Bitte tragen Sie Ihre Email-Adresse ein, um den Webinale-Newsletter zu erhalten und somit am Gewinnspiel für drei Buchexemplaren „Conversion Optimierung“ teilzunehmen. *

*Auch treue Webinale-Newsletterabonnenten kommen in den Lostopf, wenn sie sich hier nochmal eintragen!

Außerdem gibt es vom Nikolaus noch ein weiteres Geschenk für Sie:

Die Keynote „Die Kunst digitaler Verführung“ vom Online-Marketing-Experten Karl Kratz, die von ihm auf der webinale 2017 gehalten wurde, war schon damals ein Highlight auf der Konferenz und wurde glücklicherweise jetzt auch noch als Video veröffentlicht.

Lassen Sie sich durch die Themen Wahrnehmung und Aufmerksamkeit führen und lernen Sie anhand von Beispielen selbst zu verführen!

The post Das große Gewinnspiel zum Nikolaus! appeared first on webinale 2025.

Aber dient SEO tatsächlich nur der Vermarktung der Website?

Warum werden immer wieder zahllose Change Requests fällig, sobald der SEO sich einmischt? Diese und andere Fragen diskutierte André Scharf auf der webinale 2016 in seiner Session „SEO im Web Development – wo, wann und vor allem: wie?“. Dabei warf er einen Blick auf den Ablauf von Webprojekten und die Rolle, die SEO dabei spielt. Im Fokus stand die Fragestellung, an welchen Stellen SEO-Aspekte berücksichtigt werden sollten (bspw. JavaScript, React, HTML5 und AMP) und wie sich Reibungseffekte vermeiden lassen. Eine der Haupterkenntnisse: SEOs müssen lernen, etwas mehr wie Entwickler bzw. Web Developer zu denken. Denn oft wissen SEOs ganz genau, was sie brauchen. Nur leider wissen sie zu selten, wie man danach fragt.

Auch auf der webinale 2017 ist André wieder mit von der Partie und gibt seine langjährige Erfahrung als Director SEO bei DigitalsLBi an die Teilnehmer weiter. In der Session SEO for free? Warum SEO nicht viel kosten muss erklärt er, was hinter mal mehr mal weniger kostspieligen SEO-Angeboten steckt, welche Kosten wirklich notwendig sind und wie man SEO auch mit kleinem Budget gut umsetzen kann. Zusammen mit Peter Rozek gibt André in der Session Data-driven UX den Teilnehmern Thesen und Handlungsempfehlungen für eine möglichst effiziente Kombination von UX- und SEO-Maßnahmen an die Hand. Welche Bedeutung hat eine quantitative Datenanalyse, und was bedeutet das für qualitative UX-Analysen? Was genau erwarten die Nutzer, und wie holt man sie optimal ab? André und Peter werfen einen Blick auf das „Was“ aus der SEO-Perspektive, analysieren das „Warum“ mit UX- und Usability-Methoden.

Lasst euch jetzt von André Scharf über das Wo, Wann und Wie des SEO im Web Development aufklären.
Viel Spaß!

The post SEO im Web Development – Wo, Wann und vor allem: Wie? appeared first on webinale 2025.