From WordPress to Headless: the complete before/after performance comparison
After about ten years as loyal users of Wordpress, we decided that now would be the right time for CREAM to walk the walk and migrate to a headless infrastructure. If you need a run down on what headless means and brings to the table, check out this article.
The objective is two-fold: first, migrate our current company website to benefit from all the advantages that headless bring. Second, and while we are at it, make a numerical, analytics-based case for the same transition to headless that we are regularly preaching and executing on behalf of clients.
Below are our findings and insights of this before/after comparison but first here is a bit of context:
From an overly-edited, heavyweight Wordpress...
For around ten years, the CREAM website and online portfolio had been running on Wordpress. Despite two full redesigns and trying everything both pre-built and fully custom, using Wordpress for over ten years made us very aware of its potential and limitations, especially as newer, more modern technologies started popping up in the landscape.
While our dev team felt held back by the outdated PHP-based architecture or by the dependencies relying exclusively on Wordpress and its third-party plugin developers, our marketing team also gradually felt that the heavy machinery that was provided was simply not a good fit for this website.
Lastly and perhaps most importantly, the low performance associated with Wordpress and similar CMS combined with the ever increasing weight that Google’s algorithm attributes to such factors when ranking sites finished to convince us.
Headless sounded like a MUST DO spring cleanup for CREAM and it was time for Wordpress to go...
...to a blazingly fast headless architecture!
As the main actors of this transition, we empowered our dev team to pick the tech stack for the new website headless implementation.
The new CREAM website runs on Vercel, using Prismic as a headless CMS solution and a React front-end layer. This cherry-picked modern stack allowed us to drastically improve our development efficiency compared to older tech used by monolithic architecture. We also were able to set up proper development environment, enabling easier testing phases.
As an additional technical benefit, headless also lets us spread out and delegate the responsibility of our website’s security to more layers. In short, because there are more potential entry points to our database, that are also spread out onto different services, all protected by their own security system, our website becomes a lot more protected against potential ill-meaning attacks.
Using a headless CMS like Prismic also allowed us to build exactly the front-end layer, content blocks and customization options we need - and nothing more! Our CMS back-office offers a simplified, straight to the point interface that feels much clearer than before.
Clearly though and as expected the biggest improvement of going headless was about the website performance. We managed to raise our Google Lighthouse Performance score by about 30 (!) points and SEO performance by almost 10 points.
As a cherry on the top, we also set up the website as a progressive web app (PWA): you can install the CREAM website on your mobile device for it to look and act similarly to a native app.
While this virtually does not bring much interest for an agency portfolio website, it is however a great addition for websites that rely on the many benefits of PWA. As an example, installing an e-Commerce website as a PWA on your device allows you it to load content while offline, making sure customers have a Shakira-smooth purchase experience: wherever, whenever.
Wrapping Up
Fair to say that switching to headless improved the CREAM website greatly at both increasing performance and delivering a richer experience. While we already knew what to expect from this migration, we hope this makes for a great case for anyone still hesitating on making the jump to headless. Whether you are already decided or still thinking about it, contact us to talk about it.
