First Roofing Company
Nahtlose Migration eines zehn Jahre alten Unternehmensportals auf einen modernen Tech-Stack.
Rolle
Lead Developer, Full-Stack-Entwickler, SEO-Spezialist
Jahr
2023
Stack
Next.js App RouterReactTypeScriptStrapiPostgreSQLDockerDokployDocker HubZodReact Hook Form
Die Aufgabe
Das zehn Jahre alte PHP-Portal war langsam und anfällig . Das Unternehmen benötigte eine moderne Plattform – ohne Verlust des aufgebauten SEO-Gewichts, Hunderte von Inhaltsseiten und ohne einen einzigen Tag Ausfallzeit.
Die Phasen
Implementierungslogik & Projektablauf
🔍 Legacy-Audit & Datenbank-Architektur:
- Analyse des 10 Jahre alten PHP-Quellcodes sowie Identifizierung und Behebung kritischer Sicherheitslücken (einschließlich hartcodierter sensibler Daten).
- Erfassung und vollständige Beibehaltung der alten URL-Struktur, um Einbrüche des organischen SEO-Traffics während der Migration auszuschließen.
- Entwicklung eines neuen relationalen Datenmodells: Einrichtung tiefer Entitätsbeziehungen im Strapi CMS und Konfiguration von PostgreSQL, sodass Dienstleistungsseiten dynamisch genau die Referenzobjekte anzeigen, bei denen diese Dienste angewendet wurden.
UI/UX-Refactoring & Content-Upgrade
- Vollständige Beseitigung des Chaos aus aufdringlichen Drittanbieter-Chats, Pop-ups und unpassenden Ladebildschirmen der alten Website.
- Entwicklung eines sauberen, responsiven Interfaces mit Fokus auf mobile Conversion und einer optimierten Customer Journey Map (CJM).
- Strukturierung der über Jahre gewachsenen Objektdatenbank und Organisation eines kompletten Rewrites aller Projektbeschreibungen im Portfolio.
Frontend-Entwicklung & Laufzeit-Optimierung
- Migration des Clients auf den Next.js App Router mit Fokus auf Server Components für blitzschnelles Rendering der Marketingseiten.
- Optimierung des Page-Speeds durch Dynamic Imports für rechenintensive Komponenten wie die interaktive Projektkarte mit dynamischer Clusterbildung.
- Absicherung der Formularverarbeitung durch die Kombination von React Hook Form mit strenger Datenvalidierung via Zod.
Marketing-Automatisierung & Lokales SEO
- Entwicklung eines Moduls zur zentralen Preisverwaltung: Eine Änderung des Basispreises im CMS-Adminbereich aktualisiert automatisch die gesamte Website.
- Programmierung eines Skripts zur automatischen Generierung von YML-Feeds, um aktuelle Preise mit lokalen Verzeichnissen (Yandex, 2GIS) zu synchronisieren, was die Nutzersignale und das lokale Suchmaschinenranking massiv verbesserte.
Containerisierung & Modernes DevOps
- Vollständige Isolierung der Anwendungskomponenten durch Verpackung in Docker-Container.
- Bereitstellung des Self-Hosted-Orchestrators Dokploy zur komfortablen Steuerung der Infrastruktur.
- Einrichtung einer nahtlosen CI/CD-Pipeline: Code-Pushes stoßen automatische Production-Image-Builds auf Docker Hub an, wodurch Updates komplett ohne Ausfallzeiten live gehen.
Der Prozess
Neues Leben für ein Legacy-Portal
Die Migration einer zehn Jahre alten Website ist wie eine Herztransplantation während eines Marathons.
Das alte PHP-Portal war langsam und anfällig, brachte aber kontinuierlich reale Anfragen über die Suche. Das Unternehmen benötigte eine moderne Plattform ohne einen einzigen Tag Ausfallzeit und ohne das geringste Risiko, mühsam aufgebaute SEO-Positionen zu verlieren.
1. Strategie und Architektur-Redesign
Wir begannen mit einem tiefen Content-Audit. Die alte Struktur wurde sorgfältig beibehalten und in neue, logische Entitäten innerhalb des Headless CMS Strapi überführt, unterstützt durch eine robuste PostgreSQL-Datenbank.
Um die für das organische Suchmaschinenranking kritischen Nutzersignale zu verbessern, wurde ein dynamisches Preistabellen-System entwickelt:
- Zentrale Verwaltung: Der Basispreis wird einmalig im Admin-Bereich definiert und überträgt sich automatisch auf die jeweiligen Dienstleistungsseiten.
- Automatische Synchronisation: Dieselben Daten bilden einen dynamischen YML-Feed, der die Preislisten auf externen Plattformen (2GIS, Yandex Business und Yandex Services) automatisiert aktualisiert.
2. Kompromisslose Performance
Die neue Plattform wurde mit maximalem Fokus auf Ladegeschwindigkeit und Reaktionszeit des Interfaces entwickelt. Das Frontend basiert auf Next.js unter Verwendung von Server Components.
Um die initiale Payload so gering wie möglich zu halten:
- Für rechenintensive Client-Komponenten wird Dynamic Imports verwendet.
- Der Katalog läuft vollständig über Server-Routen und nutzt Next.js Streaming.
Ergebnis: Die quälenden 4,2 Sekunden Ladezeit gehören endgültig der Vergangenheit an.
3. Neues UI/UX und komplexe Funktionen
Basierend auf den Geschäftszielen des Kunden und einer Wettbewerbsanalyse haben wir ein frisches Farbschema entwickelt, moderne Grafiken definiert und die Customer Journey Map (CJM) komplett neu gestaltet.
Ein zentrales Highlight ist die interaktive Karte der realisierten Projekte mit dynamischer Clusterbildung der Objekte je nach Zoomstufe.
Die Magie im Hintergrund: Ich habe tiefe relationale Verknüpfungen zwischen den Entitäten auf Strapi-Ebene konfiguriert. Wenn nun ein Nutzer eine bestimmte Dienstleistungsseite aufruft, stellt das Backend automatisch genau die Objekte zusammen, die im Rahmen dieser Dienstleistung umgesetzt wurden, und zeigt sie an.
Die Ergebnisse
Die Gesamtladezeit des Portals wurde um fast 3 Sekunden reduziert.
Hervorragender "Largest Contentful Paint"-Wert auf mobilen Geräten (Lighthouse). Die Desktop-Werte tendieren gegen null.
Zero Total Blocking Time (keine Blockierung des Hauptthreads) und Zero Cumulative Layout Shift (keine Layout-Verschiebungen) auf Mobilgeräten erreicht.
Dank der radikalen technischen Optimierung und der schnelleren Antwortzeiten laut Lighthouse verbesserten sich die organischen Suchmaschinenrankings der Website spürbar.