A Leap in Performance Thanks to the Hyvä Relaunch for telc

telc gGmbH is one of the leading institutions in the field of certified language exams and digital learning solutions. At the heart of its digital sales operations is a Magento-based online store that serves both individual customers and institutional partners. The store’s existing front end was technologically outdated and was increasingly limiting design flexibility. Additionally, its mobile performance no longer met the requirements of modern web standards.
The goal of the project was a complete front-end relaunch using the Hyvä Themes framework. The aim was to modernize telc gGmbH’s digital presence while significantly reducing load times. Strategically, the focus was on staying as close as possible to the Hyvä standard. This approach ensures that the store can easily adopt future updates to the framework and directly benefit from continuous improvements, particularly in the areas of accessibility and performance. basecom handled the technical design, front-end development, and performance optimization of the system.

As the project progressed, challenging conditions emerged on both the technical and organizational levels. The legacy system was based on a complex inheritance hierarchy in the vendor directory and loaded numerous CSS files via convoluted layout instructions, plugins, and controllers. Extensive customizations in the local code directory, which had accumulated over the years, resulted in even an unmodified standard front end being displayed incorrectly locally, as outdated stylesheets blocked the new layout. Since the live store had to continue running without interruption during the development phase, simply deleting legacy code was not an option.
Functional complexity posed another hurdle. Many of the extensions active in the shop were not natively compatible with Hyvä. A striking example is the meta-navigation, which allows users to switch to other platforms operated by telc gGmbH. This navigation reloaded the JavaScript framework Vue.js with every page view, which led to noticeable layout shifts (Cumulative Layout Shift) and delayed load times. In addition, an adjustment to the tracking solution (WeltPixel Pro Suite) during the project required a last-minute switch of the staging and live environments to a single domain with different subdomains to ensure data consistency.

Relaunch with Hyvä

Design System and Standardization via Design Tokens

To align telc gGmbH’s corporate identity with Hyvä’s update capabilities, basecom first developed a digital style guide in Figma. The official Hyvä UI Figma template served as the technical foundation. This was specifically enhanced to incorporate the client’s specific design requirements.
The design was translated into code using systematically defined design tokens in Tailwind CSS for colors, typography, spacing, and standardized UI components such as buttons and form fields. This strict structure allowed global layout adjustments to be managed centrally throughout the entire project. This approach minimized the effort required to write CSS manually, prevented code redundancies, and ensured that the customized front end remained extremely close to the resource-efficient Hyvä standard.

Performance Optimization Through Varnish Tuning and the Speculation Rules API

To noticeably reduce load times for end users, basecom implemented a multi-level caching and rendering strategy. First, the Varnish cache was configured to utilize the browser’s own back-forward cache (BF cache). By default, Magento blocks this cache using specific “no-store” headers in the HTTP response. Since Hyvä relies on an event-based system, dynamic content (such as the shopping cart or personal customer data) can be kept up to date on the client side even when the BF cache is active. By allocating additional memory to Varnish, the cache hit rate was also maximized, which drastically reduced the Time to First Byte (TTFB).

In addition, the modern Speculation Rules API was integrated to anticipate future user actions on the client side. Three coordinated rules are used for this:

• Moderate Prefetch: As soon as a user hovers over a link, the browser downloads the document resources of the target page in the background.

• Conservative Prerender: Upon the first click (even before the mouse button is released), the target page is fully rendered in the background. This saves up to 100 milliseconds in loading time.

• CMS Rule: Using a specific HTML attribute, editors in the online store’s CMS can specifically mark important landing pages or campaign links for early prefetching.

Functional Consolidation and Code Refactoring

Every extension active in the legacy system underwent a detailed cost-benefit analysis. Extensions without business-critical value were completely removed to reduce system complexity. For the remaining core functions, basecom ensured compatibility with Hyvä. This was achieved either by integrating official compatibility modules from the Hyvä GitLab repository or through in-house developments based on Hyvä’s lean, event-driven frontend system.

The performance-critical meta-navigation was fundamentally restructured. The resource-intensive rendering via Vue.js was replaced by a static, server-side-generated HTML structure. Since the navigation content is static in the shop context, the use of a dynamic JavaScript framework was not necessary here. This measure completely eliminated the previous client-side rendering delays.

Isolated Parallel Operation Using Base Layout Resets

To develop the new frontend while the old theme remained in use, basecom utilized the “Base Layout Resets” feature available starting with Hyvä version 1.3.21. This feature allows XML layout instructions from third-party modules or vendor packages to be selectively overridden for the new theme.
This created a clean development environment isolated from legacy code without requiring any changes to the production system. Additionally, existing PHP plugins were modified to check whether the currently active theme is based on Hyvä. If this is the case, the loading of old CSS files and scripts is prevented on the server side. New CMS content was already entered in the background prior to the final go-live, so that the final migration on launch day could be reduced to a simple theme switch in the Magento backend.

The relaunch of telc gGmbH’s online store demonstrates how a consistent focus on modern front-end standards can sustainably improve the performance and usability of an e-commerce platform. Thanks to close collaboration between basecom, telc gGmbH, and the hosting partner maxcluster, all project milestones were met on schedule. Our partner maxcluster provided particular support for the project by enabling the quick and straightforward adaptation of routing and domain structures for the tracking suites.
The success of these measures can be directly demonstrated using real user data (Real User Monitoring via RUMvision). Measurements taken on real devices during everyday use show significant improvements in Core Web Vitals (measured at the 75th percentile across all pages, excluding checkout):

• Cumulative Layout Shift (CLS): Reduced to 0.00—disruptive visual shifts during the loading process have been completely eliminated.

• Largest Contentful Paint (LCP): Improvement in the loading time of the main content by up to 32%.

• First Contentful Paint (FCP): Acceleration of the initial visual page rendering by up to 42%.

• Interaction to Next Paint (INP): Increased interaction speed by up to 23%.

• Time To First Byte (TTFB): Server response time reduced by up to 19%.

In addition to these purely measurable metrics, the integration of the View Transitions API ensures a noticeably smoother browsing experience. Page transitions—for example, from the product overview to the detail view—are achieved through smooth, visual transitions of the product images. Although the pages are still rendered on the server side, customers experience the fluid feel of a modern Progressive Web App (PWA).

Furthermore, telc gGmbH benefits from improved accessibility. Since the Hyvä front end adheres to strict accessibility guidelines by default, the store has become significantly more accessible to all target groups.

telc gGmbH (Language-and-Competence-Development) is an internationally recognized specialist in system solutions for language proficiency. As a subsidiary of the German Adult Education Association (Deutscher Volkshochschul-Verband e. V., DVV), this nonprofit organization develops standardized language tests in over ten languages. The certificates are recognized worldwide by educational institutions, companies, and government agencies as official proof of language proficiency. In addition to testing services, telc gGmbH sells digital and print learning materials, textbooks, and professional development programs for teachers and examiners through its online store.