Finanzchef24: Content Structure and Acquiring Core Web Vitals

As Google recommends measuring page performance with the Core Web Vitals metric, we continue to learn and improve in order to provide our customers with the best solutions.

 

At Bejamas, we think of our customers' success as our own and if there is room for improvement, we take a better approach. In collaboration with Finanzchef24, we adjusted our work to meet their needs and helped them understand the value of a better content structure using Jamstack.

 

We will discuss how it has progressed and how it is progressing!

1. About Finanzchef24

Finanzchef24, established in 2012, is the largest digital insurance broker in Germany. We work with 46 trusted partners such as Allianz, ARAG, and ERGO to compare risk analysis and support entrepreneurs and self-employed individuals in obtaining insurance coverage for company liability, professional liability, property damage, industrial property, as well as cyber and business content.

 

2. Pursuing Further Jamstack Power: Bejamas and Finanzchef24

When the Bejamas team started working to understand Finanzchef24's needs, we were delighted to learn that they had already implemented Jamstack. It's truly wonderful to be able to work with projects and teams who are already familiar with the benefits of Jamstack.

 

In this project, the focus was on continuous improvement and resolving technical friction, so we delved deeply into those aspects.

 

I noticed it right away, but it doesn't always mean it will be "simple".

3. What were the main challenges?

Vlad Barboni, the company's technical director, says the following: "Finanzchef24 started as a comparison platform for business insurance and was a pioneer in its field at the time of its launch. However, this also means that there was no suitable API to obtain each price and enable comparison of different insurance companies."

 

Therefore, it was necessary to start from scratch.

 

Both the insurance company's logic and our own logic had to be manipulated in order to compare everything, making the backend very complex.

 

One of the main challenges is to step away from here and rethink how to reuse elements and transition to a more service-oriented architecture.

4. Migrating Finanzchef24's Knowledge Base from Drupal to Contentful

Finanzchef24 had already migrated much of their Drupal site to Gatsby and Contentful before starting to work together.

 

Why did we migrate from Drupal? Drupal is particularly difficult to maintain when there are various layers and types of content. However, the main motivation for Finanzchef24 to switch was to improve Google's Core Web Vitals.

 

Vlad adds, "By using a highly design-oriented headless CMS, we were able to transition to a custom front-end supported by our internal design system. This allowed us to get closer to our vision of having a modular system composed of reusable components."

 

Furthermore, due to the fact that most developers did not have a PHP background and were JavaScript developers, there was a knowledge gap within the team. This combination became the driving force behind the decision to migrate to a more modern stack.

 

Although Finanzchef24 was leading the way, not everything was smooth sailing when it came to content management and performance improvement.

5. Finanzchef24 Framework

Bejamas developers have come to understand the complexity of the project and have started to prioritize the most urgent tasks as the project progresses.

 

• Finalize the content migration
• Implement a better content structure
• Simplify the handling of processes and content

 

However, it was clear that these were not easy tasks. Finanzchef24 had already implemented Jamstack, but they needed to consider the technology they would use. As mentioned before, their content logic was already quite complex.

 

We conducted an assessment to determine what we need to move forward. Here, we will briefly introduce an overview of that framework.

 

5-1 Realizing a Homepage App with Gatsby + Contentful

The homepage app using Gatsby and Contentful is composed of pages without dynamically entered data, such as the knowledge base section and blog. The Gatsby Preview plugin is integrated with Contentful for content editors, and preview builds are done using Gatsby Cloud since both the staging and production sites are hosted on AWS.

 

5-2 System Documentation for GatsbyforDesign

Their design system is implemented in React as a local NPM package within the Lerna monorepo.

 

5-3 Next.js + Apollo GraphQL + Jest + Sentry: Hosting on Vercel

Used in all dynamic pages that depend on parameters, user input, and user data. These pages include product result/list pages, digital interview funnels for inputting results, and checkouts.

 

This is an independent application that guides users through the process of selecting their industry and completing a digital interview, ultimately displaying the results of their insurance agent package and allowing them to check out.

 

• CircleCI - Used for all production builds
• GitHub - Used for managing all repositories and development teams
• TypeScript - Used in all applications
• Styled Components - Used in all front-end applications and packages, for example: design systems
• Cypress - Used for end-to-end (e2e) testing

6. It's time to work with our (Jam) stack!

After thoroughly understanding the needs of the team and the technology they use, we rolled up our sleeves and unleashed our secret weapon. Here is the approach we took to handle the project using the selected stack.

 

6-1 Core Web Vitals

As a result, we were able to pass the Core Web Vitals evaluation on both desktop and mobile.

 

6-2 Homepage App

Developers have started working on the homepage app. They have made numerous changes to the Contentful and code base in order to facilitate the migration of hundreds of pages from Drupal to the homepage app, as well as to add and improve functionality and features.

 

Here are some of the improvements.

 

• Introducing new landing page and blog design
• Navigation Improvement
• Create New Team/Position Page
• Integration of Google Ads
• Use external partner widgets statically on the landing page
• Notification/News Bar
• Global state with React Context API

 

In addition, we have integrated Contentful Rich Text field and plugins to contribute to a more flexible and simplified editing experience and frontend for content types and components.

 

6-3 Change of Global Package

Added React Context API to support improvements to global packages by making small changes to the design system and implementing a custom cookie banner.

 

6-4 Widget: Custom React App

Our team has implemented a widget that Finanzchef24 partners can install on their site, sending users to Finanzchef24's digital interview funnel. Staging and production are hosted on Vercel, and the documentation on how to add the widget to the site used GitHub Pages.

 

6-5 Satisfactory Migration

Another important task was expanding the workflow to include Contentful migration. We were able to migrate hundreds of pages from old templates to landing page content types/templates, and also release three additional content types.

 

By performing this task with a program, we were able to significantly reduce the time it took to do it manually.

 

Many migrations have been performed to improve the structure of the content, resulting in a better editing experience and a cleaner front-end.

 

This is a major issue, especially for companies that do not have experience with headless CMS. This was also the case for developers at Finanzchef24. With Contentful, we were able to solve content structure problems and provide an overall enhanced experience.

7. Results

Especially noteworthy is the significant improvement in page performance and meeting the requirements to pass Google's Core Web Vitals.

 

Here, you can view the web vitals metrics for the company's main page, which is one of the corporate liability insurance pages. https://www.finanzchef24.de/versicherung/betriebshaftpflichtversicherung

 

Immediately after migrating to Jamstack:

 

 

As a result of working with Bejamas developers to improve metrics:

 

 

The Finanzchef24 team was able to improve the overall SEO of the homepage app and achieve a simple and excellent editing experience with the improvement of the content structure by Contentful.

 

Bejamas is a highly reliable partner that not only offers short-term outsourcing, but also allows for long-term placement of skilled developers on the team. With a great cultural fit with our in-house team, we believe there is no better external development partner that not only delivers high-quality work, but also enjoys using the latest tools while doing so.

 

Vlad Barboni
CTO of Finanzchef24

Thanks to the Bejamas team and Jamstack application, Finanzchef24 was able to migrate the most important sections of static content from Drupal. In the end, we were able to hire our own developers to achieve a longer-term collaboration and we are proud to continue working closely with their team.