Komplexe Modernisierung ideal umgesetzt

Die Website der Firma REMKO GmbH & Co. KG wurde umfassend modernisiert. Durch ein TYPO3-Upgrade, ein neues Frontend-Design und die Integration des xmedia PIMs konnten wir die Frontend-Performance erheblich steigern und die Benutzerfreundlichkeit für Redakteure und Nutzer verbessern.

Ausgangssituation

Die REMKO GmbH & Co. KG, ein langjähriger Kunde von orangefluid, benötigte eine umfassende Überarbeitung ihrer Website. Das Bestandssystem basierte auf einer veralteten TYPO3 Version und einer selbst entwickelten PIM-Anbindung, die eine flexible Anpassung nicht mehr zuließ. Performance-Probleme, insbesondere bei komplexen Produkt- und Suchfunktionen, trübten die Benutzererfahrung. Um den wachsenden Anforderungen gerecht zu werden und eine zukunftsfähige Plattform zu schaffen, sollte die Website modernisiert und optimiert werden. Dabei war es wichtig, die bestehende Mehrsprachigkeit der Website zu berücksichtigen und bereits erlangte Suchmaschienenplatzierungen zu erhalten und zu verbessern.

Ziel war es, ein aktuelles TYPO3 CMS, ein performantes Frontend-Design und eine nahtlose Integration des neuen PIM-Systems (xmedia) zu realisieren. Darüber hinaus sollten die Suchfunktionen verbessert und die bestehende E-Commerce-Funktionalität erhalten bleiben.

TYPO3 Upgrade, Frontend Redesign + neue PIM-Anbindung

Das TYPO3 CMS wurde von der Version 10 auf die Version 11 aktualisiert. Dabei wurden alle individual entwickelten Extensions angepasst und die Kompatibilität zum neuen System gewährleistet. Zudem wurde direkt der Grundstein für das Upgrade auf TYPO3 13 gelegt, das angegangen werden kann sobald die komplette Migration zum neuen Frontend-System und der neuen PIM-Anbindung vollständig abgeschlossen ist.

Das veraltete Frontend wurde komplett überarbeitet. Im Fokus stand ein modernes und performantes Design, das die Core Web Vitals erfüllt. Hierfür kamen Technologien wie Bulma, diverse JavaScript-Bibliotheken und individuell entwickelte Web-Components zum Einsatz.

Die bestehende PIM-Anbindung wurde durch eine neue Lösung ersetzt, die auf dem xmedia PIM und der xom API basiert. Ein eigens entwickelter FAL Treiber ermöglicht den Zugriff auf alle Produktdateien über den TYPO3 Dateimanager. Um die Performance zu optimieren, wurde ein umfassendes Caching-System implementiert.

Dabei war es wichtig das bestehende Zugriffskonzept auf Basis diverser Frontend-Gruppen-Rollen zu erhalten. Dies wirkt sich auf den Zugang zu produktspezifischen Inhalten aus und regelt, welche Produkte zu welchen Konditionen auf der Website gekauft werden können.

Das bereits bestehende Logging-System wurde verfeinert und über und über einen Microsoft Teams Connector für REMKO leicht nutzbar gemacht. IT- Und Marketing-Abteilung werden in Echtzeit über Auffälligkeiten im System informiert und wir als Dienstleister bekommen detaillierte Informationen zu aufgetretenen Problemen, um diese schnellstmöglich zu lösen. Das Logging ist in alle wichtigen Teilbereiche des Systems integriert und reicht von Verbindungsproblemen zur xom API bis hin zu fehlgeschlagenen Bestellungen.

Der komplette Umbau der Website wurde so konzipiert, dass alle Neuerungen parallel zu den bestehenden Teilen des alten Systems genutzt werden konnten. Hierdurch konnte REMKO bereits überarbeitete, bzw. neu programmierte Funktionen, direkt nach Fertigstellung produktiv einsetzen.

Suchfunktionalität

Die Produktsuche wurde von Solr auf eine von uns selbst entwickelte Lösung umgestellt, die auf der xom API von xmedia basiert. Diese auf Solr basierende REST API stellt einen effizienten Web-Endpunkt für die Daten des xmedia PIMs dar. Produktdaten wie Bilder und PDFs werden über das DAM System Canto gemanaged und über die xom API normalisiert für die Produktansichten bereitgestellt.

Auf dieser Basis haben wir eine vollständige FAL Integration geschaffen und das Frontend-Rendering von Bildern und PDF-Previews nahtlos in die Standardprozesse von TYPO3 integriert.

Die von uns entwickelte Produkt-Extension für TYPO3 stellt alle PIM- und DAM-Daten via xom für das Frontend zur Verfügung. Durch die umfangreiche Integration der xom API konnten die Suchaspekte Produkte, Ersatzteile und Zubehör optimal implementiert werden.

E-Commerce

Die von orangefluid entwickelte TYPO3 Extension AbstractCart, die wir gerne in Projekten mit einem sehr individuellen E-Commerce Ansatz verwenden, wurde auch in die neue TYPO3 Version von REMKO integriert, um die bestehende E-Commerce-Funktionalität zu erhalten und weiterzuentwickeln.

Die Extension zeichnet sich dadurch aus, dass sie jedes Produkt, das einem vorgegebenen Schema entspricht, kaufbar macht. Der gesamte Warenkorb Prozess, in dem diverse Payment- und Shipping-Anbieter integriert sind, ist für diese Produkte optimiert und bietet über diverse System-Events die Möglichkeit der projektspezifischen Individualisierung. Um damit ein effizientes E-Commerce Erlebnis zu schaffen, wird eine projektspezifische Produkt-Extension benötigt, die zum einen die Produkte darstellt und zum anderen dafür sorgt, dass diese beim Kauf im erwarteten Schema an AbstractCart übergeben werden.

