Performance-Sprung durch Hyvä-Relaunch für telc

Die telc gGmbH ist eine der führenden Institutionen im Bereich der zertifizierten Sprachprüfungen und digitalen Lernangebote. Kern des digitalen Vertriebs ist ein Onlineshop auf Magento-Basis, der sowohl Privatkund*innen als auch institutionelle Partner bedient. Das bestehende Frontend des Shops war technologisch veraltet und schränkte die gestalterische Flexibilität zunehmend ein. Zudem erfüllte die mobile Performance nicht mehr die Anforderungen moderner Web-Standards.
Ziel des Projekts war ein vollständiger Frontend-Relaunch mit dem Framework Hyvä Themes. Dabei galt es, das digitale Erscheinungsbild der telc gGmbH zu modernisieren und gleichzeitig die Ladezeiten signifikant zu senken. Strategisch stand im Vordergrund, so nah wie möglich am Hyvä-Standard zu bleiben. Dieser Ansatz stellt sicher, dass der Shop künftige Updates des Frameworks unkompliziert übernehmen kann und direkt von kontinuierlichen Verbesserungen, insbesondere in den Bereichen Barrierefreiheit (Accessibility) und Performance, profitiert. basecom übernahm die technische Konzeption, die Frontend-Entwicklung sowie die Performance-Optimierung des Systems.

Im Projektverlauf zeigten sich anspruchsvolle Rahmenbedingungen auf technischer und organisatorischer Ebene. Das Altsystem basierte auf einer komplexen Vererbungshierarchie im Vendor-Verzeichnis und lud zahlreiche CSS-Dateien über unübersichtliche Layout-Anweisungen, Plugins und Controller. Umfangreiche, über Jahre gewachsene Anpassungen im lokalen Code-Verzeichnis führten dazu, dass selbst ein unverändertes Standard-Frontend lokal fehlerhaft dargestellt wurde, da veraltete Stylesheets das neue Layout blockierten. Da der Live-Shop während der Entwicklungsphase ohne Unterbrechung weiterlaufen musste, war das einfache Löschen von Legacy-Code ausgeschlossen.
Eine weitere Hürde stellte die funktionale Komplexität dar. Viele der im Shop aktiven Extensions waren nicht von Haus aus mit Hyvä kompatibel. Ein markantes Beispiel ist die Meta-Navigation, die Benutzer*innen den Wechsel zu anderen Plattformen der telc gGmbH ermöglicht. Diese Navigation lud bei jedem Seitenaufruf das JavaScript-Framework Vue.js nach, was zu spürbaren Layout-Verschiebungen (Cumulative Layout Shift) und verzögerten Ladezeiten führte. Zudem erforderte eine Anpassung der Tracking-Lösung (WeltPixel Pro Suite) während des Projekts eine kurzfristige Umstellung der Staging- und Live-Umgebungen auf eine einheitliche Domain mit unterschiedlichen Subdomains, um Datenkonsistenz zu gewährleisten.

Relaunch mit Hyvä

Design-System und Standardnähe über Design-Tokens

Um die Corporate Identity der telc gGmbH mit der Update-Fähigkeit von Hyvä zu vereinbaren, entwickelte basecom im ersten Schritt einen digitalen Styleguide in Figma. Als technische Basis diente das offizielle Hyvä UI Figma-Template. Dieses wurde gezielt mit den spezifischen Designvorgaben des Kunden angereichert.
Die Übersetzung des Designs in Code erfolgte über systematisch definierte Design-Tokens in Tailwind CSS für Farben, Typografie, Abstände und standardisierte UI-Komponenten wie Buttons oder Formularfelder. Durch diese strikte Strukturierung ließen sich globale Layout-Anpassungen im gesamten Projekt zentral steuern. Das Vorgehen minimierte den manuellen CSS-Schreibaufwand, verhinderte Code-Redundanzen und garantierte, dass das angepasste Frontend extrem nah am ressourcenschonenden Hyvä-Standard verblieb.

Performance-Maximierung durch Varnish-Tuning und die Speculation Rules API

Um die Ladezeiten für die Endnutzer*innen spürbar zu minimieren, implementierte basecom ein mehrstufiges Caching- und Rendering-Konzept. Zunächst wurde der Varnish-Cache so konfiguriert, dass der Browser-eigene Back-Forward Cache (BF Cache) genutzt werden kann. Standardmäßig blockiert Magento diesen Cache durch spezifische no-store-Header in der HTTP-Response. Da Hyvä auf ein event-basiertes System setzt, können dynamische Inhalte (wie der Warenkorb oder persönliche Kundendaten) auch bei aktivem BF-Cache clientseitig aktuell gehalten werden. Durch die Zuweisung von zusätzlichem Arbeitsspeicher für Varnish wurde zudem die Cache-Hitrate maximiert, was die Time to First Byte (TTFB) drastisch senkte.

Ergänzend wurde die moderne Speculation Rules API integriert, um zukünftige Nutzer*innenaktionen clientseitig vorwegzunehmen. Dabei greifen drei aufeinander abgestimmte Regeln:

• Moderate Prefetch: Sobald Nutzer*innen mit dem Cursor über einen Link fahren (Hover-Effekt), lädt der Browser die Dokumentenressourcen der Zielseite im Hintergrund herunter.

• Conservative Prerender: Beim ersten Klick (noch vor dem Loslassen der Maustaste) wird die Zielseite im Hintergrund fertig gerendert. Dies spart bis zu 100 Millisekunden Ladezeit ein.

