Finanzchef24: Content Structure and Acquisition of Core Web Vitals

In recent times, Google recommends measuring page performance with the Core Web Vitals metrics, and we continue to learn and improve to provide our clients with the best solutions.

 

At Bejamas, we consider our clients' success as our own and take a better approach when there is room for improvement. In this way, through our collaboration with Finanzchef24, we adjusted our work to meet their needs and helped them understand the value of a better content structure utilizing Jamstack.

 

I will talk about how it has progressed and how it is currently progressing!

1. About Finanzchef24

Founded in 2012, Finanzchef24 is Germany's largest digital insurance broker. Collaborating with 46 trusted partners such as Allianz, ARAG, and ERGO, we conduct risk analysis comparisons to assist entrepreneurs and self-employed individuals in obtaining insurance that covers corporate liability, professional liability, property damage, industrial property, as well as cyber and business content.

 

2. Pursuit of Further Jamstack Power: Bejamas and Finanzchef24

The Bejamas team was pleased to learn that Finanzchef24 had already adopted Jamstack when they began working to understand their needs. It is truly wonderful to be able to work with projects and teams that are already well-versed in the benefits of Jamstack.

 

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

 

I realized right away that it doesn't necessarily mean 'simple'.

3. What were the main challenges?

The company's technical director, Vlad Barboni, stated: "Finanzchef24 started as a comparison platform for business insurance and was a pioneer in its field at the time of its launch. However, this meant that there was no suitable API to obtain individual prices and enable comparisons between different insurance companies."

 

Therefore, it was necessary to rebuild it from scratch.

 

We had to operate both the insurance company's logic and our own logic to compare everything, which made the backend very complex.

 

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

4. From Drupal to Contentful: Migrating Finanzchef24's Knowledge Base

Finanzchef24 had already migrated many Drupal sites to Gatsby and Contentful before starting to work together.

 

Why did we migrate from Drupal? Maintaining Drupal can be quite challenging, especially 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 designed headless CMS, we were able to transition to a custom front end supported by our internal design system. This brought us closer to our vision of having a modular system composed of reusable components."

 

Furthermore, since most of the developers were JavaScript developers without a background in PHP, there was a knowledge gap within the team, which became the driving force behind the decision to transition to a more modern stack.

 

Although Finanzchef24 was a step ahead, everything was not smooth sailing when it came to content management and performance improvement.

5. Finanzchef24 Framework

The developers of Bejamas have come to understand the complexity of the project as it progressed and have started to tackle the most urgent tasks.

 

• Make the final decision on content migration
• Implement better content structure
• Simplify the handling of processes and content

 

However, it was clear that these were not simple matters. Finanzchef24 had already adopted Jamstack, but they needed to consider the technologies to use. As mentioned earlier, their content logic was already somewhat complex.

 

We conducted an assessment to determine what is needed to move forward. Here, we will briefly introduce the outline of that framework.

 

5-1 Realizing a Homepage App with Gatsby + Contentful

The homepage application using Gatsby and Contentful consists of pages without dynamic data, such as the knowledge base section and blog. The Gatsby Preview plugin is integrated with Contentful for content editors, and both the staging site and the production site are hosted on AWS, so the preview builds use Gatsby Cloud.

 

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 for all dynamic pages that depend on parameters, user input, and user data. These pages include product result/list pages, digital interview funnels for entering results, checkout, and more.

 

This is an independent application that allows users to go through the industry selection and digital interview goal achievement process, displaying the results of the user's insurance agency package and finally checking 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 frontend applications and packages. Example: Design System
• Cypress – Used for end-to-end (e2e) testing

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

After thoroughly understanding the team's needs and the technologies they are using, we rolled up our sleeves and unleashed our secret weapon. Here is how we decided 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 assessment on both desktop and mobile.

 

6-2 Homepage Application

The developers have started working on the homepage app. They have implemented many changes to Contentful and the codebase to facilitate the migration of hundreds of pages from Drupal to the homepage app, as well as to add and improve features and functionalities.

 

Here are some of the improvements.

 

• Introduction of new landing page and blog design
• Improvement of Navigation
• Create a 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

 

Additionally, we integrated the Contentful Rich Text field and plugins, contributing to a more flexible and streamlined editing experience and frontend for the content types and components that utilize this.

 

6-3 Changes to the Global Package

Assisted in improving the global package by adding the React Context API for small changes to the design system and implementing a custom cookie banner.

 

6-4 Widget: Custom React App

Our team implemented a widget that partners of Finanzchef24 can install on their sites, directing users to Finanzchef24's digital interview funnel. Both staging and production are hosted on Vercel, and the documentation showing how to add the widget to the site utilized a GitHub page site.

 

6-5 Satisfactory Transition

Another important task was the expansion of workflows, including the migration to Contentful. We were able to migrate hundreds of pages from the old template to the landing page content type/template and also unlock three additional content types.

 

By performing this task programmatically, we were able to significantly reduce the time spent on manual work.

 

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

 

This is a significant issue, and it is a common problem that many companies face, especially if they lack experience with headless CMS. This was also the case for the developers at Finanzchef24. They were able to resolve content structure issues with Contentful and provide an overall enhanced experience.

7. Results

Notably, the page performance has significantly improved and meets the requirements to pass Google's Core Web Vitals.

 

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

 

Immediately after migrating to Jamstack:

 

 

As a result of collaborating with the developers of Bejamas to improve metrics:

 

 

The Finanzchef24 team has also improved the SEO of the homepage app overall, and thanks to the improved content structure by Contentful, we have achieved an excellent editing experience with a simple front end.

 

Bejamas is a highly reliable partner that can not only provide short-term outsourcing but also embed capable developers in your team for the long term. I believe there is no better external development partner than them, not only for delivering high-quality work but also for their excellent cultural fit with our team, enjoying the use of the latest tools while working.

 

Vlad Barboni
CTO of Finanzchef24

Thanks to the Bejamas team and the Jamstack application, Finanzchef24 was able to migrate the most important sections of static content from Drupal. Ultimately, we are proud to have hired our developers to achieve a more long-term collaboration and to continue working closely with their team.