So war es z.B. auch möglich, Produkte aus alten und neuen Datenquellen parallel zu nutzen.

Performance-Optimierung

Um eine maximale Performance zu gewährleisten, wurde die von unserem leitenden TYPO3 Entwickler Dennis Geldmacher erstellte TYPO3 Extension "BeastMode" eingesetzt.

Diese Extension ermöglicht eine komponentenspezifische Auslieferung von Assets wie HTML, CSS, JavaScript und Bilder. Die Assets werden über einen komponentenübergreifenden Build Prozess via webpack optimal aufeinander abgestimmt generiert. Das Endergebnis ist eine Asset-Bibliothek, die redundaten Code automatisch vermeidet, Dateigrößen maximal möglich verringert und automatisch die Browserkompatibiltät des zugrundliegenden CSS und JavaScript Codes sicherstellt. Das Frontend der Website liefert diese Assets komponentenspezifisch aus und sorgt somit dafür, dass auf jeder Seite nur genau die Assets und Code-Bestandteile geladen werden, die für die individuelle Komponentenkomposition der jeweiligen Einzelseite relevant sind.

Auf diese Weise ist es problemlos möglich zwei parallel laufende Design-Systeme, auch gemischt auf Einzelseiten, zu nutzen, ohne relevante Einbußen in der Web-Performance zu haben.

Die relevantesten Performance KPIs sind die sog. Core Web Vitals von Google. Über den PageSpeed Insights Report von Google kann man diese messen und gegebenenfalls Maßnahmen ableiten.

Ergebnisse und Benefits

🚀 Verbesserte Performance

Die Ladezeiten der Website konnten deutlich reduziert werden, was zu einer besseren Benutzererfahrung und höheren Rankings in Suchmaschinen führte.

🛠️ Erhöhte Flexibilität

Das neue System bietet eine hohe Flexibilität bei der Anpassung von Inhalten und Funktionen. Es ist skalierbar und kann für zukünftige Anforderungen problemlos angepasst werden.

🦾 Innovative Technologien

Durch den Einsatz der TYPO3 Extension BeastMode und der umfangreichen Integration des xmedia PIMs wurde eine zukunftsweisende Lösung geschaffen.

🌱 Zukunftsfähigkeit

Der neue komponentenbasierte Ansatz ermöglicht es problemlos jederzeit Einzelteile der Website auszutauschen oder neue Komponenten zu integrieren.

Ökologisch und ökonomisch im Vorteil

Mit der Reduzierung des Datentransfers durch unsere Performance-Optimierung verringern wir maßgeblich den Energieverbrauch sowohl auf der Server-, als auch auf Client-Seite.

In Kombination mit unseren Hosting-Lösungen, die wir auch für REMKO nutzen, wird der Energieverbrauch des Servers zudem CO₂-neutral.

Laut dem Carbon Control Test von Catchpoint:
"The median CO2 footprint of the top 1000 websites is 0.6 grams per visit. This website emits 82% less than that per visit."

Die Website misst selbständig ihren CO2 Verbrauch und übermittelt die Daten an Google Analytics, so dass diese als KPI nutzbar sind. Zudem stellt die Website in der Konsolenausgabe zum jeweiligen Seitenaufruf Informationen mit den spezifischen Messdaten zur Verfügung.

Fazit

Wir zeigen mit dem Projekt für REMKO, wie eine komplexe Modernisierung einer Website erfolgreich umgesetzt werden kann. Durch den Einsatz neuester Technologien und eine sorgfältige Planung konnten wir eine hochperformante und flexible Lösung schaffen, die den Anforderungen von REMKO voll und ganz entspricht.

„Die Einführung der XOM API von myview zur Datenversorgung aus dem PIM-System bietet erhebliche Vorteile für die Verwaltung und Präsentation von Produktinformationen auf unserer Webseite. Mit dem gleichzeitigen Update auf TYPO3 V11 setzen wir einen weiteren wichtigen Meilenstein in der Optimierung unserer digitalen Infrastruktur. Diese Kombination führt zu einer erheblichen Effizienzsteigerung in den Arbeitsabläufen und zu einer nachhaltig verbesserten Benutzererfahrung.“

Kim-Janine Wall
Abteilung Werbung/Marketing bei REMKO

Relevante Spezialisierungen für dieses Projekt

TYPO3 – Perfekt abgestimmtes Content Management

Unsere Spezialisten orchestrieren für Sie ein leicht bedienbares TYPO3 System, dass Ihren Content in jeder gewünschten Darstellungsform optimal ausliefert.

Optimierung der Web-Performance

Erreichen Sie höhere Conversion-Raten und bessere Google Rankings. Wir maximieren die Geschwindigkeit Ihrer TYPO3 Website, Webapp oder Ihres Shopware Shops.

Weiterentwicklung durch Digitalisierung

Verbinden Sie Ihre Daten und Prozesse, um neue unternehmerische Chancen freizusetzen. Wir unterstützen Sie von der Beratung bis hin zur technischen Realisierung Ihrer digitalen Transformation.

Optimierung von UI/UX Designs

Für eine maximale Conversion-Rate und eine Reduktion der Bounce-Rate kreieren wir für Sie passgenaue User Interfaces und erstklassige Nutzererfahrungen.

Sprechen Sie uns an

Wir freuen uns, Sie in einem ersten unverbindlichen Gespräch von uns zu überzeugen.

+49 (0) 52 31 - 61 62 63 contact@orangefluid.com Beratungstermin buchen