Case Study: Road To a Better And Faster SEOmonitor Website

We at Bejamas love working with the people who strive towards a better understanding of technical problems. People who are keen on following the current tech trends and always put their customers above profit. More often than not those kinds of people are the best in their industries.

When Alen from SEOmonitor approached us last summer we were thrilled not only because we are helping a well-known brand and an SEO tool meet their goals, but we're learning a great deal from those who are the best when it comes to SEO.

The summer of 2018 was pretty hectic for us, with numerous projects drawing to a close. At the same time, at SEOmonitor, they were ready to launch Signals, a companion to their SEO platform that aims to provide instant insights about your ongoing SEO campaigns.

They wanted every marketing material to stand out and communicate how easy and frictionless it is to manage an SEO agency’s day to day activities straight from Signals. In order to do that, they needed the tech and the development partner to quickly move forward with the project goals.

The Overview

Their old website was built on WordPress with a cacophony of plugins and CSS overwrites. Loading times were ridiculous and what made the work even more difficult was the constant trial and error approach to WordPress, the theme, and the plugins updated.

Basically, they needed web architecture that performs well across browsers and devices, emphasizes developer ergonomics and modern tools, and allows them to continuously deploy new content with ease.

With Gatsby as their proposed static site generator and short time frame for the project, we needed a headless CMS that we knew would work well with Gatsby and proved hosting solution.

Tech stack we used:

The Biggest Challenges We’ve Had On This Project

In our previous case study for the GoJust website Michal covered many of the good sides Gatsby and Netlify brought to that build. I’d like to take a slightly different approach this time by analyzing the problems we’ve experienced in this project and how we manage to overcome them.

The biggest challenge in this project was its design. Due to the fact that the project required the use of many SVG files, most of which had to be in a particular position on the site. We decided to divide the background of each section on the page into "fragments" and we will properly position them in CSS. This, in turn, forced us to use many CSS pseudo-elements. Due to the multitude of these pseudo-elements, there were a lot of problems with the z-index property.

One other curiosity about the project is the implementation of a website translation into two languages. We used i18n-react library for this purpose. In addition to having an "attach" to the context of the file with the appropriate translation, each page on SEOmonitor website during the construction is also cloned due to the uniqueness of the URL under which it occurs. This allowed us to translate the content of a given page based on the URL under which it appears.

Finally, I should mention that each of our projects contains a linter that orders the code both while working in a development environment, as well as checks it and formats it when committing changes to the repository. For this purpose, we used a well-known library called "husky".

Contentful as the Headless CMS

As I mentioned earlier we needed a fast and developer-friendly solution for our headless CMS. Together with Alen and the rest of his marketing team, we’ve picked Contentful as the Headless CMS for this project. There were a couple of reasons behind this choice:

With it, they are empowered to craft beautiful pieces of content effortlessly. First of all, everything is laid out clearly making it easy to sort and edit. Finally, with one click of the “publish” button, they’re letting Netlify know, that there’s something new to show to the world.

The Results

Today’s digital world value speed and simplicity above all. With the proposed stack setup we’ve managed to improve loading times (from 5 to 6 seconds to 400ms) while implementing a design that is pixel-perfect.

In Alen’s words: The hassle of not having to care about security, because everything is static or solving the idiosyncrasies of conflicting plugins, makes it worth it a lot.

For us, being able to answer to their specific requests is what made the effort worthwhile.

Need a better performing and more secure website? Let’s get in touch!

CLICK HERE to schedule 1-on-1 talk and learn more about what we can do for you and your business.