Published at April 26, 2022by Jörg Brandeis

On April 26, 2022, we completely rebuilt the Brandeis Consulting website. The content should largely stay the same, but in the backend everything has changed completely. We switched from Wordpress (WP), the most widely used CMS worldwide with a 65% market share, to GatsbyJs. And for good reasons.

What's behind it

Gatsbyjs is a Server Side Rendering (SSR) framework. That means: the entire website is generated in advance on the server. At runtime, the finished pages are simply delivered. This has many advantages over Wordpress. The most important point is performance. Gatsbyjs is lightning fast because only the page has to be transferred. Nothing else happens on the server.

Why the switch

Everything actually speaks in favor of Wordpress: it's free, has an outstanding market share, and can be extended arbitrarily with many thousands of plug-ins. But that's where the problem begins. You can't run Wordpress without a dozen plug-ins. In my case, for example, despite regular cleanups, I ended up with 38 plug-ins in use. Since I'm not a PHP developer, I couldn't say exactly what was happening in the end. As long as every plug-in did what it was supposed to do, everything was fine. But unfortunately that wasn't always the case. Especially with event management and the booking of training courses, something kept going wrong. New training dates were very time-consuming to set up. And afterwards, thorough testing was required. And still, emails came in with the message: Your registration isn't working properly. The WP solution to the problem would be: Try another plug-in. Evaluation 1-2 days, implementation 1-2 days. But afterwards you have no guarantee that it will really run in the long term. Other construction sites in my WP installation:

• Language switching German vs. English with WPML and automatic translations. Sometimes brilliantly simple and everything works perfectly. But sometimes also hours of searching for trivial problems.
• Configuring the cookie banner correctly
• Custom post types for my training dates
• Schema generation for Schema.org
• Reusability of blocks. Neither Gutenberg nor additional plug-ins have a stable solution here.
• Performance is always a topic. With every change. Last year I converted everything from Elementor to Gutenberg. That brought an enormous improvement in performance. But it was a huge effort. And Gutenberg is still not mature. And you don't reach 100 points on Google Speed Insights despite all efforts.

All in all, Wordpress cost me a lot of time. At some point I said: This is all a waste of time without a real solution to the problems. I don't want to keep taking on technical debt. Despite many (some paid) plug-ins, I never had the feeling: I have all this 100% under control, understand what's happening, and can set everything up exactly the way I want at any time. So I bit the bullet and decided on a redesign.

What has improved

At the top of the improvements was initially the runtime. More than 90 points on Google Speed Insights for mobile devices is of course a dream. That is simply unrealistic with WP, but with Gatsbyjs such ratings are practically standard.

Also beyond the measurements: The website simply feels much faster and is much more fun. You don't have to think long about every click, because everything is super fast.

The design is no longer forced by plug-ins, but can be freely determined. As a software developer, I am of course a fan of reusability and modularization. Accordingly, the design was created following a consistent scheme.

Objects on the website are, for example:

• Blog articles
• Training topics
• Course dates
• Blog categories
• Trainers

These objects all have the same properties. We need different views of each:

• The individual instance. An article. A course date etc. These individual views always have a sidebar where suitable other objects are referenced. So other training courses, links etc.
• A list of objects
• A table or a grid
• The individual instance as a tile

With Gatsbyjs this can be implemented very elegantly. And when you do have a problem, the error is quickly found. I never managed to do that with Wordpress. On the contrary - here I invested a lot of time, especially in managing events, because everything was tested over and over again after every change.

New features without plugins

A current example: The contact form attracted too much spam. Just like on the old site with Wordpress. But instead of a captcha that makes another plug-in (or the existing form) a paid one, and where you then have to identify all bicycles or traffic lights, I can implement that myself in Gatsbyjs. The solution to the requirement is simple, since 100% of the spam entries contain a URL and 100% of the meaningful inquiries do not contain a URL. With JavaScript, that's filtered out in 2 lines:

export function containsLinks(text){
  const regex = new RegExp('(https?:\/\/[^\s]+)');
    return regex.test(text);    
}

Along the way, I also learned a lot about NodeJS and JavaScript.

Conclusion on the new site with Gatsbyjs

All in all, the move is now complete. As in every IT project, the scope was initially underestimated. As is well known, the devil is in the details. All in all, multilingualism in particular was a real challenge here. At first I wanted to solve it with a few plugins, but in the end you have to implement a lot by hand.

And of course there are still a few changes to the website ahead. This also includes a few new articles, because those have unfortunately been neglected recently. I'm happy about feedback and also about reports of errors.

But in the end, the effort paid off. The site is super fast and works exactly the way I want it to.

Many thanks to Christian Drumm, who inspired me with his article Why I Created My Own Website and above all gave me the idea of using GatsbyJS.