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.

While researching how the AMP project website was built I realized that they are using a "static-site-generator". As I started exploring more the ecosystem, I've started seeing reference to Jamstack. One of the generators that kept being mentioned in the articles I was browsing was GatsbyJS. As soon as I got to visit their docs I was amazed about how fast everything loaded. It felt like a native app. I was "hooked".

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 site is built with Gatsby and styled-components
• Contentful as headless CMS
• Netlify for hosting

Sign up for our Jamstack newsletter!

Join the newsletter today and receive valuable, in-depth Jamstack tips, tricks, and case studies.

Submit

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.

The whole team at SEOmonitor was amazed by the speed and we started researching development agencies who would help with our transition. We also needed to be able to update the website from non-technical members, without the hassle of setting up Git or writing markdown files. Luckily we found Netlify and Contentful pretty soon and it seemed like a perfect fit for our existing publishing flows.

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:

• the modularity of content models,
• multi-language support backed-in from the start,
• permission management,
• being an API driven solution it allowed us to develop custom data relationships and data structures,
• marvelous ease of integration with Gatsby (Gatsby official support page is here),
• and, what is probably the most important thing, Alen’s team loved it’s UI.

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.

The commitment that Bejamas had on the Jamstack was something comforting. They have it in the name. This suggested they were on a mission on helping companies like ours in the transition to this new philosophy of development. It felt like perfect partners. I've been working for more than 10years in marketing and I have to say this was the best experience I had as a customer interacting with an agency.

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.