Case Study on 3x Performance Improvement for Emerging Dynamics' New Site

There are times when the stack used does not perform as expected. In such cases, we either do our best to make it work or choose a completely different option. Due to the issues we faced while progressing with the EMDYN project, we decided to completely change the stack.

 

As a result, performance has also been significantly improved.

 

Before:

 

 

After:

 

 

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

 

It is not a bad improvement. Now, let me explain how we achieved that.

1. Overview

Emerging Dynamics (EMDYN) is a privately held security company that provides intelligence-driven security solutions. We assist numerous international corporations, worth billions of dollars, in leveraging cutting-edge technology to anticipate threats, optimize critical decision-making, and protect their assets. Therefore, there were two main concerns regarding performance and security, along with a simple request to migrate the website's frontend to Gatsby.

 

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

 

What is a flat-file 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, so from the beginning, we faced the problem of not having a plugin to connect Gatsby and Grav. Since there was nothing available, we rolled up our sleeves and started coding.

 

However, I soon realized that it was a big mistake. With the first version of the plugin, I encountered data passing issues with Grav and realized that it could not be used as a headless CMS with Gatsby.

 

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

 

1-3 Stacks Used

For this reason, we basically had to consider a different stack that closely mirrored 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. The biggest challenge in this project

After discussing the issues with the modular page with the staff of Emerging Dynamics, 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, allowing users to add and edit any page using predefined components. We have configured Storyblok to operate in the same way, so our customers can work with minimal changes from their previous CMS experience.

 

Furthermore, one of the greatest 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 your setup has 30 predefined components. It is impossible for users to remember everything by name alone. In Storyblok, users can quickly add components. They can check if this component is suitable and try another component if there are any issues.

 

The presence of a content editing box on one side of the website allows 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) into React components and connect them to Storyblok.

 

2-2 Storyblok and Gatsby

As mentioned in the Veronym case study using this combo, the Storyblok source plugin does not use GraphQL, and content delivery to pages/components is slightly different from other CMSs. Therefore, we were unable to use Gatsby-image, a React component specifically designed to work seamlessly with Gatsby's GraphQL queries, which is one of the benefits provided by Gatsby.

 

Therefore, we created a plugin called gatsby-storyblok-image, which allows gatsby-image to be used outside of GraphQL with Storyblok. This significantly improved the user experience of Gatsby websites backed by Storyblok.

3. Results

I am satisfied with the improved performance.

 

We focus on performance and security in our business, so we want site visitors to experience this from the very first few seconds.

 

Tim Van Renterghem
CEO of EMDYN

Improving page load time by just a few seconds can undoubtedly have a significant impact on any business. It affects user experience, SEO, and conversion rates. However, the benefits of the stack we used this time 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 previews, easy page manipulation, and the intuitive ability to add, remove, and edit modules on any page.

 

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

 

We completed an interesting project, and the client was pleased as well.