Case Study: 3x Performance Improvement for Emerging Dynamics' New Website

There may be cases where the stack used does not meet expectations. In such cases, we will either do our best or choose a completely different option. Due to issues encountered during the progress of the EMDYN project, we have decided to completely change the stack.

 

As a result, performance has been greatly improved.

 

Before:

 

 

After:

 

 

The initial Contentful Paint (time when the first text or image is rendered) is from 5.7 seconds to 1.2 seconds, the Speed Index is from 6.7 seconds to 2.5 seconds, which is the time it takes for the page's content to be displayed in a visible form.

 

It's not a bad improvement. Now, let me explain how we achieved it.

1. Overview

Emerging Dynamics (EMDYN) is a privately held security company that provides intelligence-driven security solutions. We support numerous international companies worth billions of dollars in anticipating threats and optimizing critical decision-making to protect their assets using cutting-edge technology. As a result, there were two main concerns of performance and security, and a simple request to migrate the front-end of the website to Gatsby.

 

Fortunately, they were already familiar with static site generators and headless CMS, so communication was very easy. They were using Grav CMS, a flat-file CMS, but there were performance issues that needed to be addressed.

 

1-1 What is a flat-file type CMS?

A flat-file CMS is a content management system that does not require a database and stores data directly in files or folders. The advantages include performance, security, and cost efficiency, while the disadvantages include limitations on templates and, in this case, modular pages.

 

1－2 Gatsby＋GravCMS

The initial idea was to use Grav as a headless CMS and pass the content to Gatsby. However, we faced the problem of not having a plugin to connect Gatsby and Grav from the beginning. Since there was no other option, we rolled up our sleeves and started coding.

 

However, I quickly realized that it was a big mistake. As soon as I released the first version of the plugin, I encountered data passing issues with Grav and realized that it couldn't be used as a headless CMS with Gatsby.

 

A modular page/modular content is a paradigm for constructing pages in a CMS. Users can build pages using available components added to the CMS. In this case, the CMS is not only used to store content, but also to generate and modify the layout of the page.

 

1-3 Used Stacks

For this reason, we had to consider a different stack that is almost identical to the flow of web development and the client's user experience. The technology stack used is as follows.

 

• GatsbyJS as a Static Site Generator
• Storyblok as a Headless CMS
• Hosting is Netlify

2. Biggest Challenge in This Project

After discussing with the staff at Emerging Dynamics about the issues with modular pages, we introduced them to Storyblok, the perfect headless CMS for them.

 

2-1 Storyblok and Modular Pages

In the previous Grav CMS, there was modular content and users were able to add and edit any page using predefined components. We configured Storyblok to work in the same way, so our clients were able to continue working with a similar experience as with their previous CMS.

 

In addition, one of the biggest advantages from the perspective of Storyblok users/editors is the ability to preview components not only on the website, but also within Storyblok itself. For example, let's say you have 30 predefined components in your setup. It is impossible for a user to remember all of them just by their names. With Storyblok, users can quickly add components and check if they are working properly, and if there are any issues, they can try another component.

 

There is a content editing box on one side of the website, allowing for real-time monitoring of all changes, further streamlining the workflow.

 

Finally, moving content between CMSs has become surprisingly easy. All that was needed was to rewrite the components written in .twig (twig - a PHP template engine) as React components and connect them to Storyblok.

 

2-2 Storyblok and Gatsby

This is a case study of Veronym using this combo, as mentioned before, Storyblok's source plugin does not use GraphQL and content delivery to pages/components is slightly different from other CMS. Therefore, we were not able to use the benefits provided by Gatsby, such as the Gatsby-image, a specially designed React component that seamlessly works with Gatsby's GraphQL queries.

 

So, we created a plugin called gatsby-storyblok-image to make it possible to use gatsby-image with Storyblok outside of GraphQL. This greatly improved the user experience of Gatsby websites backed by Storyblok.

3. Results

I am satisfied with the improved performance.

 

We prioritize performance and security in our business, so we want visitors to experience this from the first few seconds of visiting our site.

 

Tim Van Renterghem
CEO of EMDYN

Improving page load time by just a few seconds can have a significant impact on any business. It affects user experience, SEO, and conversion rates. However, the benefits of the stack used in this case are not limited to just that.

 

In addition to my experience as an editor, I have simplified the editing workflow by adding features such as page preview, easy page manipulation, and intuitive addition, deletion, and editing of modules on any page.

 

Not only did we solve performance issues, but we also improved our experience as website administrators.

 

An interesting project was completed and the client was pleased.