• CMS-Regel: Über ein spezifische HTML-Attribut können Redakteur*innen im CMS des Onlineshops wichtige Einstiegsseiten oder Kampagnen-Links gezielt für ein vorzeitiges Prefetching markieren.

Funktionale Konsolidierung und Code-Bereinigung

Jede im Altsystem aktive Extension wurde einer detaillierten Kosten-Nutzen-Analyse unterzogen. Erweiterungen ohne geschäftskritischen Mehrwert wurden vollständig entfernt, um die Systemkomplexität zu reduzieren. Für die verbleibenden Kernfunktionen stellte basecom die Hyvä-Kompatibilität her. Dies geschah entweder durch die Integration offizieller Kompatibilitätsmodule aus dem Hyvä-GitLab-Repository oder durch eigene Entwicklungen auf Basis des schlanken, event-basierten Frontend-Systems von Hyvä.

Die performancekritische Meta-Navigation wurde grundlegend restrukturiert. Das ressourcenintensive Rendering via Vue.js wurde durch eine statische, serverseitig generierte HTML-Struktur ersetzt. Da die Navigationsinhalte im Shop-Kontext statisch sind, war der Einsatz eines dynamischen JavaScript-Frameworks an dieser Stelle nicht notwendig. Diese Maßnahme eliminierte die bisherigen clientseitigen Rendering-Verzögerungen vollständig.

Isolierter Parallelbetrieb mittels Base Layout Resets

Um das neue Frontend bei laufendem Betrieb des alten Themes entwickeln zu können, nutzte basecom die ab Hyvä-Version 1.3.21 verfügbaren „Base Layout Resets“. Dieses Feature erlaubt es, XML-Layout-Anweisungen von Drittanbieter-Modulen oder Vendor-Paketen gezielt für das neue Theme außer Kraft zu setzen.
Dadurch wurde eine saubere, von Legacy-Code isolierte Entwicklungsumgebung geschaffen, ohne dass Änderungen am Produktivsystem vorgenommen werden mussten. Ergänzend wurden bestehende PHP-Plugins mit Abfragen versehen, ob das aktuell aktive Theme auf Hyvä basiert. Ist dies der Fall, wird das Laden alter CSS-Dateien und Skripte serverseitig unterbunden. Neue CMS-Inhalte wurden bereits vor dem finalen Go-Live im Hintergrund eingepflegt, sodass die finale Migration am Launch-Tag auf eine einfache Theme-Umschaltung im Magento-Backend reduziert werden konnte.

Der Relaunch des Onlineshops der telc gGmbH demonstriert, wie die konsequente Ausrichtung auf moderne Frontend-Standards die Performance und die Usability einer E-Commerce-Plattform nachhaltig steigert. Durch die enge Kooperation zwischen basecom, der telc gGmbH und dem Hosting-Partner maxcluster wurden alle Projektmeilensteine planmäßig erreicht. Unser Partner maxcluster unterstützte das Projekt insbesondere bei der schnellen und unkomplizierten Anpassung der Routing- und Domainstrukturen für die Tracking-Suiten.
Der Erfolg der Maßnahmen lässt sich direkt anhand von echten Nutzerdaten (Real User Monitoring über RUMvision) belegen. Die Messungen auf realen Endgeräten im täglichen Nutzungsalltag zeigen signifikante Verbesserungen der Core Web Vitals (gemessen im 75. Perzentil über alle Seiten, exklusive Checkout):

• Cumulative Layout Shift (CLS): Reduktion auf 0,00 – störende visuelle Sprünge während des Ladevorgangs sind vollständig eliminiert.

• Largest Contentful Paint (LCP): Verbesserung der Ladezeit des Hauptinhalts um bis zu 32 %.

• First Contentful Paint (FCP): Beschleunigung des ersten visuellen Seitenaufbaus um bis zu 42 %.

• Interaction to Next Paint (INP): Steigerung der Interaktionsgeschwindigkeit um bis zu 23 %.

• Time To First Byte (TTFB): Reduzierung der Antwortzeit des Servers um bis zu 19 %.

Neben den rein messbaren Werten sorgt die Integration der View Transitions API für ein spürbar flüssigeres Surferlebnis. Seitenwechsel, beispielsweise von der Produktübersicht zur Detailansicht, erfolgen durch weiche, visuelle Überblendungen der Produktbilder. Obwohl die Seiten weiterhin serverseitig gerendert werden, entsteht für Kund*innen die flüssige Haptik einer modernen Progressive Web App (PWA).

Darüber hinaus profitiert die telc gGmbH von einer verbesserten Barrierefreiheit (Accessibility). Da das Hyvä-Frontend standardmäßig strenge Barrierefreiheitsrichtlinien einhält, ist der Shop für alle Zielgruppen deutlich leichter zugänglich geworden.

Die telc gGmbH (Language-and-Competence-Development) ist ein international anerkannter Spezialist für Systemlösungen im Bereich der Sprachkompetenz. Als Tochtergesellschaft des Deutschen Volkshochschul-Verbandes e. V. (DVV) entwickelt das gemeinnützige Unternehmen standardisierte Sprachtests in über zehn Sprachen. Die Zertifikate sind weltweit bei Bildungseinrichtungen, Unternehmen und Behörden als offizieller Nachweis von Sprachkenntnissen anerkannt. Neben Prüfungsverfahren vertreibt die telc gGmbH über ihren Onlineshop digitale und analoge Lernmaterialien, Lehrwerke sowie Weiterbildungsangebote für Lehrkräfte und Prüfer*innen.