Wenn Performance Probleme, schlechte SEO Ergebnisse, niedrige Conversion Rates und eine schlechte User-Experience zusammenkommen, stehen die Zeichen häufig auf Website-Relaunch. Doch dieser muss nicht immer von 0 auf 100 gemacht werden.
Vor einem Website-Relaunch sollte sich immer die Frage gestellt werden:Muss das alles auf den Müll oder kann man noch etwas retten?
Denn nicht immer ist ein kompletter Rebuild notwendig. Insbesondere, wenn interne Ressourcen stark eingebunden sind und nicht genug Budget zur Verfügung steht, um die ganze Website von 0 auf neu zu bauen, kann ein “Rebuild from the inside” sinnvoll sein.
In diesem Beitrag gehen wir bereits darauf ein, welche Fragen vor einem Website-Relaunch geklärt sein sollten und wann es Sinn macht, sich externe Unterstützung ins Boot zu holen.
In der Kurzzusammenfassung: Es gibt nicht das perfekte Vorgehen, sondern ein Relaunch sollte sich immer der Situation des Business anpassen. Folgende zwei Optionen bestehen:
- Wenn die Website sowohl technisch als auch designtechnisch neu gestaltet werden soll UND Zeit- sowie Budget vorhanden ist, macht es Sinn, die alte Website auf den Müll zu werfen und from Scratch die neue anzufangen. Altlasten eliminiert man so automatisch, allerdings kann es in der Phase des Relaunches manchmal zu kleinen Rucklern im Tagesgeschäft kommen. Häufig kommen Probleme wie fehlende Redirects, tote Links oder Unterbrechungen in der Erreichbarkeit der Website vor. Diese lassen sich zwar absolut minimieren aber meistens nicht gänzlich vermeiden.
- Sind obige Voraussetzungen nicht gegeben, macht ein Rebuild von innen heraus Sinn. Hierbei wird die alte Website schrittweise neugebaut und Zwischenergebnisse direkt gepublished. Das kann von Vorteil sein, da Unterseiten mit hoher Priorität verhältnismäßig schnell neu gebaut werden können und weniger wichtige Seiten erst danach angegangen werden. Meistens dauert dieser Ansatz über die gesamte Dauer des Relaunches etwas länger, ist aber ressourcenschonender und besser verträglich mit dem Tagesgeschäft.
In diesem Beitrag soll es um Variante 2 gehen, da diese Option gerne vernachlässigt wird aber großes Potenzial birgt.
Schritt für Schritt durch den Rebuild von innen
1. Vorbereitung:
Ist die Entscheidung für den Rebuild von innen gefallen, gilt es diesen vorzubereiten. Im ersten Schritt sollten die Ziele definiert werden, an denen der Erfolg des Rebuilds gemessen werden kann. Hier sind Performance Ziele wie Conversion-Rate Steigerung oder ein höherer Pagespeed genau so denkbar, wie subjektivere Ziele (z.B. der Website eine neue Optik zu geben).
Sind die Ziele definiert, ist der wichtigste Schritt Arbeitspakete zu definieren und diese zu priorisieren. Da der Rebuild schrittweise erfolgen soll, ist im Anschluss an die Priorisierung klar, in welcher Reihenfolge was erledigt wird. Eine sinnvolle Priorisierung ist beispielsweise:
Prio 1: Low Hanging Fruits
Unter Low Hanging Fruits verstehen wir Optimierungsmöglichkeiten, die sehr schnell und ohne viel Aufwand möglich sind. Da diese schnell gehen, macht es Sinn, diese zuerst zu erledigen und die Effekte dieser bereits während der weiteren Arbeit zu spüren.
Prio 2: Produktseiten, Karriereseiten und Blog + Blogpost
Diese Seiten haben auf den meisten Websites den größten Einfluss und sind Startpunkte für viele User-Journeys. Aus diesem Grund werden diese Seiten im ersten Paket gemeinsam bearbeitet und als erstes ge-relaunched. Ein weiterer Vorteil davon, Seiten mit viel Traffic zuerst zu optimieren, ist, dass diese bereits live geschaltet werden können, während andere Seiten noch im Rebuild sind. Die Seiten arbeiten dann bereits für die Ziele, obwohl der Relaunch noch nicht abgeschlossen ist.
Prio 3: Startseite und Über uns
Gerne überschätzt wird die Startseite von Websites. Häufig kommt der größte Teil des Traffics über Unterseiten und nur ein Bruchteil dieses Traffics kommt in ihrer Journey überhaupt einmal auf die Startseite. Daher kann diese und alle Seiten, die man zu “Über uns” zählen könnte, problemlos depriorisiert werden. Wichtig: Bitte bedenke hier, dass das ein Beispiel ist. Wenn bei dir der meiste Traffic über die Startseite kommt, sollte diese definitiv zuerst bearbeitet werden.
Prio 4: Sonstige Seiten und Legal Pages
Je nach Website gibt es noch eine Vielzahl weiterer Unterseiten. Häufig beinhalten diese sehr spezifischen Content, der für die meisten Besucher nicht relevant ist. Aus diesem Grund gehören diese Seiten und Legal Pages in die unterste Kategorie.
Natürlich ist es neben der Priorisierung von Seitenpaketen auch wichtig, gravierende Fehler zu priorisieren und den obigen Arbeitspaketen zuzuordnen. So sind Bugs, Responsiveness Fehler und z.B. nicht funktionierende Formulare auch extrem wichtig und sollten dementsprechend in den Rebuild-Prozess eingegliedert werden.
Sollten zudem Seiten existieren, die nach dem Rebuild nicht mehr vorhanden sein sollen (weil sie gelöscht oder mit anderen kombiniert werden), ist es zudem essenziell die URLs zu notieren. So können richtige 301-Redirects gesetzt werden und es entstehen keine toten Links.
2. Umsetzung des Rebuilds
Ist der Rebuild geplant, geht es an die Umsetzung der einzelnen Arbeitspakete. Als schnelle Vorbereitung sollte ein Backup der ganzen Seite erstellt werden und konkret benannt sein. So ist es zu einem späteren Zeitpunkt immer möglich auf diesen Stand zurückzugreifen oder Änderungen rückgängig zu machen.
Ist das Backup erledigt, macht es Sinn, im ersten Schritt die Low Hanging Fruits abzugreifen. Dieser Schritt sollte sich am Ende nochmal wiederholen, weil einiges an Potenzial erst während des Rebuilds offenbart wird. Low-Hanging Fruits sind:
- CSS über die Clean-Up Funktion aufräumen (Styles im Webflow Designer anwählen und den kleinen Besen oben rechts klicken). Hierdurch werden alle CSS Klassen gelöscht, die zwar noch im CSS gespeichert sind aber gar nicht benutzt werden.
- Ungenutzte Animationen löschen (Interactions-Panel öffnen und auf “Clean Up klicken”). Hiermit werden alle Animationen gelöscht, die bei jedem Page Load geladen werden, obwohl sie nicht mehr in Verwendung sind.
- HTML, CSS, JS komprimieren. Hierdurch wird der Code komprimiert und die Seite lädt schneller. Geht in den Site Settings unter /Publishing
- Ungenutzte Seiten auf “No-Index” setzen. So werden Seiten mit alten Inhalten oder schweren Fehlern aus dem Google Index ausgeschlossen und tauchen nicht in der Suche auf. Danach die automatisch generierte Sitemap aktivieren (Site Settings / SEO) und an die Google Search Console übergeben. Schon sind die Links aktualisiert und nur das wird gefunden, was gefunden werden soll.
- Global Canonical URL setzen. Im gleichen Reiter wie die die automatische Sitemap findet sich die Eingabe der GCURL. Diese sollte gleich deiner Main URL sein und signalisiert Suchmaschinen welche URL die richtige ist. So vermeidest du duplicated Content.
- Ungenutzte Skripte eliminieren. Solltest du externe Skripte über Custom Code eingebunden haben, ist jetzt die Zeit alle Skripte rauszuschmeißen, die nicht mehr genutzt werden. Denn: jedes Skript lädt im Zweifel externe Inhalte, die die Ladegeschwindigkeit deiner Website negativ beeinflussen.
- Font-Set Optimieren. Im Reiter Site Settings / Fonts gibt es einiges an Optimierungspotenzial. Zuerst sollten alle Font-Weights gelöscht werden, die gar nicht genutzt werden. Im zweiten Schritt sollten die Font-Weights, die genutzt werden, auf das WOFF2 Format komprimiert sein, um die Ladegeschwindigkeit der Seite zu maximieren.
Sind die Low-Hanging Fruits abgegrast, geht es im zweiten Schritt an das Wireframing der neuen Seiten. Dieser Schritt ist nur notwendig, wenn der Rebuild auch mit einem Redesign einhergeht. Ist das nicht der Fall, kannst du direkt bei Schritt 4 weitermachen. Im Wireframing (zu deutsch: Drahtgerüst erstellen) wird die neue Seite konzipiert und festgelegt wie das grobe Layout der Seite ist. Erst im folgenden dritten Schritt wird das ganze dann designt. Durch schnellere Iterationen spart man im Wireframing viel Zeit, indem man die grafische Tiefe des Layouts sehr gering hält. Erst wenn das Layout steht, geht es dann in die UI / Webdesign Phase. In dieser werden die definierten Layouts dann pixel-genau designt und für das Development vorbereitet. Um Überraschungen und Fehler zu vermeiden, macht es zudem Sinn auch ein mobiles Design anzulegen. So wird in der nächsten Phase nichts mehr dem Zufall überlassen.
Im vierten Schritt, sollte ein CSS Style Guide eingeführt werden, dann im Anschluss konstant angewendet wird. Alter Code kann so schrittweise entfernt werden und am Ende steht die Website nur noch mit neuen Klassen dar.
Die Vorteile eines Style-Guides sind:
- Konsistente Styles für alle Elemente
- Sauberer und dadurch schneller Code
- Einfache Handhabung und Übergabe an Devs
Es gibt einige Webflow Style Guides die richtig gut sind. In der Praxis und auch für Endanwender gedacht, hat sicher der Client First CSS Style Guide von Finsweet bewährt. Dieser setzt auf ein einfach verständliches Klassensystem, das durch klare Benennung der Klassen heraussticht. Der Style Guide ist kostenlos als Cloneable verfügbar und kann direkt als Startpunkt für den Rebuild genommen werden. Sollte Client First in Kombinationen mit den Komponenten der Relume Library (eine Komponenten-Bibliothek für Webflow) verwendet werden, macht es Sinn, die etwas abgewandelte Form des Relume Style Guides zu verwenden.
Sind alle Styles im Style Guide eingepflegt, geht es im fünften Schritt an die Umsetzung in Webflow. Hier sollte penibel darauf geachtet werden, dass nur noch die neuen Klassen verwendet werden, um am Ende das Maximum an Performance aus der Website zu holen. Sind die Seiten eines Arbeitspakets fertig entwickelt, responsive und für Pagespeed und SEO optimiert, kann der ganze Badge gepublished werden.
Wir empfehlen immer ein intensives Testing der neuen Seiten auf verschiedenen Geräten und Browsern. Hierdurch lassen sich einfache Fehler vermeiden und die Seiten machen direkt nach dem Relaunch einen top Eindruck.
Durch die schrittweise Erneuerung arbeiten die neu gepublishten Seiten ab diesem Zeitpunkt schon für die vorher definierten Ziele und man muss nicht warten, bis alles auf einen Schlag fertig ist.
3. Den Rebuild nachbereiten
Einer der wichtigsten Punkte bei einer Website: Eine Website ist niemals fertig. Texte sollten aktuell gehalten werden, Bilder regelmäßig an den Status Quo angepasst werden und neue Content-Pieces wie Blogbeiträge wollen veröffentlich werden. Nur so bleibt eine Website konstant für Besucher und Suchmaschinen relevant und kann neue Kunden bringen.
Wenn der Ausgangspunkt für neuen Content fehlt, ist User-Feedback häufig eine Goldgrube. Einerseits können spezifische Fragestellungen von Kunden oder potenziellen Kunden in spezifischen Blog-Posts bearbeitet werden und andererseits geben Befragungen gute Insights in mögliche Optimierungsmöglichkeiten, die auch nach dem Rebuild noch bestehen.
Neben der kontinuierlichen Weiterentwicklung empfiehlt es sich nochmal die Performance der eigenen Seite auf den Prüfstand zu stellen. Wenn SEO und Pagespeed Ergebnisse immer noch nicht zufriedenstellend sind, finden sich hier wichtige Webflow SEO Tipps für Beginner, hier SEO Tipps für Fortgeschrittene und hier Pagespeed Tipps für Beginner und hier für Fortgeschrittene.